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-sdk\extras\android\support目錄下，這裡我們選擇v4版本，進入v4目錄，拷貝其中的android-support-v4.jar檔案到工程的libs目錄(若沒有建立)下即可，編譯時間ADT會自動將其匯入項目中。

2、建立ViewPager的layout，內容如下

<?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等。

 

3、建立FragmentActivity頁面
FragmentActivity頁面含有ViewPager元素，可以用來顯示Fragment，定義如下：

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表示具體的頁面，見下面介紹。

 

4、建立Fragment頁面
Fragment頁面即為左右滑動需要顯示的頁面，建立類整合Fragment，並重寫onCreateView函數即可。onCreateView函數相當於Activity的onCreate函數。如下：

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;    }}

簡單效果如下：

免費源碼：http://download.csdn.net/detail/lan410812571/5859567