先貼效果圖（每個開關Tab債券。尾隨頁變化。效果圖藍條添加的用戶體驗）

首先看總體效果圖的布局文件吧（非常easy，就三部分，各自是Tab欄目、定位藍條、各個頁面（是V4包下的ViewPager））

activity_tab_winter_main.xml

<?xml version="1.0" encoding="utf-8"?

> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FF969696" android:orientation="vertical" > <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="45.0dip" android:background="#FFDFD7D7" > <TextView android:id="@+id/text1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:gravity="center" android:text="\n廣告" android:textColor="#000000" /> <TextView android:id="@+id/text2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:gravity="center" android:text="\n選項" android:textColor="#000000" /> <TextView android:id="@+id/text3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:gravity="center" android:text="\n關于作者" android:textColor="#000000" /> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/icon_tab_winter_a" /> <android.support.v4.view.ViewPager android:id="@+id/vPager" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_gravity="center" android:layout_weight="1.0" android:background="#FFDFD7D7" android:flipInterval="30" android:persistentDrawingCache="animation" /> </LinearLayout>

接下來貼出每一個頁面的布局文件

activity_tab_winter_lay1.xml--activity_tab_winter_lay2.xml---activity_tab_winter_lay3.xml（三個頁面是一樣的，就是text內容不一樣。這樣好區分）

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#FFDFD7D7"android:orientation="vertical" ><Buttonandroid:id="@+id/btn"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:text="廣告" /> </LinearLayout>
MainActivity（思路簡單，代碼有凝視）

package com.example.viewpagerdemo;import java.util.ArrayList; import java.util.List;import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.os.Bundle; import android.os.Parcelable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView;public class MainActivity extends Activity {private ViewPager mPager;// 頁卡內容private List<View> listViews; // Tab頁面列表private TextView t1, t2, t3;// 頁卡頭標private int currIndex = 0;// 當前頁卡編號private ImageView cursor;// 動繪圖片private int bmpW;// 動繪圖片寬度private int offset = 0;// 動繪圖片偏移量@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_winter_main);//初始化三部分InitImageView();InitTextView();InitViewPager();}/*** 初始化動畫*/private void InitImageView() {//獲取空間cursor = (ImageView) findViewById(R.id.cursor);// 獲取圖片寬度bmpW = BitmapFactory.decodeResource(getResources(),R.drawable.icon_tab_winter_a).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);}/*** 初始化頭標*/private void InitTextView() {t1 = (TextView) findViewById(R.id.text1);t2 = (TextView) findViewById(R.id.text2);t3 = (TextView) findViewById(R.id.text3);//加入監聽事件t1.setOnClickListener(new MyOnClickListener(0));t2.setOnClickListener(new MyOnClickListener(1));t3.setOnClickListener(new MyOnClickListener(2));}/*** 初始化ViewPager*/private void InitViewPager() {//viewPagermPager = (ViewPager) findViewById(R.id.vPager);//datalistViews = new ArrayList<View>();LayoutInflater mInflater = getLayoutInflater();listViews.add(mInflater.inflate(R.layout.activity_tab_winter_lay2, null));listViews.add(mInflater.inflate(R.layout.activity_tab_winter_lay1, null));listViews.add(mInflater.inflate(R.layout.activity_tab_winter_lay3, null));//adaptermPager.setAdapter(new MyPagerAdapter(listViews));mPager.setCurrentItem(0);//監聽事件mPager.setOnPageChangeListener(new MyOnPageChangeListener());}/*** ViewPager適配器*/public class MyPagerAdapter extends PagerAdapter {public List<View> mListViews;public MyPagerAdapter(List<View> mListViews) {this.mListViews = mListViews;}@Overridepublic void destroyItem(View view, int position, Object arg2) {((ViewPager) view).removeView(mListViews.get(position));}@Overridepublic void finishUpdate(View arg0) {}@Overridepublic int getCount() {return mListViews.size();}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mListViews.get(position));return mListViews.get(position);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == (arg1);}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}}/*** 頭標點擊監聽*/public class MyOnClickListener implements View.OnClickListener {private int index = 0;public MyOnClickListener(int i) {index = i;}public void onClick(View v) {mPager.setCurrentItem(index);}};/*** 頁卡切換監聽*/public class MyOnPageChangeListener implements OnPageChangeListener {int one = offset * 2 + bmpW;// 頁卡1 -> 頁卡2 偏移量int two = one * 2;// 頁卡1 -> 頁卡3 偏移量public void onPageSelected(int position) {Animation animation = null;switch (position) {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 = position;animation.setFillAfter(true);animation.setDuration(300);cursor.startAnimation(animation);}public void onPageScrolled(int arg0, float arg1, int arg2) {}public void onPageScrollStateChanged(int arg0) {}} }

總結

以上是生活随笔為你收集整理的ViewPager实现页面切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。