android(8) ViewPager頁面滑動切換，androidviewpager

android(8) ViewPager頁面滑動切換，androidviewpager

一.ViewPager頁面滑動切換實現：

   借鑒了別人的源碼，還是比較容易實現的，而且這種效果還是經常使用的，特此記錄一下：

：

主介面：

public class MainActivity extends Activity {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;// 動畫圖片寬度@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_main);InitImageView();InitTextView();InitViewPager();}// 初始選項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));}// 初始化ViewPagerprivate void InitViewPager() {mPager = (ViewPager) findViewById(R.id.vPager);listViews = new ArrayList<View>();LayoutInflater mInflater = getLayoutInflater();listViews.add(mInflater.inflate(R.layout.activity_tab_one_pager, null));listViews.add(mInflater.inflate(R.layout.activity_tab_two_pager, null));listViews.add(mInflater.inflate(R.layout.activity_tab_three_pager, null));mPager.setAdapter(new MyViewPagerAdapter(listViews, this));//預設選中第一個頁面mPager.setCurrentItem(0);mPager.setOnPageChangeListener(new MyOnPageChangeListener());}// 初始化動畫private void InitImageView() {cursor = (ImageView) findViewById(R.id.cursor);bmpW = BitmapFactory.decodeResource(getResources(),R.drawable.icon_tab_page_bg).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);// 設定動畫初始位置}// 頁卡監聽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 位移量        //arg0表示頁數public void onPageSelected(int arg0) {// TranslateAnimation位移動畫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);}public void onPageScrolled(int arg0, float arg1, int arg2) {}public void onPageScrollStateChanged(int arg0) {}}}

viewPager適配器:

public class MyViewPagerAdapter extends PagerAdapter {private List<View> mListViews;private Context context;public MyViewPagerAdapter(List<View> mListViews, Context context) {this.mListViews = mListViews;this.context = context;}@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView(mListViews.get(arg1));}@Overridepublic void finishUpdate(View arg0) {}@Overridepublic int getCount() {return mListViews.size();}@Overridepublic Object instantiateItem(View arg0, int arg1) {if (arg1 < 3) {((ViewPager) arg0).addView(mListViews.get(arg1 ), 0);}// 頁卡內點擊事件if (arg1 == 0) {Button btn = (Button) arg0.findViewById(R.id.btn);btn.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {showDialog("1");}});}if (arg1 == 1) {Button btn = (Button) arg0.findViewById(R.id.btn);btn.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {showDialog("2");}});}if (arg1 == 2) {Button btn = (Button) arg0.findViewById(R.id.btn);btn.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {showDialog("3");}});}return mListViews.get(arg1);}public void showDialog(String arg) {new AlertDialog.Builder(context).setTitle("說明").setMessage("這是第"+arg+"個頁面").setNegativeButton("確定", new DialogInterface.OnClickListener() {public void onClick(DialogInterface dialog, int which) {}}).show();}@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) {}}

xml:

<?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="#FF969696"    android:orientation="vertical" >    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="fill_parent"        android:layout_height="45dp"        android:background="#FFDFD7D7" >        <TextView            android:id="@+id/text1"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:text="\n頁卡1"            android:textColor="#000000" />        <TextView            android:id="@+id/text2"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:text="\n頁卡2"            android:textColor="#000000" />        <TextView            android:id="@+id/text3"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:text="\n頁卡3"            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_page_bg" />    <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"        android:background="#FFDFD7D7"        android:flipInterval="30"        android:persistentDrawingCache="animation" /></LinearLayout>

三個頁面:

<?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" >        <Button        android:id="@+id/btn"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:gravity="center"        android:text="點擊我" /></LinearLayout>

ok完成了。