上一期學習了ViewPager的簡單使用，本期一起來學習ViewPager的更多用法。

相信很多同學都使用過今日頭條APP吧，一打開主界面就可以看到頂部有很多Tab，然後通過左右滑動來切換，就可以通過ViewPager來完成。當然具體實現又會有很多方式，我們本期就先來學習最簡單的Tab切換吧，有一點類似於之前瞭解的TabHost。

一、PagerTitleStrip與PagerTabStrip

在實際運用中，很多時候只有頁面滑動是不夠的，還需要有標題欄纔夠友好。首先來學習一下官方自帶的，在android.support.v4包中的兩個控件PagerTabStrip與PagerTitleStrip。

上面提到的2個控件，其中PagerTitleStrip是普通文字，PagerTabStrip帶有下劃線。PagerTabStrip在效果上包含了PagerTitleStrip。

如果只添加PagerTabStrip可以看到只有線，但是它佔的佈局是有一定高度的，而且默認是不顯示標題的，如果要顯示出來，需在適配器裏重寫getPageTitle(int position)方法。關於標題及這條線的顏色，和整個標識View的背景，都可以在代碼裏設置。

還有一個區別就是，PagerTabStrip可以點擊切換View，而PagerTitleStrip不能點擊。

接下來通過一個案例來學習PagerTabStrip的使用。

繼續再上一期的案例基礎上來進行修改，首先修改viewpager_layout.xml文件，修改後的代碼如下：

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/view_pager_tabstrip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </android.support.v4.view.ViewPager>
</LinearLayout>

然後幾個頁面佈局文件不變，既然需要在頂部顯示Tab和標題，那就需要我們通過適配器來設置，修改後的ViewPagerAdapter類代碼如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;

/**
 * @創建者 鑫鱻
 * @描述 Android零基礎入門到精通系列教程
 * 首發微信公衆號分享達人秀（ShareExpert）
 */
public class ViewPagerAdapter extends PagerAdapter {
    private ArrayList<View> mPageLists = null;
    private ArrayList<String> mTitleLists = null;

    public ViewPagerAdapter(ArrayList<View> pageLists, ArrayList<String> titleLists) {
        this.mPageLists = pageLists;
        this.mTitleLists = titleLists;
    }

    @Override
    public int getCount() {
        return (null == mPageLists) ? 0 :mPageLists.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View pageView = mPageLists.get(position);
        container.addView(pageView);
        return pageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // 將當前位置的View移除
        container.removeView(mPageLists.get(position));
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return (null == mTitleLists && position < mTitleLists.size())
                ? null : mTitleLists.get(position);
    }
}

接着修改ViewPagerActivity，修改的代碼如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Toast;

import com.jinyu.cqkxzsxy.android.advancedviewsample.adapter.ViewPagerAdapter;

import java.util.ArrayList;

/**
 * @創建者 鑫鱻
 * @描述 Android零基礎入門到精通系列教程，歡迎關注微信公衆號ShareExpert
 */
public class ViewPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    private ViewPager mViewPager = null;
    private PagerTabStrip mPagerTabStrip = null;
    private ViewPagerAdapter mAdapter = null;
    private ArrayList<View> mPageLists = null;
    private ArrayList<String> mTitleLists = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewpager_layout);

        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mPagerTabStrip = (PagerTabStrip) findViewById(R.id.view_pager_tabstrip);

        // 裝入分頁顯示hi的View視圖
        mPageLists = new ArrayList<>();
        LayoutInflater inflater = getLayoutInflater();
        mPageLists.add(inflater.inflate(R.layout.viewpager_page1, null, false));
        mPageLists.add(inflater.inflate(R.layout.viewpager_page2, null, false));
        mPageLists.add(inflater.inflate(R.layout.viewpager_page3, null, false));
        mPageLists.add(inflater.inflate(R.layout.viewpager_page4, null, false));
        // 裝入每個頁面的Title
        mTitleLists = new ArrayList<>();
        mTitleLists.add("第一頁");
        mTitleLists.add("第二頁");
        mTitleLists.add("第三頁");
        mTitleLists.add("第四頁");

        mAdapter = new ViewPagerAdapter(mPageLists, mTitleLists);
        mViewPager.setAdapter(mAdapter);

        // 更改下劃線顏色
        mPagerTabStrip.setTabIndicatorColor(Color.BLUE);
        mViewPager.addOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(this, "第" + (position + 1) + "頁", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

重新運行程序，可以看到界面中已經出現了久違的Tab和標題，左右滑動頁面也可以看到Tab處的線條跟隨改變，如下圖所示：

從上面的案例可以發現，PagerTabStrip是ViewPager的一個關於當前頁面、上一個頁面和下一個頁面的一個可交互的指示器。其默認顯示在頂部，還可以通過android:layout_gravity 屬性設置爲TOP或BOTTOM將它顯示在ViewPager的頂部或底部。

關於PagerTitleStrip的使用，和PagerTabStrip基本差不多，只是佈局文件中ViewPager包含的控件不同而已，這裏就不再詳細說明了，建議自己動手練習，如果有問題，歡迎進Android入門討論羣一起探討。

二、自定義實現

上面我們使用了系統自帶的控件來完成Tab顯示，可能有的同學已經發現其與TabHost還是有一定的差別的，上面的Tab只顯示3個，而且也不能完全滿足實際需求，就需要我們自定義來實現了。

接下來依然通過一個案例來學習如何自定義ViewPager的Tab標籤。

繼續使用WidgetSample工程的advancedviewsample模塊，在src/main/res/layout/目錄下創建viewpager_custom_layout.xml文件，在其中填充如下代碼片段：

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#FFFFFF">

        <TextView
            android:id="@+id/viewpager_tv_one"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="第一頁"
            android:textColor="#000000" />

        <TextView
            android:id="@+id/viewpager_tv_two"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="第二頁"
            android:textColor="#000000" />

        <TextView
            android:id="@+id/viewpager_tv_three"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="第三頁"
            android:textColor="#000000" />
    </LinearLayout>

    <ImageView
        android:id="@+id/cursor_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/line" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

</LinearLayout>

在頁面頂部有一個線性佈局，裏面包含3個TextView，也就是ViewPager頂部的3個Tab標籤。然後下面緊跟一個ImageView，主要用於指示當前是哪一個Tab標籤對應的頁面，也就是常說的滑塊。最後在最底下是一個ViewPager，其中android:flipInterval屬性設置了動畫的時間間隔，android:persistentDrawingCache屬性指控件的繪製緩存策略，一共有4個可選值，或者選擇2個進行組合，分別如下：

none：不在內存中保存繪圖緩存。
animation:只保存動畫繪圖緩存。
scrolling：只保存滾動效果繪圖緩存。
all：所有的繪圖緩存都應該保存在內存中。

然後新建幾個頁面文件，這裏繼續使用上一期ViewPager快速實現引導頁裏面的頁面文件，同樣使用相同的適配器ViewPagerAdapter。

最後新建ViewPagerCustomActivity.java文件，加載上面新建的佈局文件，具體代碼如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

import com.jinyu.cqkxzsxy.android.advancedviewsample.adapter.ViewPagerAdapter;

import java.util.ArrayList;

/**
 * @創建者 鑫鱻
 * @描述 Android零基礎入門到精通系列教程，歡迎關注微信公衆號ShareExpert
 */
public class ViewPagerCustomActivity extends AppCompatActivity
        implements ViewPager.OnPageChangeListener, View.OnClickListener {
    private ViewPager mViewPager = null;
    private ImageView mCursorImg = null;
    private TextView mOneTv = null;
    private TextView mTwoTv = null;
    private TextView mThreeTv = null;

    private ViewPagerAdapter mAdapter = null;
    private ArrayList<View> mPageList = null;

    private int mOffset = 0;// 移動條圖片的偏移量
    private int mCurrIndex = 0; // 當前頁面的編號
    private int mOneDis = 0; // 移動條滑動一頁的距離
    private int mTwoDis = 0; // 滑動條移動兩頁的距離

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewpager_custom_layout);

        // 獲取界面組件
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mCursorImg = (ImageView) findViewById(R.id.cursor_img);
        mOneTv = (TextView) findViewById(R.id.viewpager_tv_one);
        mTwoTv = (TextView) findViewById(R.id.viewpager_tv_two);
        mThreeTv = (TextView) findViewById(R.id.viewpager_tv_three);

        // 初始化指示器位置
        initCursorPosition();

        mPageList = new ArrayList<>();
        LayoutInflater inflater = getLayoutInflater();
        mPageList.add(inflater.inflate(R.layout.viewpager_page1, null, false));
        mPageList.add(inflater.inflate(R.layout.viewpager_page2, null, false));
        mPageList.add(inflater.inflate(R.layout.viewpager_page3, null, false));

        // 設置適配器
        mAdapter = new ViewPagerAdapter(mPageList);
        mViewPager.setAdapter(mAdapter);

        // 文本框點擊監聽器
        mOneTv.setOnClickListener(this);
        mTwoTv.setOnClickListener(this);
        mThreeTv.setOnClickListener(this);

        // 頁面改變監聽器
        mViewPager.addOnPageChangeListener(this);
        // 初始默認第一頁
        mViewPager.setCurrentItem(0);
    }

    private void initCursorPosition() {
        // 獲取指示器圖片寬度
        int cursorWidth = BitmapFactory.decodeResource(getResources(), R.drawable.line).getWidth();

        // 獲取分辨率寬度
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenWidth = dm.widthPixels;

        // 計算偏移量
        mOffset = (screenWidth / 3 - cursorWidth) / 2;

        // 設置動畫初始位置
        Matrix matrix = new Matrix();
        matrix.postTranslate(mOffset, 0);
        mCursorImg.setImageMatrix(matrix);

        // 計算指示器圖片的移動距離
        mOneDis = mOffset * 2 + cursorWidth;// 頁卡1 -> 頁卡2 偏移量
        mTwoDis = mOneDis * 2;// 頁卡1 -> 頁卡3 偏移量
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.viewpager_tv_one:
                mViewPager.setCurrentItem(0);
                break;
            case R.id.viewpager_tv_two:
                mViewPager.setCurrentItem(1);
                break;
            case R.id.viewpager_tv_three:
                mViewPager.setCurrentItem(2);
                break;
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        // 指示器圖片動畫設置
        Animation animation = null;
        switch (position) {
            case 0:
                if (1 == mCurrIndex) {
                    animation = new TranslateAnimation(mOneDis, 0, 0, 0);
                } else if (2 == mCurrIndex) {
                    animation = new TranslateAnimation(mTwoDis, 0, 0, 0);
                }
                break;
            case 1:
                if (0 == mCurrIndex) {
                    animation = new TranslateAnimation(mOffset, mOneDis, 0, 0);
                } else if (2 == mCurrIndex) {
                    animation = new TranslateAnimation(mTwoDis, mOneDis, 0, 0);
                }
                break;
            case 2:
                if (0 == mCurrIndex) {
                    animation = new TranslateAnimation(mOffset, mTwoDis, 0, 0);
                } else if (1 == mCurrIndex) {
                    animation = new TranslateAnimation(mOneDis, mTwoDis, 0, 0);
                }
                break;
            default:
                break;
        }
        mCurrIndex = position;
        animation.setFillAfter(true); // True:圖片停在動畫結束位置
        animation.setDuration(300);
        mCursorImg.startAnimation(animation);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

可以發現這裏的代碼和上期大致相同，只是在其中增加了滑塊的位置及動畫設置，爲3個Tab標籤監聽了點擊事件。其中initCursorPosition()方法主要初始化指示器圖標的位置，需要根據屏幕寬度來計算遊標顯示位置。然後同樣設置了頁面監聽器，主要根據滑動到的頁面把遊標滑動找指定位置。關於動畫的這一塊代碼，可能有很多新人不太懂，不要太介意這個了，後續會專門進行學習，這裏只需要知道可以這樣使用就行。

修改程序啓動的Activity，運行程序，然後左右滑動屏幕或點擊Tab標籤，可以看到下圖所示界面效果。