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

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

这个效果相当好！

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

[html] view plaincopyprint?
 



<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical" >  
      
    <android.support.v4.view.ViewPager  
        android:id="@+id/viewPager"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center" >  
        <android.support.v4.view.PagerTabStrip      
            android:layout_width="wrap_content"      
            android:layout_height="wrap_content"      
            android:layout_gravity="top" />  
    </android.support.v4.view.ViewPager>  
</LinearLayout>  

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

 

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

 




[java] view
 plaincopyprint?
 






FragmentActivity页面  

  

public class ViewPagerDemo extends FragmentActivity {  

  

    /** 页面list **/  

    List<Fragment> fragmentList = new ArrayList<Fragment>();  

    /** 页面title list **/  

    List<String>   titleList    = new ArrayList<String>();  

  

    @Override  

    protected void onCreate(Bundle savedInstanceState) {  

        super.onCreate(savedInstanceState);  

        setContentView(R.layout.view_pager_demo);  

  

        ViewPager vp = (ViewPager)findViewById(R.id.viewPager);  

        fragmentList.add(new ViewPagerFragment1("页面1"));  

        fragmentList.add(new ViewPagerFragment1("页面2"));  

        fragmentList.add(new ViewPagerFragment1("页面3"));  

        titleList.add("title 1 ");  

        titleList.add("title 2 ");  

        titleList.add("title 3 ");  

        vp.setAdapter(new myPagerAdapter(getSupportFragmentManager(), fragmentList, titleList));  

    }  

  

    /** 

     * 定义适配器 

     *  

     * @author gxwu@lewatek.com 2012-11-15 

     */  

    class myPagerAdapter extends FragmentPagerAdapter {  

  

        private List<Fragment> fragmentList;  

        private List<String>   titleList;  

  

        public myPagerAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> titleList){  

            super(fm);  

            this.fragmentList = fragmentList;  

            this.titleList = titleList;  

        }  

  

        /** 

         * 得到每个页面 

         */  

        @Override  

        public Fragment getItem(int arg0) {  

            return (fragmentList == null || fragmentList.size() == 0) ? null : fragmentList.get(arg0);  

        }  

  

        /** 

         * 每个页面的title 

         */  

        @Override  

        public CharSequence getPageTitle(int position) {  

            return (titleList.size() > position) ? titleList.get(position) : "";  

        }  

  

        /** 

         * 页面的总个数 

         */  

        @Override  

        public int getCount() {  

            return fragmentList == null ? 0 : fragmentList.size();  

        }  

    }  

}  

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

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

 

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

[java] view
 plaincopyprint?
 






public class ViewPagerFragment1 extends Fragment {  

  

    private String   text;  

    private TextView tv = null;  

  

    public ViewPagerFragment1(String text){  

        super();  

        this.text = text;  

    }  

  

    /** 

     * 覆盖此函数，先通过inflater inflate函数得到view最后返回 

     */  

    @Override  

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  

        View v = inflater.inflate(R.layout.view_pager_fragment_demo1, container, false);  

        tv = (TextView)v.findViewById(R.id.viewPagerText);  

        tv.setText(text);  

        return v;  

    }  

}  

简单效果如下：