上一期學習了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標簽，可以看到下圖所示界面效果。

通過上面的學習，是不是發現開發一個這樣的漂亮界面其實非常簡單。除了系統自帶的和上面的自定義方法，在實際開發中常會結合Fragment來一起開發，建議後期學完Fragment後再來進一步學習。

除了學習的PagerAdapter適配器，還有另外2個FragmentPagerAdapter和FragmentStatePagerAdapter，主要也是結合Fragment一起使用的，這裏先不做過多學習。

今天就先到這裏，如果有問題歡迎留言一起探討，也歡迎加入Android零基礎入門技術討論微信群，共同成長！

此文章版權為微信公眾號分享達人秀（ShareExpert）——鑫鱻所有，若需轉載請聯系作者授權，特此聲明！

往期總結分享：

Android零基礎入門第1節：Android的前世今生

Android零基礎入門第2節：Android 系統架構和應用組件那些事

Android零基礎入門第3節：帶你一起來聊一聊Android開發環境

Android零基礎入門第4節：正確安裝和配置JDK, 高富帥養成第一招

Android零基礎入門第5節：善用ADT Bundle, 輕松邂逅女神

Android零基礎入門第6節：配置優化SDK Manager, 正式約會女神

Android零基礎入門第7節：搞定Android模擬器，開啟甜蜜之旅

Android零基礎入門第8節：HelloWorld，我的第一趟旅程出發點

Android零基礎入門第9節：Android應用實戰，不懂代碼也可以開發

Android零基礎入門第10節：開發IDE大升級，終於迎來了Android Studio

Android零基礎入門第11節：簡單幾步帶你飛，運行Android Studio工程

Android零基礎入門第12節：熟悉Android Studio界面，開始裝逼賣萌

Android零基礎入門第13節：Android Studio個性化配置，打造開發利器

Android零基礎入門第14節：使用高速Genymotion，跨入火箭時代

Android零基礎入門第15節：掌握Android Studio項目結構，揚帆起航

Android零基礎入門第16節：Android用戶界面開發概述

Android零基礎入門第17節：文本框TextView

Android零基礎入門第18節：輸入框EditText

Android零基礎入門第19節：按鈕Button

Android零基礎入門第20節：復選框CheckBox和單選按鈕RadioButton

Android零基礎入門第21節：開關組件ToggleButton和Switch

Android零基礎入門第22節：圖像視圖ImageView

Android零基礎入門第23節：圖像按鈕ImageButton和縮放按鈕ZoomButton

Android零基礎入門第24節：自定義View簡單使用，打造屬於你的控件

Android零基礎入門第25節：簡單且最常用的LinearLayout線性布局

Android零基礎入門第26節：兩種對齊方式，layout_gravity和gravity大不同

Android零基礎入門第27節：正確使用padding和margin

Android零基礎入門第28節：輕松掌握RelativeLayout相對布局

Android零基礎入門第29節：善用TableLayout表格布局

Android零基礎入門第30節：兩分鐘掌握FrameLayout幀布局

Android零基礎入門第31節：少用的AbsoluteLayout絕對布局

Android零基礎入門第32節：新推出的GridLayout網格布局

Android零基礎入門第33節：Android事件處理概述

Android零基礎入門第34節：Android中基於監聽的事件處理

Android零基礎入門第35節：Android中基於回調的事件處理

Android零基礎入門第36節：Android系統事件的處理

Android零基礎入門第37節：初識ListView

Android零基礎入門第38節：初識Adapter

Android零基礎入門第39節：ListActivity和自定義列表項

Android零基礎入門第40節：自定義ArrayAdapter

Android零基礎入門第41節：使用SimpleAdapter

Android零基礎入門第42節：自定義BaseAdapter

Android零基礎入門第43節：ListView優化和列表首尾使用

Android零基礎入門第44節：ListView數據動態更新

Android零基礎入門第45節：網格視圖GridView

Android零基礎入門第46節：列表選項框Spinner

Android零基礎入門第47節：自動完成文本框AutoCompleteTextView

Android零基礎入門第48節：可折疊列表ExpandableListView

Android零基礎入門第49節：AdapterViewFlipper圖片輪播

Android零基礎入門第50節：StackView卡片堆疊

Android零基礎入門第51節：進度條ProgressBar

Android零基礎入門第52節：自定義ProgressBar炫酷進度條

Android零基礎入門第53節：拖動條SeekBar和星級評分條RatingBar

Android零基礎入門第54節：視圖切換組件ViewSwitcher

Android零基礎入門第55節：ImageSwitcher和TextSwitcher

Android零基礎入門第56節：翻轉視圖ViewFlipper

Android零基礎入門第57節：DatePicker和TimePicker選擇器

Android零基礎入門第58節：數值選擇器NumberPicker

Android零基礎入門第59節：常用三大Clock時鐘組件

Android零基礎入門第60節：日歷視圖CalendarView和定時器Chronometer

Android零基礎入門第61節：滾動視圖ScrollView

Android零基礎入門第62節：搜索框組件SearchView

Android零基礎入門第63節：值得借鑒學習的選項卡TabHost

Android零基礎入門第64節：揭開RecyclerView廬山真面目

Android零基礎入門第65節：RecyclerView分割線開發技巧

Android零基礎入門第66節：RecyclerView點擊事件處理

Android零基礎入門第67節：RecyclerView數據動態更新

Android零基礎入門第68節：RecyclerView添加首尾視圖

Android零基礎入門第69節：ViewPager快速實現引導頁

Android零基礎入門第70節：ViewPager輕松完成TabHost效果