ViewPager 详解（四）----自主实现滑动指示条

转载自http://blog.csdn.net/harvic880925/article/details/38557517 

前言：前面我们用了三篇的时间讲述了有关ViewPager的基础知识，到这篇就要进入点实际的了。在第三篇《ViewPager 详解（三）---PagerTabStrip与PagerTitleStrip添加标题栏的异同》中，我们说了，PagerTabStrip和PagerTitleStrip都不适合用在实际用途中，当要在实际运用中，我们就要自己去实现相关的功能。这篇文章中单纯讲述划动指示条的实现方法，而对于交互Tab的实现，就不再讲解，最后给出网上的一段源码，大家可以去研究一下，有关交互Tab的实现原理是一样的，难度不大。

相关文章：

1、《ViewPager 详解（一）---基本入门》

2、《ViewPager 详解（二）---详解四大函数》

3、《ViewPager 详解（三）---PagerTabStrip与PagerTitleStrip添加标题栏的异同》

4、《ViewPager 详解（四）----自主实现滑动指示条》

5、《ViewPager 详解（五）-----使用Fragment实现ViewPager滑动》

先上本篇效果图：

  

一、XML布局

布局代码如下：

[html]  view plain  copy

 

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     tools:context="com.example.testviewpage_2.MainActivity" >  
7.       
8.      <ImageView  
9.         android:id="@+id/cursor"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="wrap_content"  
12.         android:scaleType="matrix"  
13.         android:src="@drawable/a" />  
14.   
15.     <android.support.v4.view.ViewPager  
16.         android:id="@+id/viewpager"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_gravity="center"/>  
20.   
21. </LinearLayout>  

采用线性垂直布局，在滑动页面的上方添加一个小水平条。

二、JAVA代码

本例代码是根据《ViewPager 详解（一）---基本入门》 更改而来。

先给出全部代码，然后再逐步讲解。

[java]  view plain  copy

 

1. public class MainActivity extends Activity {  
2.   
3.     private View view1, view2, view3;  
4.     private List<View> viewList;// view数组  
5.     private ViewPager viewPager; // 对应的viewPager  
6.   
7.     private ImageView cursor;  
8.     private int bmpw = 0; // 游标宽度  
9.     private int offset = 0;// // 动画图片偏移量  
10.     private int currIndex = 0;// 当前页卡编号  
11.   
12.     @Override  
13.     protected void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.activity_main);  
16.   
17.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
18.         LayoutInflater inflater = getLayoutInflater();  
19.         view1 = inflater.inflate(R.layout.layout1, null);  
20.         view2 = inflater.inflate(R.layout.layout2, null);  
21.         view3 = inflater.inflate(R.layout.layout3, null);  
22.   
23.         viewList = new ArrayList<View>();// 将要分页显示的View装入数组中  
24.         viewList.add(view1);  
25.         viewList.add(view2);  
26.         viewList.add(view3);  
27.   
28.         //初始化指示器位置  
29.         initCursorPos();  
30.           
31.         viewPager.setAdapter(new MyPagerAdapter(viewList));  
32.         viewPager.setOnPageChangeListener(new MyPageChangeListener());  
33.   
34.     }  
35.       
36.     //初始化指示器位置  
37.     public void initCursorPos() {  
38.         // 初始化动画  
39.         cursor = (ImageView) findViewById(R.id.cursor);  
40.         bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)  
41.                 .getWidth();// 获取图片宽度  
42.   
43.         DisplayMetrics dm = new DisplayMetrics();  
44.         getWindowManager().getDefaultDisplay().getMetrics(dm);  
45.         int screenW = dm.widthPixels;// 获取分辨率宽度  
46.         offset = (screenW / viewList.size() - bmpw) / 2;// 计算偏移量  
47.   
48.         Matrix matrix = new Matrix();  
49.         matrix.postTranslate(offset, 0);  
50.         cursor.setImageMatrix(matrix);// 设置动画初始位置  
51.     }  
52.       
53.   
54.     //页面改变监听器  
55.     public class MyPageChangeListener implements OnPageChangeListener {  
56.   
57.         int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量  
58.         int two = one * 2;// 页卡1 -> 页卡3 偏移量  
59.   
60.         @Override  
61.         public void onPageSelected(int arg0) {  
62.             Animation animation = null;  
63.             switch (arg0) {  
64.             case 0:  
65.                 if (currIndex == 1) {  
66.                     animation = new TranslateAnimation(one, 0, 0, 0);  
67.                 } else if (currIndex == 2) {  
68.                     animation = new TranslateAnimation(two, 0, 0, 0);  
69.                 }  
70.                 break;  
71.             case 1:  
72.                 if (currIndex == 0) {  
73.                     animation = new TranslateAnimation(offset, one, 0, 0);  
74.                 } else if (currIndex == 2) {  
75.                     animation = new TranslateAnimation(two, one, 0, 0);  
76.                 }  
77.                 break;  
78.             case 2:  
79.                 if (currIndex == 0) {  
80.                     animation = new TranslateAnimation(offset, two, 0, 0);  
81.                 } else if (currIndex == 1) {  
82.                     animation = new TranslateAnimation(one, two, 0, 0);  
83.                 }  
84.                 break;  
85.             }  
86.             currIndex = arg0;  
87.             animation.setFillAfter(true);// True:图片停在动画结束位置  
88.             animation.setDuration(300);  
89.             cursor.startAnimation(animation);  
90.         }  
91.   
92.         @Override  
93.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
94.         }  
95.   
96.         @Override  
97.         public void onPageScrollStateChanged(int arg0) {  
98.         }  
99.     }  
100.       
101.       
102.       
103.       
104.   
105.     /** 
106.      * ViewPager适配器 
107.      */  
108.     public class MyPagerAdapter extends PagerAdapter {  
109.         public List<View> mListViews;  
110.   
111.         public MyPagerAdapter(List<View> mListViews) {  
112.             this.mListViews = mListViews;  
113.         }  
114.   
115.         @Override  
116.         public boolean isViewFromObject(View arg0, Object arg1) {  
117.             // TODO Auto-generated method stub  
118.             return arg0 == arg1;  
119.         }  
120.   
121.         @Override  
122.         public int getCount() {  
123.             // TODO Auto-generated method stub  
124.             return mListViews.size();  
125.         }  
126.   
127.         @Override  
128.         public void destroyItem(ViewGroup container, int position, Object object) {  
129.             // TODO Auto-generated method stub  
130.             container.removeView(mListViews.get(position));  
131.         }  
132.   
133.         @Override  
134.         public Object instantiateItem(ViewGroup container, int position) {  
135.             // TODO Auto-generated method stub  
136.             container.addView(mListViews.get(position));  
137.   
138.             return mListViews.get(position);  
139.         }  
140.     }  
141.   
142. }  

从易到难一步步来讲。

1、MyPagerAdapter类

在前几篇中，我们对于适配器的实现总是new一个PageAdapter的实例。我们这里做了一点稍微的更改，将其集合成一个类，内容都没变，只是多了一个构造函数而已。所以针对这个类的具体代码，我就不再细讲，如果对其中的复写的函数为什么要这么写不理解的同学，请看《ViewPager 详解（二）---详解四大函数》

2、initCursorPos（）---初始化指示器位置

游标在初始化显示时，我们要根据屏幕宽度来显示游标位置。先看看这部分代码：

[java]  view plain  copy

 

1. //初始化指示器位置  
2. public void initCursorPos() {  
3.     // 初始化动画  
4.     cursor = (ImageView) findViewById(R.id.cursor);  
5.     bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)  
6.             .getWidth();// 获取图片宽度  
7.   
8.     DisplayMetrics dm = new DisplayMetrics();  
9.     getWindowManager().getDefaultDisplay().getMetrics(dm);  
10.     int screenW = dm.widthPixels;// 获取分辨率宽度  
11.     offset = (screenW / viewList.size() - bmpw) / 2;// 计算偏移量  
12.   
13.     Matrix matrix = new Matrix();  
14.     matrix.postTranslate(offset, 0);  
15.     cursor.setImageMatrix(matrix);// 设置动画初始位置  
16. }  

可能有些同学不明白的位置在于，初始化位置的偏移量为什么这么算，下面，我画了张图，看下就应该明白了。

最后对于偏移的方法，可用的很多，这里仿网上的代码用了matrix；当然大家可以用其它的偏移方法，一样。

3、MyPageChangeListener（）---页面改变监听器

代码如下 ：

[java]  view plain  copy

 

1. public class MyPageChangeListener implements OnPageChangeListener {  
2.   
3.     int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量  
4.     int two = one * 2;// 页卡1 -> 页卡3 偏移量  
5.   
6.     @Override  
7.     public void onPageSelected(int arg0) {  
8.         Animation animation = null;  
9.         switch (arg0) {  
10.         case 0:  
11.             if (currIndex == 1) {  
12.                 animation = new TranslateAnimation(one, 0, 0, 0);  
13.             } else if (currIndex == 2) {  
14.                 animation = new TranslateAnimation(two, 0, 0, 0);  
15.             }  
16.             break;  
17.         case 1:  
18.             if (currIndex == 0) {  
19.                 animation = new TranslateAnimation(offset, one, 0, 0);  
20.             } else if (currIndex == 2) {  
21.                 animation = new TranslateAnimation(two, one, 0, 0);  
22.             }  
23.             break;  
24.         case 2:  
25.             if (currIndex == 0) {  
26.                 animation = new TranslateAnimation(offset, two, 0, 0);  
27.             } else if (currIndex == 1) {  
28.                 animation = new TranslateAnimation(one, two, 0, 0);  
29.             }  
30.             break;  
31.         }  
32.         currIndex = arg0;  
33.         animation.setFillAfter(true);// True:图片停在动画结束位置  
34.         animation.setDuration(300);  
35.         cursor.startAnimation(animation);  
36.     }  

原理是这样，根据滑动到的页面，把游标滑动找指定位置。
这里可能有难度的地方在于，数学……

我画了一张图，解释从第一个页面到第二个页面时的距离为什么是“游标宽度+offset*2”，其它距离类似。

这篇就到这了，时间比较紧，而且这个难度不太大，讲的可能不太细。

源码中，给大家列出了一个有Tab交互的Demo，图片如下：

  

相关文章：

《Android ViewPager使用详解》

《Android ViewPager多页面滑动切换以及动画效果》

《Android多屏滑动:ViewPager基础使用及PagerTabStrip先天缺陷(附源码)》