Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

本文主要介绍如何利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果。即google play首页、新浪微博消息(at、评论、私信、广播）页面的效果。ViewPager+Fragment组合为google推荐方式，比TabActivity+Activity的效率高的多

1、添加android support包
因为上面的几个类都是在android support包中才提供，我们先添加包。
在Eclipse->Window->Android SDK Manager，选择列表中Extras->Android Support Library进行安装。下载完后在android-sdkextrasandroidsupport目录下，这里我们选择v4版本，进入v4目 录，拷贝其中的android-support-v4.jar文件到工程的libs目录(若没有新建)下即可，编译时ADT会自动将其导入项目中。

2、新建ViewPager的layout，内容如下

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:orientation="vertical" >
   
6.    
   
7.     <android.support.v4.view.ViewPager
   
8.         android:id="@+id/viewPager"
   
9.         android:layout_width="wrap_content"
   
10.         android:layout_height="wrap_content"
    
11.         android:layout_gravity="center" >
    
12.         <android.support.v4.view.PagerTabStrip   
    
13.             android:layout_width="wrap_content"   
    
14.             android:layout_height="wrap_content"   
    
15.             android:layout_gravity="top" />
    
16.     </android.support.v4.view.ViewPager>
    
17. </LinearLayout>

ViewPager用来管理layout并可以左右滑动显示各个页面数据，PagerTabStrip用来显示页面title，android:layout_gravity="top"表示title在顶部，可设置bottom等。

3、新建FragmentActivity页面
FragmentActivity页面含有ViewPager元素，可以用来显示Fragment，定义如下：

1. FragmentActivity页面
   
2. 
   
3. public class ViewPagerDemo extends FragmentActivity {
   
4. 
   
5.     /** 页面list **/
   
6.     List<Fragment> fragmentList = new ArrayList<Fragment>();
   
7.     /** 页面title list **/
   
8.     List<String>   titleList    = new ArrayList<String>();
   
9. 
   
10.     @Override
    
11.     protected void onCreate(Bundle savedInstanceState) {
    
12.         super.onCreate(savedInstanceState);
    
13.         setContentView(R.layout.view_pager_demo);
    
14. 
    
15.         ViewPager vp = (ViewPager)findViewById(R.id.viewPager);
    
16.         fragmentList.add(new ViewPagerFragment1("页面1"));
    
17.         fragmentList.add(new ViewPagerFragment1("页面2"));
    
18.         fragmentList.add(new ViewPagerFragment1("页面3"));
    
19.         titleList.add("title 1 ");
    
20.         titleList.add("title 2 ");
    
21.         titleList.add("title 3 ");
    
22.         vp.setAdapter(new myPagerAdapter(getSupportFragmentManager(), fragmentList, titleList));
    
23.     }
    
24. 
    
25.     /**
    
26.      * 定义适配器
    
27.      *
    
28.      * @author gxwu@lewatek.com 2012-11-15
    
29.      */
    
30.     class myPagerAdapter extends FragmentPagerAdapter {
    
31. 
    
32.         private List<Fragment> fragmentList;
    
33.         private List<String>   titleList;
    
34. 
    
35.         public myPagerAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> titleList){
    
36.             super(fm);
    
37.             this.fragmentList = fragmentList;
    
38.             this.titleList = titleList;
    
39.         }
    
40. 
    
41.         /**
    
42.          * 得到每个页面
    
43.          */
    
44.         @Override
    
45.         public Fragment getItem(int arg0) {
    
46.             return (fragmentList == null || fragmentList.size() == 0) ? null : fragmentList.get(arg0);
    
47.         }
    
48. 
    
49.         /**
    
50.          * 每个页面的title
    
51.          */
    
52.         @Override
    
53.         public CharSequence getPageTitle(int position) {
    
54.             return (titleList.size() > position) ? titleList.get(position) : "";
    
55.         }
    
56. 
    
57.         /**
    
58.          * 页面的总个数
    
59.          */
    
60.         @Override
    
61.         public int getCount() {
    
62.             return fragmentList == null ? 0 : fragmentList.size();
    
63.         }
    
64.     }
    
65. }

其 中的myPagerAdapter集成自ragmentPagerAdapter，为ViewPager提供数据源。onCreate函数得到 ViewPager实例并设置数据源，getSupportFragmentManager表示得到Fragment管理器。 ViewPagerFragment1表示具体的页面，见下面介绍。

4、新建Fragment页面
Fragment页面即为左右滑动需要显示的页面，新建类集成Fragment，并重写onCreateView函数即可。onCreateView函数相当于Activity的onCreate函数。如下：

1. public class ViewPagerFragment1 extends Fragment {
   
2. 
   
3.     private String   text;
   
4.     private TextView tv = null;
   
5. //  Fragment 不能写构造函数
   
6. //    public ViewPagerFragment1(String text){
   
7. //        super();
   
8. //        this.text = text;
   
9.     }
   
10. 
    
11.     /**
    
12.      * 覆盖此函数，先通过inflater inflate函数得到view最后返回
    
13.      */
    
14.     @Override
    
15.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
16.         View v = inflater.inflate(R.layout.view_pager_fragment_demo1, container, false);
    
17.         tv = (TextView)v.findViewById(R.id.viewPagerText);
    
18.         tv.setText("第一个页面");
    
19.         return v;
    
20.     }
    
21. }

简单效果如下：