【Android UI】案例03滑动切换效果的实现(ViewPager)

浏览数：15 / 时间：2015年06月11日

本例使用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>

效果截图：