Android中ViewPager的简单使用（底部圆点）

原文地址：http://blog.csdn.net/tu_bingbing/article/details/8753769

   http://blog.csdn.net/tibib/article/details/8724281高效显示Bitmap系列的学习、翻译文章还没有写完，估计这个礼拜末能结束吧~

android.support.v4.ViewPager类在  API 4+ Support  支持包中开始为我们提供，它可以让我们有能力左右滑动以'页'的形式展示数据。我们可以通过继承  PagerAdapter 来生成页面形式的视图。介绍具体的使用方式之前先来看下效果

首先需要在layout文件中配置ViewPager View

[html] view plain copy

1. <android.support.v4.view.ViewPager  
2.    android:id="@+id/pager"  
3.    android:layout_width="wrap_content"  
4.    android:layout_height="wrap_content"  
5.    android:layout_marginBottom="50dp" />  

其实ViewPager本质上是一个View，继承体系如下，可以发现它的上面就是 ViewGroup  ，它是有能力add View的 

java.lang.Object
↳	android.view.View
	↳	android.view.ViewGroup
		↳	android.support.v4.view.ViewPager

   

上面提到过使用    PagerAdapter  来生成一个页面视图，也就是一页，    PagerAdapter   决定了ViewPager一共有多少页，负责每页的初始化，每页的销毁等工作

[java] view plain copy

1. class MyPagerAdapter extends PagerAdapter{  
2.   
3.       @Override  
4.       public int getCount() {  
5.              return mViewList .size();  
6.      }  
7.   
8.       @Override  
9.       public Object instantiateItem(View container, int position) {  
10.             Log. i("INFO", "instantiate item:"+position);  
11.              ((ViewPager) container).addView( mViewList.get(position),0);  
12.              return mViewList .get(position);  
13.      }  
14.        
15.       @Override  
16.       public void destroyItem(View container, int position, Object object) {  
17.             ((ViewPager) container).removeView( mViewList.get(position));   
18.      }  
19.        
20.       @Override  
21.       public boolean isViewFromObject(View arg0, Object arg1) {  
22.              return arg0 == arg1;  
23.      }  

可以看到ViewPager其实是一个组件容器，可以为它的每页添加一个要显示的View，用于展现数据

[java] view plain copy

1. mLayoutInflater = getLayoutInflater();  
2.   
3. //可以按照需求进行动态创建Layout,这里暂用静态的xml layout  
4. mViewList.add(mLayoutInflater.inflate(R.layout.per_pager1, null));  
5. mViewList.add(mLayoutInflater.inflate(R.layout.per_pager2, null));  
6. mViewList.add(mLayoutInflater.inflate(R.layout.per_pager3, null));  
7.   
8. ViewPager viewPager = (ViewPager) findViewById(R.id.pager);  
9. mPagerAdapter = new MyPagerAdapter();  
10. viewPager.setAdapter(mPagerAdapter);  

     上面的每一个经过inflate的Layout就代表的是每一页的布局，就像我们平常使用的布局文件一样...

     我们经常看到一般在ViewPager下会有一些圆点来指示当前我们浏览到第几页了，要实现这种效果，我们要根据页面的数量来动态生成圆点的数量，并添加到一个LinearLayout中，便于管理

[java] view plain copy

1. Bitmap bitmap = BitmapFactory. decodeResource(getResources(), R.drawable.icon_dot_normal );  
2.  for (int i = 0; i < mViewList.size(); i++) {  
3.        Button bt = new Button(this );  
4.        bt.setLayoutParams( new ViewGroup.LayoutParams(bitmap.getWidth(),bitmap.getHeight()));  
5.        bt.setBackgroundResource(R.drawable. icon_dot_normal );  
6.         mNumLayout .addView(bt);  
7. }  

     那我们怎么才能知道当前滑动到第几页了呢 ? 其实我们可以为ViewPager设置一个 OnPageChangeListener  页面改变监听器来监听页面的改变，从而得到当前滑动到了第几页

[java] view plain copy

1. viewPager. setOnPageChangeListener( new OnPageChangeListener() {  
2.          
3.         @Override  
4.         public void onPageSelected( int position) {  
5.                 
6.                if (mPreSelectedBt != null){  
7.                       mPreSelectedBt .setBackgroundResource(R.drawable. icon_dot_normal);  
8.               }  
9.                 
10.               Button currentBt = (Button)mNumLayout .getChildAt(position);  
11.               currentBt.setBackgroundResource(R.drawable. home_page_dot_select );  
12.                mPreSelectedBt = currentBt;  
13.                 
14.                //Log.i("INFO", "current item:"+position);  
15.        }  
16.          
17.         @Override  
18.         public void onPageScrolled( int arg0, float arg1, int arg2) {  
19.                // TODO Auto-generated method stub  
20.                 
21.        }  
22.          
23.         @Override  
24.         public void onPageScrollStateChanged( int arg0) {  
25.                // TODO Auto-generated method stub  
26.                 
27.        }  
28. });  

mPreSelectedBt  只是为了记录当前显示的圆点，为下一次圆点焦点切换做准备，下面看一个完整的实现

[java] view plain copy

1. public class MainActivity extends Activity {  
2.   
3.     ArrayList<View> mViewList = new ArrayList<View>();  
4.     LayoutInflater mLayoutInflater;  
5.     LinearLayout mNumLayout;  
6.       
7.     Button mPreSelectedBt;  
8.       
9.     MyPagerAdapter mPagerAdapter;  
10.       
11.     @Override  
12.     protected void onCreate(Bundle savedInstanceState) {  
13.         super.onCreate(savedInstanceState);  
14.         setContentView(R.layout.activity_main);  
15.           
16.         mLayoutInflater = getLayoutInflater();  
17.           
18.         //可以按照需求进行动态创建Layout,这里暂用静态的xml layout  
19.         mViewList.add(mLayoutInflater.inflate(R.layout.per_pager1, null));  
20.         mViewList.add(mLayoutInflater.inflate(R.layout.per_pager2, null));  
21.         mViewList.add(mLayoutInflater.inflate(R.layout.per_pager3, null));  
22.           
23.         ViewPager viewPager = (ViewPager) findViewById(R.id.pager);  
24.         mPagerAdapter = new MyPagerAdapter();  
25.         viewPager.setAdapter(mPagerAdapter);  
26.           
27.         mNumLayout = (LinearLayout) findViewById(R.id.ll_pager_num);  
28.           
29.         Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_dot_normal);  
30.         for (int i = 0; i < mViewList.size(); i++) {  
31.             Button bt = new Button(this);  
32.             bt.setLayoutParams(new ViewGroup.LayoutParams(bitmap.getWidth(),bitmap.getHeight()));  
33.             bt.setBackgroundResource(R.drawable.icon_dot_normal);  
34.             mNumLayout.addView(bt);  
35.         }  
36.           
37.         viewPager.setOnPageChangeListener(new OnPageChangeListener() {  
38.               
39.             @Override  
40.             public void onPageSelected(int position) {  
41.                   
42.                 if(mPreSelectedBt != null){  
43.                     mPreSelectedBt.setBackgroundResource(R.drawable.icon_dot_normal);  
44.                 }  
45.                   
46.                 Button currentBt = (Button)mNumLayout.getChildAt(position);  
47.                 currentBt.setBackgroundResource(R.drawable.home_page_dot_select);  
48.                 mPreSelectedBt = currentBt;  
49.                   
50.                 //Log.i("INFO", "current item:"+position);  
51.             }  
52.               
53.             @Override  
54.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
55.                 // TODO Auto-generated method stub  
56.                   
57.             }  
58.               
59.             @Override  
60.             public void onPageScrollStateChanged(int arg0) {  
61.                 // TODO Auto-generated method stub  
62.                   
63.             }  
64.         });  
65.           
66.   
67.     }  
68.   
69.     class MyPagerAdapter extends PagerAdapter{  
70.   
71.         @Override  
72.         public int getCount() {  
73.             return mViewList.size();  
74.         }  
75.   
76.         @Override  
77.         public Object instantiateItem(View container, int position) {  
78.             Log.i("INFO", "instantiate item:"+position);  
79.              ((ViewPager) container).addView(mViewList.get(position),0);  
80.              return mViewList.get(position);  
81.         }  
82.           
83.         @Override  
84.         public void destroyItem(View container, int position, Object object) {  
85.             Log.i("INFO", "destroy item:"+position);  
86.             ((ViewPager) container).removeView(mViewList.get(position));    
87.         }  
88.           
89.         @Override  
90.         public boolean isViewFromObject(View arg0, Object arg1) {  
91.             return arg0 == arg1;  
92.         }  
93.     }  
94. }  

如果你仔细观察打印日志会发现，PagerAdapter的实现方式有点特殊，永远都会存在两个经过初始化的'页'(page>2时)，显示当前页时会初始化下一页，会destroy上上页，一轮滑动完成的打印信息如下

[html] view plain copy

1. 04-02 22:39:59.880: I/INFO(27187): instantiate item:0  
2. 04-02 22:39:59.880: I/INFO(27187): instantiate item:1  
3. 04-02 22:40:03.890: I/INFO(27187): instantiate item:2  
4. 04-02 22:40:39.020: I/INFO(27187): destroy item:0  

     当要显示的页数发生改变时，我们可以通过调用PagerAdapter的 notifyDataSetChanged()  来通知数据的改变(必须在UI主线程中通知更新)，同时圆点也需要进行更新

[java] view plain copy

1. mViewList.add(mLayoutInflater.inflate(R.layout.per_pager1, null));  
2. Button bt = new Button(this);  
3. bt.setLayoutParams(new ViewGroup.LayoutParams(bitmap.getWidth(),bitmap.getHeight()));  
4. bt.setBackgroundResource(R.drawable.icon_dot_normal);  
5. mNumLayout.addView(bt);  
6. mPagerAdapter.notifyDataSetChanged();  

     以上基本上就是ViewPager基本的使用方式，还是比较简单的，但ViewPager最常使用的方式是结合   Fragment  来一起使用，这种方式可以很方便的来管理每个页面的生命周期，Android也为我们提供了好些种固定的实现好了的Adapters来给ViewPager使用，它们包括   FragmentPagerAdapter ,  FragmentStatePagerAdapter , FragmentPagerAdapter , 和  FragmentStatePagerAdapter  ，它们中的每一种都可以编写少量简单的代码就为我们建立一个完整的用户界面，下一节将进行介绍