Android实习札记(8)---ViewPager+Fragment实例详解

Android实习札记(8)---ViewPager+Fragment实例讲解

    ——转载请注明出处:coder-pig

在札记(5)中我们就说过要弄一个模仿微信页面切换的东东,就是ViewPager+Fragment

实现的一个东西,札记(6)中也学习了一下ViewPager的一些基本用法,本节就来将两者

结合以实现我们想要的效果!

1.ViewPager关于Fragment的说法?

先看下Google官网怎么说:

大概意思就是:

ViewPager更多的时候是与Fragment协同使用,这样可以更加方便地去创建Page和管理

Page的生命周期,但是使用的不再是PageAdapter适配器,而是他的子类:FragmentPagerAdapter

和FragmentStatePagerAdapter,他们提供了更加简单代码来构建我们的用户界面!

看完这段话,可能会有下面的疑问:

1)FragmentPagerAdapter和FragmentStatePagerAdapter有什么区别,用哪个？

答:前者适用于页面较少的情况,后者对应页面较多的情况,现在只能这样告诉你;貌似这个和他们缓存

page的问题有关,以后再研究吧,通常用的都是FragmentPagerAdapter较多!

2)提供更加简单的代码...怎么简单法?

答:如官方文档所述,只需要实现getItem()与getCount()两个方法即可!相比起PagerAdapter要实现四个

方法简单多了

2.ViewPager对应Fragment的适配器——FragmentPagerAdapter

必须要实现的两个方法:getItem( )与getCount( )

意思:返回与特定postion(下标)有关联的Fragment!

意思:返回有效的View的数目,就是View集合中的View的个数

3)代码实现微信页面切换效果:

什么都别说,先看下效果图:

上面的实现其实还是蛮简单的,核心就是ViewPager + Fragment来实现的,那么现在

就来讲解下如何实现上面的效果:

step 1:首先肯定是先弄我们的主布局文件啦:

一条装逼的顶部标题栏+可切换Page的ViewPager+底部导航栏

底部导航栏和札记6中的实现方法是一致的,就不讲了

activity_main.xml:

[html]   view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/LinearLayout1"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical"  
7.     tools:context=".MainActivity" >  
8.   
9.     <RelativeLayout  
10.         android:layout_width="match_parent"  
11.         android:layout_height="50dp"  
12.         android:background="#22292C" >  
13.   
14.         <TextView  
15.             android:id="@+id/textView1"  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_centerVertical="true"  
19.             android:layout_marginLeft="18dp"  
20.             android:text="微信(4)"  
21.             android:textColor="#ffffff"  
22.             android:textSize="18sp" />  
23.   
24.         <Button  
25.             android:id="@+id/btnadd"  
26.             android:layout_width="30dp"  
27.             android:layout_height="30dp"  
28.             android:layout_marginRight="15dp"  
29.             android:layout_centerVertical="true"  
30.             android:layout_alignBaseline="@+id/textView1"  
31.             android:layout_alignBottom="@+id/textView1"  
32.             android:layout_alignParentRight="true"  
33.             android:background="@drawable/ap9" />  
34.           
35.         <Button  
36.             android:layout_width="30dp"  
37.             android:layout_height="30dp"  
38.             android:layout_marginRight="15dp"  
39.             android:layout_toLeftOf="@id/btnadd"  
40.             android:layout_centerVertical="true"  
41.             android:background="@drawable/alt"/>  
42.           
43.     </RelativeLayout>  
44.   
45.       
46.       
47.      <android.support.v4.view.ViewPager  
48.         android:id="@+id/vPager"  
49.         android:layout_width="wrap_content"  
50.         android:layout_height="0dp"  
51.         android:layout_gravity="center"  
52.         android:layout_weight="1.0"  
53.         android:background="#000000"  
54.         android:flipInterval="30"  
55.         android:persistentDrawingCache="animation" />  
56.       
57.      
58.     <ImageView   
59.         android:layout_width="match_parent"  
60.         android:layout_height="1dp"  
61.         android:src="@drawable/aoc"  
62.     />  
63.        
64.     <LinearLayout  
65.         android:orientation="horizontal"    
66.         android:layout_width="match_parent"    
67.         android:layout_height="55dp"    
68.         android:background="#FCFCFC" >    
69.     
70.         <RelativeLayout    
71.             android:id="@+id/weixin_layout"    
72.             android:layout_width="0dp"    
73.             android:layout_height="match_parent"    
74.             android:layout_weight="1" >    
75.     
76.             <LinearLayout    
77.                 android:layout_width="match_parent"    
78.                 android:layout_height="wrap_content"    
79.                 android:layout_centerVertical="true"    
80.                 android:orientation="vertical" >    
81.                   
82.     
83.                 <ImageView    
84.                     android:id="@+id/weixin_img"    
85.                     android:layout_width="30dp"    
86.                     android:layout_height="30dp"    
87.                     android:layout_gravity="center_horizontal"    
88.                     android:src="@drawable/ahk" />    
89.     
90.                 <TextView    
91.                     android:id="@+id/weixin_txt"    
92.                     android:layout_width="wrap_content"    
93.                     android:layout_height="wrap_content"    
94.                     android:layout_gravity="center_horizontal"    
95.                     android:text="微信"    
96.                     android:textColor="#999999" />    
97.             </LinearLayout>    
98.         </RelativeLayout>    
99.           
100.        <RelativeLayout    
101.             android:id="@+id/tongxunlu_layout"    
102.             android:layout_width="0dp"    
103.             android:layout_height="match_parent"    
104.             android:layout_weight="1" >    
105.     
106.             <LinearLayout    
107.                 android:layout_width="match_parent"    
108.                 android:layout_height="wrap_content"    
109.                 android:layout_centerVertical="true"    
110.                 android:orientation="vertical" >    
111.                   
112.     
113.                 <ImageView    
114.                     android:id="@+id/tongxunlu_img"    
115.                     android:layout_width="30dp"    
116.                     android:layout_height="30dp"    
117.                     android:layout_gravity="center_horizontal"    
118.                     android:src="@drawable/ahi" />    
119.     
120.                 <TextView    
121.                     android:id="@+id/tongxunlu_txt"    
122.                     android:layout_width="wrap_content"    
123.                     android:layout_height="wrap_content"    
124.                     android:layout_gravity="center_horizontal"    
125.                     android:text="通讯录"    
126.                     android:textColor="#999999" />    
127.             </LinearLayout>    
128.         </RelativeLayout>  
129.           
130.          
131.        <RelativeLayout    
132.             android:id="@+id/faxian_layout"    
133.             android:layout_width="0dp"    
134.             android:layout_height="match_parent"    
135.             android:layout_weight="1" >    
136.     
137.             <LinearLayout    
138.                 android:layout_width="match_parent"    
139.                 android:layout_height="wrap_content"    
140.                 android:layout_centerVertical="true"    
141.                 android:orientation="vertical" >    
142.                   
143.     
144.                 <ImageView    
145.                     android:id="@+id/faxian_img"    
146.                     android:layout_width="30dp"    
147.                     android:layout_height="30dp"    
148.                     android:layout_gravity="center_horizontal"    
149.                     android:src="@drawable/ahm" />    
150.     
151.                 <TextView    
152.                     android:id="@+id/faxian_txt"    
153.                     android:layout_width="wrap_content"    
154.                     android:layout_height="wrap_content"    
155.                     android:layout_gravity="center_horizontal"    
156.                     android:text="发现"    
157.                     android:textColor="#999999" />    
158.             </LinearLayout>    
159.         </RelativeLayout>  
160.           
161.          
162.        <RelativeLayout    
163.             android:id="@+id/me_layout"    
164.             android:layout_width="0dp"    
165.             android:layout_height="match_parent"    
166.             android:layout_weight="1" >    
167.     
168.             <LinearLayout    
169.                 android:layout_width="match_parent"    
170.                 android:layout_height="wrap_content"    
171.                 android:layout_centerVertical="true"    
172.                 android:orientation="vertical" >    
173.                   
174.     
175.                 <ImageView    
176.                     android:id="@+id/me_img"    
177.                     android:layout_width="30dp"    
178.                     android:layout_height="30dp"    
179.                     android:layout_gravity="center_horizontal"    
180.                     android:src="@drawable/aho" />    
181.     
182.                 <TextView    
183.                     android:id="@+id/me_txt"    
184.                     android:layout_width="wrap_content"    
185.                     android:layout_height="wrap_content"    
186.                     android:layout_gravity="center_horizontal"    
187.                     android:text="我"    
188.                     android:textColor="#999999" />    
189.             </LinearLayout>    
190.         </RelativeLayout>  
191.                   
192.           
193.   </LinearLayout>  
194.        
195.        
196. </LinearLayout>  

step 2:主布局写完了,接着就写每个Fragment的布局和对应的Fragment类咯,这里

每个Fragment就是一个简单的TextView + 不同的背景颜色,一式四份就可以了!

fg1.xml:

[html]   view plain copy print ?

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="match_parent"  
5.     android:gravity="center"  
6.     android:background="#FAEBD7"  
7.     android:orientation="vertical" >  
8.       
9.     <TextView   
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:text="微信Fragment"  
13.     />  
14.   
15. </LinearLayout>  

Fg1.java:

[java]   view plain copy print ?

1. package com.jay.example.viewpagerfragment;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class Fg1 extends Fragment {  
10.     @Override  
11.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
12.             Bundle savedInstanceState) {  
13.         View view = inflater.inflate(R.layout.fg1, container,false);  
14.         return view;  
15.     }  
16. }  

step 3:接着就要自定义我们的FragmentPagerAdapter,这个也很简单,只要重写那两个基本

方法就可以了,分别是getItem( )和getCount( )

MyFragmentPagerAdapter.java

[java]   view plain copy print ?

1. package com.jay.example.viewpagerfragment;  
2.   
3. import java.util.ArrayList;  
4.   
5. import android.support.v4.app.Fragment;  
6. import android.support.v4.app.FragmentManager;  
7. import android.support.v4.app.FragmentPagerAdapter;  
8.   
9. public class MyFragmentPageAadpter extends FragmentPagerAdapter {  
10.           
11.     private ArrayList<Fragment> fragmentsList;  
12.     public MyFragmentPageAadpter(FragmentManager fm) {super(fm);}  
13.     public MyFragmentPageAadpter(FragmentManager fm, ArrayList<Fragment> fragments) {  
14.         super(fm);  
15.         this.fragmentsList = fragments;  
16.     }  
17.       
18.       
19.     @Override  
20.     public Fragment getItem(int index) {  
21.         return fragmentsList.get(index);  
22.     }  
23.   
24.     @Override  
25.     public int getCount() {  
26.         return fragmentsList.size();  
27.     }  
28.   
29. }  

step 4:接着就到我们最后一步MainActivity的编写了,同样也是不复杂的,要做什么呢?

①实例化四个Fragment对象后,把他们放到View集合中,通过Adapter适配器与ViewPager

   进行绑定咯！然后就可以滑动ViewPager进行页面的切换了

②当我们点击底部导航条的按钮时,我们需要切换ViewPager中显示的Fragment,这怎么搞?

答:对点击的按钮的id进行判断,判断点击的是第几个,调用viewpager.setCurrentItem(index)即可

③当我们滑动页面时,底部导航条的图标也要跟着变换,这又怎么搞？

答这个也很简单,重写ViewPager的OnPageChangeListener的onPageScrollStateChanged()方法

当参数等于2时,说明此时滑动完毕,viewpager.getCurrentItem( )获得当前页面序号,从而设置第几个

按钮处于选中状态!

MainActivity.java:

[java]   view plain copy print ?

1. package com.jay.example.viewpagerfragment;  
2.   
3. import java.util.ArrayList;  
4. import android.os.Bundle;  
5. import android.support.v4.app.Fragment;  
6. import android.support.v4.app.FragmentActivity;  
7. import android.support.v4.app.FragmentManager;  
8.   
9. import android.support.v4.view.ViewPager;  
10. import android.support.v4.view.ViewPager.OnPageChangeListener;  
11.   
12. import android.view.View;  
13. import android.view.View.OnClickListener;  
14. import android.widget.ImageView;  
15. import android.widget.RelativeLayout;  
16. import android.widget.TextView;  
17.   
18.   
19.   
20. public class MainActivity extends FragmentActivity {  
21.   
22.     //定义四个Fragment  
23.     private Fg1 fg1;  
24.     private Fg2 fg2;  
25.     private Fg3 fg3;  
26.     private Fg4 fg4;  
27.     //定义一个ViewPager容器  
28.     private ViewPager mPager;  
29.     private ArrayList<Fragment> fragmentsList;  
30.     private MyFragmentPageAadpter mAdapter;  
31.     //下面每个Layout对象  
32.     private RelativeLayout weixin_layout;  
33.     private RelativeLayout tongxunlu_layout;  
34.     private RelativeLayout faxian_layout;  
35.     private RelativeLayout me_layout;  
36.     //依次获得ImageView与TextView  
37.     private ImageView weixin_img;  
38.     private ImageView tongxunlu_img;  
39.     private ImageView faxian_img;  
40.     private ImageView me_img;  
41.     private TextView weixin_txt;  
42.     private TextView tongxunlu_txt;  
43.     private TextView faxian_txt;  
44.     private TextView me_txt;  
45.     //定义颜色值  
46.     private int Gray = 0xFF999999;  
47.     private int Green =0xFF45C01A;  
48.     //定义FragmentManager对象  
49.     public FragmentManager fManager;  
50.     //定义一个Onclick全局对象  
51.     public MyOnClick myclick;  
52.     public MyPageChangeListener myPageChange;  
53.       
54.     @Override  
55.     protected void onCreate(Bundle savedInstanceState) {  
56.         super.onCreate(savedInstanceState);  
57.         setContentView(R.layout.activity_main);  
58.         getActionBar().hide();  
59.         fManager = getSupportFragmentManager();  
60.         initViewPager();  
61.         initViews();  
62.         initState();  
63.     }  
64.       
65.       
66.       
67.       
68.     private void initViews() {  
69.         myclick = new MyOnClick();  
70.         myPageChange = new MyPageChangeListener();  
71.         mPager = (ViewPager) findViewById(R.id.vPager);  
72.         weixin_layout = (RelativeLayout) findViewById(R.id.weixin_layout);  
73.         tongxunlu_layout = (RelativeLayout) findViewById(R.id.tongxunlu_layout);  
74.         faxian_layout = (RelativeLayout) findViewById(R.id.faxian_layout);  
75.         me_layout = (RelativeLayout) findViewById(R.id.me_layout);  
76.         weixin_img = (ImageView) findViewById(R.id.weixin_img);  
77.         tongxunlu_img = (ImageView) findViewById(R.id.tongxunlu_img);  
78.         faxian_img = (ImageView) findViewById(R.id.faxian_img);  
79.         me_img = (ImageView) findViewById(R.id.me_img);  
80.         weixin_txt = (TextView) findViewById(R.id.weixin_txt);  
81.         tongxunlu_txt = (TextView) findViewById(R.id.tongxunlu_txt);  
82.         faxian_txt = (TextView) findViewById(R.id.faxian_txt);  
83.         me_txt = (TextView) findViewById(R.id.me_txt);  
84.         mPager.setAdapter(mAdapter);  
85.         mPager.setOnPageChangeListener(myPageChange);  
86.         weixin_layout.setOnClickListener(myclick);  
87.         tongxunlu_layout.setOnClickListener(myclick);  
88.         faxian_layout.setOnClickListener(myclick);  
89.         me_layout.setOnClickListener(myclick);  
90.     }  
91.       
92.     private void initViewPager()  
93.     {  
94.         fragmentsList = new ArrayList<Fragment>();      
95.         fg1 = new Fg1();  
96.         fg2 = new Fg2();  
97.         fg3 = new Fg3();  
98.         fg4 = new Fg4();  
99.         fragmentsList.add(fg1);  
100.         fragmentsList.add(fg2);  
101.         fragmentsList.add(fg3);  
102.         fragmentsList.add(fg4);  
103.         mAdapter = new MyFragmentPageAadpter(fManager,fragmentsList);  
104.     }  
105.       
106.     //定义一个设置初始状态的方法  
107.     private void initState()  
108.     {  
109.         weixin_img.setImageResource(R.drawable.ahj);  
110.         weixin_txt.setTextColor(Green);  
111.         mPager.setCurrentItem(0);  
112.     }  
113.       
114.       
115.       
116.       
117.     public class MyOnClick implements OnClickListener  
118.     {  
119.         @Override  
120.         public void onClick(View view) {  
121.             clearChioce();  
122.             iconChange(view.getId());  
123.         }  
124.     }  
125.       
126.     public class MyPageChangeListener implements OnPageChangeListener  
127.     {  
128.   
129.         @Override  
130.         public void onPageScrollStateChanged(int arg0)  
131.         {  
132.             if(arg0 == 2)  
133.             {  
134.                 int i = mPager.getCurrentItem();  
135.                 clearChioce();  
136.                 iconChange(i);  
137.             }  
138.         }  
139.   
140.         @Override  
141.         public void onPageScrolled(int arg0, float arg1, int arg2) {}  
142.   
143.         @Override  
144.         public void onPageSelected(int index){}  
145.           
146.     }  
147.       
148.       
149.       
150.     //建立一个清空选中状态的方法  
151.     public void clearChioce()  
152.     {  
153.         weixin_img.setImageResource(R.drawable.ahk);  
154.         weixin_txt.setTextColor(Gray);  
155.         tongxunlu_img.setImageResource(R.drawable.ahi);  
156.         tongxunlu_txt.setTextColor(Gray);  
157.         faxian_img.setImageResource(R.drawable.ahm);  
158.         faxian_txt.setTextColor(Gray);  
159.         me_img.setImageResource(R.drawable.aho);  
160.         me_txt.setTextColor(Gray);    
161.     }  
162.       
163.     //定义一个底部导航栏图标变化的方法  
164.     public void iconChange(int num)  
165.     {  
166.         switch (num) {  
167.         case R.id.weixin_layout:case 0:  
168.             weixin_img.setImageResource(R.drawable.ahj);  
169.             weixin_txt.setTextColor(Green);  
170.             mPager.setCurrentItem(0);  
171.             break;  
172.         case R.id.tongxunlu_layout:case 1:  
173.             tongxunlu_img.setImageResource(R.drawable.ahh);  
174.             tongxunlu_txt.setTextColor(Green);  
175.             mPager.setCurrentItem(1);  
176.             break;  
177.         case R.id.faxian_layout:case 2:  
178.             faxian_img.setImageResource(R.drawable.ahl);  
179.             faxian_txt.setTextColor(Green);  
180.             mPager.setCurrentItem(2);  
181.             break;  
182.         case R.id.me_layout:case 3:  
183.             me_img.setImageResource(R.drawable.ahn);  
184.             me_txt.setTextColor(Green);   
185.             mPager.setCurrentItem(3);  
186.             break;  
187.         }         
188.     }     
189. }  

最后说几句:

代码还是比较简单的哈,没什么高大上的技术,只是希望可以帮到和我一样的初学者....

另外viewPager好像有缓冲page的功能

就是保存Page的状态,不过是相邻的两个,比如,你现在在2号页,此时1号和3号是缓存

在内存当中的,但是上面如果我们是1然后切换到4页面的话,会发现,2,3两个界面也加载了!

流程如下:

1 -->  2(此时缓存1,2和3)   -->3(此时缓存2,3和4)  -->4(此时缓存3和4);

总结来说就是:ViewPager会缓存当前页面相邻的两个Page

不过好像有个是设置缓存页面数量的属性吧,一时半伙想不起来,如果有知道的读者欢迎指出,万分感激!

本节代码下载:

http://pan.baidu.com/s/1dDcTNFj