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

廢話少說，先上效果：

一、添加android support包
由於幾個類都是在android support包中才提供，咱們先添加android-support-v4.jar文件到工程的libs目錄下便可

二、新建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.無上述描述。

三、新建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中顯示。

四、新建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，結束。