Android ViewPager多頁面滑動切換以及動畫效果

標籤：

一、首先，我們來看一下，這是新浪微博的Tab滑動效果。我們可以手勢滑動，也可以點擊上面的頭標進行切換。與此同方式， 白色橫條會移動到相應的頁卡頭標下。這是一個動畫效果，白條是緩慢滑動過去的。好了，接下來我們就來實現它。 二、在開始前，我們先要認識一個控制項，ViewPager。它是google SDk中內建的一個附加元件封裝的一個類，可以用來實現螢幕間的切換。 這個附加元件封裝是android-support-v4.jar，在最後的源碼中會提供給大家，在libs檔案夾中。當然你也可以自己從網上搜尋最新的版本。 找到它後，我們需要在項目中添加 三、我們先做介面， 介面設計很簡單，第一行三個頭標，第二行動畫圖片，第三行頁卡內容展示。 複製代碼

複製代碼 我們要展示三個頁卡，所以還需要三個頁卡內容的介面設計，這裡我們只設定了背景顏色，能起到區別作用即可。 複製代碼

複製代碼 四、代碼部分要進行初始化的工作 (1) 先來變數的定義 複製代碼    private ViewPager mPager;//頁卡內容    private List

listViews; // Tab頁面列表    private ImageView cursor;// 動畫圖片    private TextView t1, t2, t3;// 頁卡頭標    private int offset = 0;// 動畫圖片位移量    private int currIndex = 0;// 當前頁卡編號    private int bmpW;// 動畫圖片寬度 複製代碼 (2) 初始化頭標 複製代碼 1     /** 2      * 初始化頭標 3 */ 4     private void InitTextView() { 5         t1 = (TextView) findViewById(R.id.text1); 6         t2 = (TextView) findViewById(R.id.text2); 7         t3 = (TextView) findViewById(R.id.text3); 8 9         t1.setOnClickListener(new MyOnClickListener(0)); 10         t2.setOnClickListener(new MyOnClickListener(1)); 11         t3.setOnClickListener(new MyOnClickListener(2)); 12     } 複製代碼 複製代碼 1     /** 2      * 頭標點擊監聽 3 */ 4     public class MyOnClickListener implements View.OnClickListener { 5         private int index = 0; 6 7         public MyOnClickListener(int i) { 8             index = i; 9         } 10 11         @Override 12         public void onClick(View v) { 13             mPager.setCurrentItem(index); 14         } 15     }; 複製代碼 相信大家看後都沒什麼問題，點擊第幾個，就展示第幾個頁卡內容。 (3) 初始化頁卡內容區 複製代碼 1     /** 2      * 初始化ViewPager 3 */ 4     private void InitViewPager() { 5         mPager = (ViewPager) findViewById(R.id.vPager); 6         listViews = new ArrayList(); 7         LayoutInflater mInflater = getLayoutInflater(); 8         listViews.add(mInflater.inflate(R.layout.lay1, null)); 9         listViews.add(mInflater.inflate(R.layout.lay2, null)); 10         listViews.add(mInflater.inflate(R.layout.lay3, null)); 11         mPager.setAdapter(new MyPagerAdapter(listViews)); 12         mPager.setCurrentItem(0); 13         mPager.setOnPageChangeListener(new MyOnPageChangeListener()); 14     } 複製代碼 我們將三個頁卡介面裝入其中，預設顯示第一個頁卡。這裡我們還需要實現一個適配器。 複製代碼 1 /** 2      * ViewPager適配器 3 */ 4     public class MyPagerAdapter extends PagerAdapter { 5         public ListmListViews; 6 7         public MyPagerAdapter(ListmListViews) { 8             this.mListViews = mListViews; 9         } 10 11         @Override 12         public void destroyItem(View arg0, int arg1, Object arg2) { 13             ((ViewPager) arg0).removeView(mListViews.get(arg1)); 14         } 15 16         @Override 17         public void finishUpdate(View arg0) { 18         } 19 20         @Override 21         public int getCount() { 22             return mListViews.size(); 23         } 24 25         @Override 26         public Object instantiateItem(View arg0, int arg1) { 27             ((ViewPager) arg0).addView(mListViews.get(arg1), 0); 28             return mListViews.get(arg1); 29         } 30 31         @Override 32         public boolean isViewFromObject(View arg0, Object arg1) { 33             return arg0 == (arg1); 34         } 35 36         @Override 37         public void restoreState(Parcelable arg0, ClassLoader arg1) { 38         } 39 40         @Override 41         public Parcelable saveState() { 42             return null; 43         } 44 45         @Override 46         public void startUpdate(View arg0) { 47         } 48     } 複製代碼 這裡我們實現了各頁卡的裝入和卸載 (3) 初始化動畫 複製代碼 1     /** 2      * 初始化動畫 3 */ 4     private void InitImageView() { 5         cursor = (ImageView) findViewById(R.id.cursor); 6         bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a) 7                 .getWidth();// 擷取圖片寬度 8         DisplayMetrics dm = new DisplayMetrics(); 9         getWindowManager().getDefaultDisplay().getMetrics(dm); 10         int screenW = dm.widthPixels;// 擷取解析度寬度 11         offset = (screenW / 3 - bmpW) / 2;// 計算位移量 12         Matrix matrix = new Matrix(); 13         matrix.postTranslate(offset, 0); 14         cursor.setImageMatrix(matrix);// 設定動畫初始位置 15     } 複製代碼 根據螢幕的解析度和圖片的寬度計算動畫移動的位移量 實現頁卡切換監聽 複製代碼 1 /** 2      * 頁卡切換監聽 3 */ 4     public class MyOnPageChangeListener implements OnPageChangeListener { 5 6         int one = offset * 2 + bmpW;// 頁卡1 -> 頁卡2 位移量 7         int two = one * 2;// 頁卡1 -> 頁卡3 位移量 8 9         @Override 10         public void onPageSelected(int arg0) { 11             Animation animation = null; 12             switch (arg0) { 13             case 0: 14                 if (currIndex == 1) { 15                     animation = new TranslateAnimation(one, 0, 0, 0); 16                 } else if (currIndex == 2) { 17                     animation = new TranslateAnimation(two, 0, 0, 0); 18                 } 19                 break; 20             case 1: 21                 if (currIndex == 0) { 22                     animation = new TranslateAnimation(offset, one, 0, 0); 23                 } else if (currIndex == 2) { 24                     animation = new TranslateAnimation(two, one, 0, 0); 25                 } 26                 break; 27             case 2: 28                 if (currIndex == 0) { 29                     animation = new TranslateAnimation(offset, two, 0, 0); 30                 } else if (currIndex == 1) { 31                     animation = new TranslateAnimation(one, two, 0, 0); 32                 } 33                 break; 34             } 35             currIndex = arg0; 36             animation.setFillAfter(true);// True:圖片停在動畫結束位置 37             animation.setDuration(300); 38             cursor.startAnimation(animation); 39         } 40 41         @Override 42         public void onPageScrolled(int arg0, float arg1, int arg2) { 43         } 44 45         @Override 46         public void onPageScrollStateChanged(int arg0) { 47         } 48     } 複製代碼 五、打完收工，快來看看自己的勞動成果吧 源碼分享：http://115.com/file/dpi0unyg

Android ViewPager多頁面滑動切換以及動畫效果