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

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

这个效果相当好！

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

 

[html] view plaincopyprint?

 

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

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

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

 

[java] view
plaincopyprint?

 

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

其中的myPagerAdapter集成自ragmentPagerAdapter，为ViewPager提供数据源。

onCreate函数得到ViewPager实例并设置数据源，getSupportFragmentManager表示得到Fragment管理器。ViewPagerFragment1表示具体的页面，见下面介绍。

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

[java] view
plaincopyprint?

 

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

 

简单效果如下：