ViewPager适配器学习记录（ pageAdapter和FragmentPagerAdapter/FragmentStatePagerAdapter)）

1、概述

ViewPager，顾名思义实现控件的滚动功能，是Support-v4的包中类，使用前要先导包。使用的时候跟listView有点相似，需要设置对应的适配器，通常有俩大类

【pageAdapter】

【FragmentPagerAdapter/FragmentStatePagerAdapter】

fragment有着自己的生命周期，谷歌官方也推荐使用ViewPage+fragment的形式，一般简单的也可以使用ViewPage+pageAdapter形式

这里用这俩种适配器来搭个框架学习使用一下，先上使用FragmentPagerAdapter的效果图

1、FragmentPagerAdapter/FragmentStatePagerAdapter

首先他们都是继承自PagerAdapter，FragmentPagerAdapter适合使用在固定的数量较少的场景，比如本例的4个tab的fragment滑动界面，而FragmentStatePagerAdapter适合适合用在多个tab场景下，并且会保存当前界面以及下一个界面和上一界面，最多可以保留3个（具体源码分析参见http://blog.csdn.net/jackrex/article/details/9885469?utm_source=tuicool&utm_medium=referral）他们的使用方式一致，这里以FragmentPagerAdapter来看

在使用FragmentPagerAdapter时我们首先要实现它的俩个方法，如下

[java] view plain copy

1. //初始化Adapter这里使用FragmentPagerAdapter  
2.         mAdpter = new FragmentPagerAdapter(getSupportFragmentManager()) {  
3.             @Override  
4.             public Fragment getItem(int position) {  
5.   
6.                 return mFragments.get(position);  
7.             }  
8.   
9.             @Override  
10.             public int getCount() {  
11.                 return mFragments.size();  
12.             }  
13.   
14.   
15.         };  

方法一目了然，getCount()返回的是ViewPager页面的数量，getItem()返回的是要显示的fragent对象。

从这里看到我们管理的对象是不同的fragment对应不同的布局

2、pageAdapter

使用pageradapter，至少必须重写下面的四个方法
【 instantiateItem(ViewGroup, int)】

这个函数的实现的功能是创建指定位置的页面视图。适配器有责任增加即将创建的View视图到这里给定的Container中，这是为了确保在finishUpdate(viewGroup)返回时这个已经完成
返回值：返回一个代表新增视图页面的Object

【public void destroyItem (ViewGroup container, int position, Object object)】

该方法实现的功能是移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保在finishUpdate(viewGroup)返回时视图能够被移除。
【 public int getCount()】

返回当前有效视图的个数。

【isViewFromObject(View, Object)】

功能：该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)
返回值：如果对应的是同一个View，返回True，否则返回False。

3、viewpager+fragment demo代码实现

主要目录结构如下

主布局文件activity_main.xml如下

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:background="@color/white"  
7.     android:orientation="vertical">  
8.   
9.     <include layout="@layout/topbar_layout"/>  
10.   
11.     <android.support.v4.view.ViewPager  
12.         android:id="@+id/id_viewpager"  
13.         android:layout_width="match_parent"  
14.         android:layout_height="0dp"  
15.         android:layout_weight="1">  
16.     </android.support.v4.view.ViewPager>  
17.   
18.     <include layout="@layout/bottom"/>  
19.   
20. </LinearLayout>  

可以看出这里通过include包含一头一尾，中间是V4包中的ViewPager

bottom.xml代码如下

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:layout_width="match_parent"  
4.               android:layout_height="wrap_content"  
5.               android:orientation="horizontal"  
6.               android:layout_marginBottom="5dp"  
7.               android:background="@color/mainpage_mycrircle_leftview_item_auth_name"  
8.     >  
9.   
10.     <LinearLayout  
11.         android:id="@+id/id_tab_mycircle"  
12.         android:layout_width="0dp"  
13.         android:layout_height="match_parent"  
14.         android:layout_weight="1"  
15.         android:gravity="center"  
16.         android:orientation="vertical">  
17.         <!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ，这里事件要给它的上一级linearlayout-->  
18.         <ImageButton  
19.             android:id="@+id/id_tab_mycirlceImg"  
20.             android:layout_width="wrap_content"  
21.             android:layout_height="wrap_content"  
22.             android:background="#00000000"  
23.             android:clickable="false"  
24.             android:src="@drawable/mainpage_tab_mycircle_selected"/>  
25.   
26.         <TextView  
27.             android:layout_width="wrap_content"  
28.             android:layout_height="wrap_content"  
29.             android:text="我的圈子"  
30.             />  
31.     </LinearLayout>  
32.   
33.     <LinearLayout  
34.         android:id="@+id/id_tab_discovery"  
35.         android:layout_width="0dp"  
36.         android:layout_height="match_parent"  
37.         android:layout_weight="1"  
38.         android:gravity="center"  
39.         android:orientation="vertical">  
40.   
41.         <ImageButton  
42.             android:id="@+id/id_tab_discovery_img"  
43.             android:layout_width="wrap_content"  
44.             android:layout_height="wrap_content"  
45.             android:background="#00000000"  
46.             android:clickable="false"  
47.             android:src="@drawable/mainpage_tab_discovery_normal"/>  
48.   
49.         <TextView  
50.             android:layout_width="wrap_content"  
51.             android:layout_height="wrap_content"  
52.             android:text="发现"  
53.             />  
54.     </LinearLayout>  
55.   
56.     <LinearLayout  
57.         android:id="@+id/id_tab_message"  
58.         android:layout_width="0dp"  
59.         android:layout_height="match_parent"  
60.         android:layout_weight="1"  
61.         android:gravity="center"  
62.         android:orientation="vertical">  
63.   
64.         <ImageButton  
65.             android:id="@+id/id_tab_message_img"  
66.             android:layout_width="wrap_content"  
67.             android:layout_height="wrap_content"  
68.             android:background="#00000000"  
69.             android:clickable="false"  
70.   
71.             android:src="@drawable/mainpage_tab_message_normal"/>  
72.   
73.         <TextView  
74.             android:layout_width="wrap_content"  
75.             android:layout_height="wrap_content"  
76.             android:text="消息"  
77.             />  
78.     </LinearLayout>  
79.   
80.   
81.     <LinearLayout  
82.         android:id="@+id/id_tab_setting"  
83.         android:layout_width="0dp"  
84.         android:layout_height="match_parent"  
85.         android:layout_weight="1"  
86.         android:gravity="center"  
87.         android:orientation="vertical">  
88.   
89.         <ImageButton  
90.             android:id="@+id/id_tab_setting_img"  
91.             android:layout_width="wrap_content"  
92.             android:layout_height="wrap_content"  
93.             android:background="#00000000"  
94.             android:clickable="false"  
95.             android:src="@drawable/mainpage_tab_setting_normal"/>  
96.   
97.         <TextView  
98.             android:layout_width="wrap_content"  
99.             android:layout_height="wrap_content"  
100.             android:text="个人中心"  
101.             />  
102.     </LinearLayout>  
103. </LinearLayout>  

通过权重这里也可以使用RadioGroup来做这个底部

然后是MainActivity处理逻辑函数

[java] view plain copy

1. package com.elvis.gachatest;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.support.v4.app.FragmentPagerAdapter;  
6. import android.support.v4.view.ViewPager;  
7. import android.support.v7.app.AppCompatActivity;  
8. import android.view.View;  
9. import android.widget.ImageButton;  
10. import android.widget.LinearLayout;  
11.   
12. import java.util.ArrayList;  
13. import java.util.List;  
14.   
15. public class MainActivity extends AppCompatActivity implements View.OnClickListener {  
16.     //定义控件  
17.     private ViewPager mViewPager;  
18.     private FragmentPagerAdapter mAdpter;  
19.     private List<Fragment> mFragments = new ArrayList<>();  
20.   
21.   
22.     //四个Tab每个Tab都有一个按钮  
23.     private LinearLayout mTabMyCircle;  
24.     private LinearLayout mTabMyDiscovery;  
25.     private LinearLayout mTabMyMsg;  
26.     private LinearLayout mTabMyCenter;  
27.     //四个按钮  
28.     private ImageButton myCircleImg;  
29.     private ImageButton myDiscoveryImg;  
30.     private ImageButton myMsgImg;  
31.     private ImageButton myCenterImg;  
32.   
33.     @Override  
34.     public void onCreate(Bundle savedInstanceState) {  
35.         super.onCreate(savedInstanceState);  
36.         setContentView(R.layout.activity_main);  
37.   
38.         initViews();//初始化控件  
39.         initEvent();//监听逻辑事件  
40.   
41.         initViewPages();//初始化viewpager  
42.     }  
43.   
44.   
45.     private void initViews() {  
46.   
47.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
48.         //初始化四个布局  
49.         mTabMyCircle = (LinearLayout) findViewById(R.id.id_tab_mycircle);  
50.         mTabMyDiscovery = (LinearLayout) findViewById(R.id.id_tab_discovery);  
51.         mTabMyMsg = (LinearLayout) findViewById(R.id.id_tab_message);  
52.         mTabMyCenter = (LinearLayout) findViewById(R.id.id_tab_setting);  
53.         //初始化四个按钮  
54.         myCircleImg = (ImageButton) findViewById(R.id.id_tab_mycirlceImg);  
55.         myDiscoveryImg = (ImageButton) findViewById(R.id.id_tab_discovery_img);  
56.         myMsgImg = (ImageButton) findViewById(R.id.id_tab_message_img);  
57.         myCenterImg = (ImageButton) findViewById(R.id.id_tab_setting_img);  
58.     }  
59.   
60.     private void initViewPages() {  
61.         //初始化四个布局  
62.         Fragment01 tab01 = new Fragment01();  
63.         Fragment02 tab02 = new Fragment02();  
64.         Fragment03 tab03 = new Fragment03();  
65.         Fragment04 tab04 = new Fragment04();  
66.         mFragments.add(tab01);  
67.         mFragments.add(tab02);  
68.         mFragments.add(tab03);  
69.         mFragments.add(tab04);  
70.         //初始化Adapter这里使用FragmentPagerAdapter  
71.         mAdpter = new FragmentPagerAdapter(getSupportFragmentManager()) {  
72.             @Override  
73.             public Fragment getItem(int position) {  
74.   
75.                 return mFragments.get(position);  
76.             }  
77.   
78.             @Override  
79.             public int getCount() {  
80.                 return mFragments.size();  
81.             }  
82.   
83.   
84.         };  
85.         mViewPager.setAdapter(mAdpter);  
86.   
87.     }  
88.   
89.   
90.     private void initEvent() {  
91.         //设置监听器  
92.         myCircleImg.setOnClickListener(this);  
93.         myDiscoveryImg.setOnClickListener(this);  
94.         myMsgImg.setOnClickListener(this);  
95.         myCenterImg.setOnClickListener(this);  
96.         mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
97.             @Override  
98.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
99.   
100.             }  
101.   
102.             @Override  
103.             public void onPageSelected(int position) {  
104.                 //当viewPager滑动的时候  
105.                 int currentPage = mViewPager.getCurrentItem();  
106.                 switch (currentPage) {  
107.                     case 0:  
108.                         reSetImg();  
109.                         myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_selected);  
110.                         break;  
111.                     case 1:  
112.                         reSetImg();  
113.                         myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_selected);  
114.                         break;  
115.                     case 2:  
116.                         reSetImg();  
117.                         myMsgImg.setImageResource(R.drawable.mainpage_tab_message_selected);  
118.                         break;  
119.                     case 3:  
120.                         reSetImg();  
121.                         myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_selected);  
122.                         break;  
123.                     default:  
124.                         break;  
125.                 }  
126.   
127.             }  
128.   
129.             @Override  
130.             public void onPageScrollStateChanged(int state) {  
131.   
132.             }  
133.         });  
134.   
135.   
136.     }  
137.   
138.     private void reSetImg() {  
139.         myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_normal);  
140.         myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_normal);  
141.         myMsgImg.setImageResource(R.drawable.mainpage_tab_message_normal);  
142.         myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_normal);  
143.   
144.     }  
145.   
146.   
147.     @Override  
148.     public void onClick(View v) {  
149.         switch (v.getId()) {  
150.             case R.id.id_tab_mycirlceImg:  
151.                 mViewPager.setCurrentItem(0);  
152.                 reSetImg();  
153.                 myCircleImg.setImageResource(R.drawable.mainpage_tab_mycircle_selected);  
154.                 break;  
155.             case R.id.id_tab_discovery_img:  
156.                 mViewPager.setCurrentItem(1);  
157.                 reSetImg();  
158.                 myDiscoveryImg.setImageResource(R.drawable.mainpage_tab_discovery_selected);  
159.                 break;  
160.             case R.id.id_tab_message_img:  
161.                 mViewPager.setCurrentItem(2);  
162.                 reSetImg();  
163.                 myMsgImg.setImageResource(R.drawable.mainpage_tab_message_selected);  
164.                 break;  
165.             case R.id.id_tab_setting_img:  
166.                 mViewPager.setCurrentItem(3);  
167.                 reSetImg();  
168.                 myCenterImg.setImageResource(R.drawable.mainpage_tab_setting_selected);  
169.                 break;  
170.             default:  
171.                 break;  
172.   
173.   
174.         }  
175.   
176.   
177.     }  
178.   
179.   
180. }  

这里要注意使用Fragment时统统使用V4包下的fragment，否则会出错

要是使用pageAdapter方式核心代码如下

[java] view plain copy

1. private void initViewPages() {  
2.        //初始化四个布局  
3.        LayoutInflater mLayoutInflater = LayoutInflater.from(this);  
4.        View tab1 = mLayoutInflater.inflate(R.layout.tab01, null);  
5.        View tab2 = mLayoutInflater.inflate(R.layout.tab02, null);  
6.        View tab3 = mLayoutInflater.inflate(R.layout.tab03, null);  
7.        View tab4 = mLayoutInflater.inflate(R.layout.tab04, null);  
8.        //加入到list中  
9.        mViews.add(tab1);  
10.        mViews.add(tab2);  
11.        mViews.add(tab3);  
12.        mViews.add(tab4);  
13.   
14.   
15.        //初始化ViewPager适配器  
16.        mPagerAdapter = new PagerAdapter() {  
17.            @Override  
18.            public void destroyItem(ViewGroup container, int position, Object object) {  
19.                //从container中删除指定position的View  
20.                container.removeView(mViews.get(position));  
21.            }  
22.   
23.            @Override  
24.            public Object instantiateItem(ViewGroup container, int position) {  
25.                //将当前视图添加到View中  
26.                View view = mViews.get(position);  
27.                container.addView(view);  
28.                //返回当前视图  
29.                return view;  
30.            }  
31.   
32.            @Override  
33.            public int getCount() {  
34.                //返回要滑动的View个数  
35.                return mViews.size();  
36.            }  
37.   
38.            @Override  
39.            public boolean isViewFromObject(View view, Object object) {  
40.                return view == object;  
41.            }  
42.   
43.   
44.        };  
45.        //设置adapter  
46.        mViewPager.setAdapter(mPagerAdapter);  
47.   
48.    }  

demo地址 http://download.csdn.net/detail/xsf50717/9259105

转自：http://blog.csdn.net/xsf50717/article/details/49764521