zoukankan      html  css  js  c++  java
  • 【Android UI】案例03滑动切换效果的实现(ViewPager)

           本例使用ViewPager实现滑动切换的效果。本例涉及的ViewPager。为android.support.v4.view.ViewPager。所以须要在android项目中导入android-support-v4.jar。
           本例中ViewPager是实现滑动效果的核心部分。对其设置PageChangeListener监听事件,是实现滑动效果的核心思路。

    【转载使用,请注明出处:http://blog.csdn.net/mahoking
           首先是主界面layout.xml文件。activity_03_viewpager.xml。

    主界面的布局是顶部为页面标签,点击标签或滑动页面都能够实现切换页面的功能。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <LinearLayout android:layout_width="match_parent"
            android:layout_height="40dp"
            android:orientation="horizontal">
            <TextView android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="选项卡01"
                android:id="@+id/activity_03_viewpager_textview_01"/>
            <TextView android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:text="选项卡02"
                android:gravity="center"
                android:id="@+id/activity_03_viewpager_textview_02"/>
            <TextView android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="选项卡03"
                android:id="@+id/activity_03_viewpager_textview_03"/>
        </LinearLayout>
    	<ImageView
    	        android:id="@+id/cursor"
    	        android:layout_width="match_parent"
    	        android:layout_height="wrap_content"
    	        android:scaleType="matrix"
    	        android:src="@drawable/example03_cursor" />
    	
    	<android.support.v4.view.ViewPager
            android:id="@+id/activity_03_viewpager_vPager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1.0"
            android:background="#000000"
            android:flipInterval="30"
            android:persistentDrawingCache="animation" />
    </LinearLayout>

           以上须要一个ImageView组件,该组件实现一种动态移动标签的效果,读者能够自行选择喜欢的标签下的底部长方形图片。可參考效果截图。


          主Activity(ViewPagerActivity)的编写。

    首先是全局变量的定义:

    private ViewPager mPager;// 页卡内容
    private List<View> listViews; // Tab页面列表
    private ImageView cursor;// 动绘图片
    private TextView t1, t2, t3;// 页卡头标
    private int offset = 0;// 动绘图片偏移量
    private int currIndex = 0;// 当前页卡编号
    private int bmpW;// 动绘图片宽度

             本例提供了三个初始化布局空间的方法,分别为:initTextViews()、initImageView()、initViewPager()。

    initTextViews()

    private void initTextViews() {
    		t1 = (TextView) findViewById(R.id.activity_03_viewpager_textview_01);
    		t2 = (TextView) findViewById(R.id.activity_03_viewpager_textview_02);
    		t3 = (TextView) findViewById(R.id.activity_03_viewpager_textview_03);
    
    		t1.setOnClickListener(new MyOnClickListener(0));
    		t2.setOnClickListener(new MyOnClickListener(1));
    		t3.setOnClickListener(new MyOnClickListener(2));
    	}


    initImageView()

    private void initViewPager() {
    
    		mPager = (ViewPager) findViewById(R.id.activity_03_viewpager_vPager);
    		listViews = new ArrayList<View>();
    		LayoutInflater mInflater = getLayoutInflater();
    		listViews.add(mInflater.inflate(R.layout.layout_03_layout01, null));
    		listViews.add(mInflater.inflate(R.layout.layout_03_layout02, null));
    		listViews.add(mInflater.inflate(R.layout.layout_03_layout03, null));
    		mPager.setAdapter(new ViewPagerAdapter(listViews));
    		mPager.setCurrentItem(0);
    		mPager.setOnPageChangeListener(new MyOnPageChangeListener());
    	}

    initViewPager()

    /**
    	 * 初始化动画
    	 */
    	private void initImageView() {
    		cursor = (ImageView) findViewById(R.id.cursor);
    		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.example03_cursor)
    				.getWidth();// 获取图片宽度
    		DisplayMetrics dm = new DisplayMetrics();
    		getWindowManager().getDefaultDisplay().getMetrics(dm);
    		int screenW = dm.widthPixels;// 获取分辨率宽度
    		offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
    		Matrix matrix = new Matrix();
    		matrix.postTranslate(offset, 0);
    		cursor.setImageMatrix(matrix);// 设置动画初始位置
    	}


            有上述方法可见,本例须要两内部类MyOnClickListener、MyOnPageChangeListener,去处理监听事件。


    MyOnClickListener

    /**
    	 * 点击监听事件
    	 *
    	 */
    	public class MyOnClickListener implements View.OnClickListener {
    		private int index = 0;
    
    		public MyOnClickListener(int i) {
    			index = i;
    		}
    
    		@Override
    		public void onClick(View v) {
    			mPager.setCurrentItem(index);
    		}
    	};

    MyOnPageChangeListener

    /**
    	 * 
    	 *页卡切换监听
    	 */
    	public class MyOnPageChangeListener implements OnPageChangeListener{
    		 int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
    		       int two = one * 2;// 页卡1 -> 页卡3 偏移量
    		
    		        @Override
    	         public void onPageSelected(int arg0) {
    	             Animation animation = null;
    		             switch (arg0) {
    	            case 0:
    		                if (currIndex == 1) {
    		                    animation = new TranslateAnimation(one, 0, 0, 0);
    		                 } else if (currIndex == 2) {
    		                    animation = new TranslateAnimation(two, 0, 0, 0);
    		                 }
    		                 break;
    		            case 1:
    		                 if (currIndex == 0) {
    		                    animation = new TranslateAnimation(offset, one, 0, 0);
    	                 } else if (currIndex == 2) {
    	                     animation = new TranslateAnimation(two, one, 0, 0);
    		                 }
    	                break;
    		            case 2:
    		                if (currIndex == 0) {
    		                    animation = new TranslateAnimation(offset, two, 0, 0);
    		                } else if (currIndex == 1) {
    	                    animation = new TranslateAnimation(one, two, 0, 0);
    		                 }
    	                 break;
    		            }
    		             currIndex = arg0;
    		             animation.setFillAfter(true);// True:图片停在动画结束位置
    		            animation.setDuration(300);
    		             cursor.startAnimation(animation);
    		         }
    
    	         @Override
    	        public void onPageScrolled(int arg0, float arg1, int arg2) {
    		         }
    	 
    		         @Override
    		        public void onPageScrollStateChanged(int arg0) {
    		        }
    	}


             在此补充一下。本例须要展示三个页卡,所以还须要三个页卡内容的界面设计。在这里我们仅仅设置了背景颜色,仅仅为起到差别作用。

    layout_03_layout01.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        android:background="#FF6666">
        
    </LinearLayout>


    效果截图:

     

    【转载使用。请注明出处:http://blog.csdn.net/mahoking

  • 相关阅读:
    codeforces C. No to Palindromes!
    codeforces D. Pashmak and Parmida's problem
    codeforces C. Little Pony and Expected Maximum
    codeforces D. Count Good Substrings
    codeforces C. Jzzhu and Chocolate
    codeforces C. DZY Loves Sequences
    codeforces D. Multiplication Table
    codeforces C. Painting Fence
    hdu 5067 Harry And Dig Machine
    POJ 1159 Palindrome
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5058998.html
Copyright © 2011-2022 走看看