Android 利用ViewPager、Fragment、PagerTabStrip實作多頁面滑動效

1、添加android support包

因為幾個類都是在android support包中才提供，我們先添加android-support-v4.jar檔案到工程的libs目錄下即可

2、建立ViewPager.xml，内容如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!--
        注意事項:   
        1.這裡ViewPager和 PagerTabStrip都要把包名寫全了，不然會ClassNotFount  
        2.API中說：在布局xml把PagerTabStrip當做ViewPager的一個子标簽來用，不能拿出來，不然還是會報錯  
        3.在PagerTabStrip标簽中可以用屬性android:layout_gravity=TOP|BOTTOM來指定title的位置  
        4.如果要顯示出PagerTabStrip某一頁的title,需要在ViewPager的adapter中實作getPageTitle(int)
    -->

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_demo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="#6B92A5" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tabstrip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#33b5e5"
            android:textColor="#ffffff" />

        <!-- <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:layout_gravity="bottom"
            android:visibility="gone" /> -->
    </android.support.v4.view.ViewPager>

</RelativeLayout>
           

這裡面有兩個控件PagerTitleStrip和PagerTabStrip，這兩個控件必須當作ViewPager的子控件來用，否則會報錯。

兩個控件有什麼差別呢？

簡單的了解就是：

PagerTabStrip：互動式

PagerTitleStrip：非互動式

經過簡單測試發現：

PagerTabStrip：

    1.點選上面的标題可以實作ViewPager的切換。

    2.選中的文字下方包含指引線

    3.顯示全寬下劃線（setDrawFullUnderline）

PagerTitleStrip：

    1.點選上面的标題無反應。

    2.無上述描述。

3、建立view_pager_fragment.xml内容如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/view_pager_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top|center_horizontal"
        android:layout_marginTop="30dp" />

    <ImageView
        android:id="@+id/view_pager_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/view_pager_text"
        android:layout_marginTop="10dp" />

</RelativeLayout>
           

用于在ViewPager中顯示。

4、建立TitleViewPagerDemo頁面

import java.util.ArrayList;
import java.util.List;
import com.lk.myandroidui.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * 有标題的ViewPager
 * @author Administrator
 *
 */
public class TitleViewPagerDemo extends FragmentActivity {

    private static int TOTAL_COUNT = 5;// 标題數量

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        setContentView(R.layout.view_pager_demo);
        
        PagerTabStrip mPagerTabStrip=(PagerTabStrip) findViewById(R.id.pager_tabstrip);
        //設定導覽列的顔色
        mPagerTabStrip.setTabIndicatorColorResource(android.R.color.white);

        ViewPager mViewPager = (ViewPager) findViewById(R.id.view_pager_demo);
        ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();//ViewPager中顯示的資料
        ArrayList<String> titleList = new ArrayList<String>();// 标題資料
        //添加資料
        for (int i = 0; i < TOTAL_COUNT; i++) {
            ViewPagerFragment mViewPagerFragment = new ViewPagerFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("upImageId", R.drawable.banner1);// 圖檔
            bundle.putString("text", "Page " + i);// 文字
            mViewPagerFragment.setArguments(bundle);// 設定參數
            titleList.add("Title " + (i+1));
            fragmentList.add(mViewPagerFragment);
        }
        mViewPager.setAdapter(new MyPagerFragmentAdapter(
                getSupportFragmentManager(), fragmentList, titleList));

    }
    //擴充卡
    private class MyPagerFragmentAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragmentList;
        private List<String> titleList;

        public MyPagerFragmentAdapter(FragmentManager fm,
                List<Fragment> fragmentList, List<String> titleList) {
            super(fm);
            this.fragmentList = fragmentList;
            this.titleList = titleList;
        }

        // ViewPage中顯示的内容
        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return (fragmentList == null || fragmentList.size() == 0) ? null
                    : fragmentList.get(arg0);
        }

        // Title中顯示的内容
        @Override
        public CharSequence getPageTitle(int position) {
            // TODO Auto-generated method stub
            return (titleList.size() > position) ? titleList.get(position) : "";
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return fragmentList == null ? 0 : fragmentList.size();
        }

    }
    /** 使用Fragment顯示ViewPager中的主要内容 */
    public static class ViewPagerFragment extends Fragment {
        public ViewPagerFragment() {
            super();
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.view_pager_fragment_demo1,
                    container, false);
            TextView tv = (TextView) view.findViewById(R.id.view_pager_text);
            ImageView image = (ImageView) view
                    .findViewById(R.id.view_pager_image);

            Bundle bundle = getArguments();
            if (bundle != null) {
                //設定圖檔
                int upImageId = bundle.getInt("upImageId");
                if (upImageId != 0) {
                    image.setImageResource(upImageId);
                }
                //設定文字
                String text = bundle.getString("text");
                tv.setText(text);
            }
            return view;
        }
    }
}
           

ok，結束。