前言：在前兩篇文章中，我們講解了滑動頁面的的實現方法與四大函式的意義，但有時，僅僅實現頁面滑動是不夠的，還要有標題欄才會顯得更友好。所以在這篇文章中，我將會向大家展示在android.support.v4包中的兩個控制元件PagerTabStrip與PagerTitleStrip，他們都是用來實現標題欄的，但各自有些不同，在這篇文章中，我們就講講它們各自都能實現怎樣的功能，又有哪些異同點。

相關文章：

一、PagerTitleStrip

先看個簡單的，先上個效果圖，吸引大家一下眼球。

三個頁面間的滑動，此時是帶著上面的標題一塊滑動的。

看一下android 對於PagerTabStrip的官方解釋：

Class Overview

PagerTitleStrip is a non-interactive indicator of the current, next, and previous pages of a . It is intended to be used as a child view of a ViewPager widget in your XML layout. Add it as a child of a ViewPager in your layout file and set its android:layout_gravity to TOP or BOTTOM to pin it to the top or bottom of the ViewPager. The title from each page is supplied by the method in the adapter supplied to the ViewPager.

For an interactive indicator, see .

PagerTabStrip是ViewPager的一個關於當前頁面、上一個頁面和下一個頁面的一個非互動的指示器。它經常作為ViewPager控制元件的一個子控制元件被被新增在XML佈局檔案中。在你的佈局檔案中，將它作為子控制元件新增在ViewPager中。而且要將它的 android:layout_gravity 屬性設定為TOP或BOTTOM來將它顯示在ViewPager的頂部或底部。每個頁面的標題是通過介面卡的getPageTitle(int)函式提供給ViewPager的。

我可能譯的不大通順，這裡英文也難度不大，大家應該也能看得懂，但我還是著重講兩點：

1、首先，文中提到：在你的佈局檔案中，將它作為子控制元件新增在ViewPager中。

2、第二，標題的獲取，是重寫介面卡的getPageTitle(int)函式來獲取的。

根據這兩點，我們就可以看程式碼了：

1、XML佈局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.testviewpage_2.MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="200dip"
        android:layout_gravity="center">
        
        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="top"
            />
        
    </android.support.v4.view.ViewPager>

</RelativeLayout>

2、重寫介面卡的getPageTitle（）函式

package com.example.testviewpage_2;
/**
 * @author  harvic
 * @date 2014.8.12
 */
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

	private View view1, view2, view3;
	private List<View> viewList;// view陣列
	private ViewPager viewPager; // 對應的viewPager
	
	private List<String> titleList;  //標題列表陣列
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		LayoutInflater inflater = getLayoutInflater();
		view1 = inflater.inflate(R.layout.layout1, null);
		view2 = inflater.inflate(R.layout.layout2, null);
		view3 = inflater.inflate(R.layout.layout3, null);

		viewList = new ArrayList<View>();// 將要分頁顯示的View裝入陣列中
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);
		
		titleList = new ArrayList<String>();// 每個頁面的Title資料
		titleList.add("王鵬");
		titleList.add("姜語");
		titleList.add("結婚");

		PagerAdapter pagerAdapter = new PagerAdapter() {

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				//根據傳來的key，找到view,判斷與傳來的引數View arg0是不是同一個檢視
				return arg0 == viewList.get((int)Integer.parseInt(arg1.toString()));
			}

			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return viewList.size();
			}

			@Override
			public void destroyItem(ViewGroup container, int position,
					Object object) {
				// TODO Auto-generated method stub
				container.removeView(viewList.get(position));
			}

			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				// TODO Auto-generated method stub
				container.addView(viewList.get(position));
				
				//把當前新增檢視的位置（position）作為Key傳過去
				return position;
			}
			
			@Override
			public CharSequence getPageTitle(int position) {
				// TODO Auto-generated method stub
				return titleList.get(position);
			}
		};

		viewPager.setAdapter(pagerAdapter);

	}

}

1、變數

private List<String> titleList;  //標題列表陣列

2、初始化

titleList = new ArrayList<String>();// 每個頁面的Title資料
titleList.add("王鵬");
titleList.add("姜語");
titleList.add("結婚");

3、重寫CharSequence getPageTitle(int )函式

@Override
public CharSequence getPageTitle(int position) {
	// TODO Auto-generated method stub
	return titleList.get(position);
}

大家可以看到，其實這裡僅僅只重寫了getPageTitle（）函式，將其根據不同的位置返回不同的字串就可以實現上面的標題欄功能。第一和第二步有關陣列和初始化，其實都是這了這一步，其實我們完全可以用下面這個程式碼來取代它們：

@Override
public CharSequence getPageTitle(int position) {
	// TODO Auto-generated method stub
	switch (position) {
	case 0:
		return "王鵬";
	case 1:
		return "姜語";
	case 2:
		return "結婚";

	default:
		return "";
	}
}

二、PagerTabStrip

同樣，先看個PagerTabStrip做出來的效果是怎樣的。

可能看不出太大區別，其實這兩個實現的效果基本差不多，但有兩點不同：

1、PagerTabStrip在當前頁面下，會有一個下劃線條來提示當前頁面的Tab是哪個。

2、PagerTabStrip的Tab是可以點選的，當用戶點選某一個Tab時，當前頁面就會跳轉到這個頁面，而PagerTitleStrip則沒這個功能。

同樣，先看看官方對PagerTabStrip的解釋：

Class Overview

PagerTabStrip is an interactive indicator of the current, next, and previous pages of a . It is intended to be used as a child view of a ViewPager widget in your XML layout. Add it as a child of a ViewPager in your layout file and set its android:layout_gravity to TOP or BOTTOM to pin it to the top or bottom of the ViewPager. The title from each page is supplied by the method in the adapter supplied to the ViewPager.

For a non-interactive indicator, see .

翻譯：

PagerTabStrip是ViewPager的一個關於當前頁面、上一個頁面和下一個頁面的一個可互動的指示器。它經常作為ViewPager控制元件的一個子控制元件被被新增在XML佈局檔案中。在你的佈局檔案中，將它作為子控制元件新增在ViewPager中。而且要將它的 android:layout_gravity 屬性設定為TOP或BOTTOM來將它顯示在ViewPager的頂部或底部。每個頁面的標題是通過介面卡的getPageTitle(int)函式提供給ViewPager的。

用法與PagerTitleStrip完全相同，即：

1、首先，文中提到：在你的佈局檔案中，將它作為子控制元件新增在ViewPager中。

2、第二，標題的獲取，是重寫介面卡的getPageTitle(int)函式來獲取的。

1、XML佈局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.testviewpage_2.MainActivity" >

    <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:id="@+id/pagertab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:layout_gravity="top"/>
        
    </android.support.v4.view.ViewPager>

</RelativeLayout>

2、重寫介面卡的getPageTitle（）函式

全部程式碼：

package com.example.testviewpage_2;

/**
 * @author  harvic
 * @date 2014.8.13
 */
import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

	private View view1, view2, view3;
	private List<View> viewList;// view陣列
	private ViewPager viewPager; // 對應的viewPager

	private List<String> titleList;

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

		viewPager = (ViewPager) findViewById(R.id.viewpager);
		LayoutInflater inflater = getLayoutInflater();
		view1 = inflater.inflate(R.layout.layout1, null);
		view2 = inflater.inflate(R.layout.layout2, null);
		view3 = inflater.inflate(R.layout.layout3, null);

		viewList = new ArrayList<View>();// 將要分頁顯示的View裝入陣列中
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);

		titleList = new ArrayList<String>();// 每個頁面的Title資料
		titleList.add("王鵬");
		titleList.add("姜語");
		titleList.add("結婚");

		PagerAdapter pagerAdapter = new PagerAdapter() {

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				return arg0 == arg1;
			}

			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return viewList.size();
			}

			@Override
			public void destroyItem(ViewGroup container, int position,
					Object object) {
				// TODO Auto-generated method stub
				container.removeView(viewList.get(position));
			}

			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				// TODO Auto-generated method stub
				container.addView(viewList.get(position));

				return viewList.get(position);
			}

			@Override
			public CharSequence getPageTitle(int position) {
				
				return titleList.get(position);
			}
		};

		viewPager.setAdapter(pagerAdapter);

	}

}

就這樣，我們就講完了有關PagerTabStrip的簡單使用方法。下面講一講PagerTabStrip的擴充套件。

3、擴充套件：PagerTabStrip屬性更改

在上面兩個圖中可以看到，我更改了兩個地方：

1、下劃線顏色，原生是黑色，我變成了綠色；

2、在Tab標題前加了一個圖片；

下面說說是如何更改的：

1、更改下劃線顏色：

主要靠PagerTabStrip的setTabIndicatorColorResource方法；

程式碼如下：

pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
pagerTabStrip.setTabIndicatorColorResource(R.color.green);

2、新增標題——重寫介面卡CharSequence getPageTitle(int)方法

具體程式碼如下，不再細講，大家可以看看SpannableStringBuilder的使用方法，就可理解了。

@Override
public CharSequence getPageTitle(int position) {

	SpannableStringBuilder ssb = new SpannableStringBuilder("  "+titleList.get(position)); // space added before text
										// for
	Drawable myDrawable = getResources().getDrawable(
			R.drawable.ic_launcher);
	myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(),
			myDrawable.getIntrinsicHeight());
	ImageSpan span = new ImageSpan(myDrawable,
			ImageSpan.ALIGN_BASELINE);

	ForegroundColorSpan fcs = new ForegroundColorSpan(Color.GREEN);// 字型顏色設定為綠色
	ssb.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 設定圖示
	ssb.setSpan(fcs, 1, ssb.length(),
			Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 設定字型顏色
	ssb.setSpan(new RelativeSizeSpan(1.2f), 1, ssb.length(),
			Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
	return ssb;
}

三、總結

通過前面的講解，我們應該清楚的認識到PagerTabStrip與PagerTitleStrip在新增標題欄的異同，但他們實現的標題欄效果很不好，不能指定一個頁面一次顯示一個，或者全部顯示，而且標題還滑動。所以註定主流的App都沒有用這個玩意的。所以這裡也只是一個過渡，在開發中，我們也不建議使用這兩個東東。

參考文章：

所有原始碼打包在一起，分為三個：

1、TestViewPage_pagerTitleStrip：pagerTitleStrip實現例項

2、TestViewPage_PagerTabStrip ：PagerTabStrip實現例項

3、TestViewPage_PagerTabStrip_extension：PagerTabStrip的擴充套件實現