前言：在前兩篇文章中，我們講解了滑動頁面的的實現方法與四大函數的意義，但有時，僅僅實現頁面滑動是不夠的，還要有標題欄纔會顯得更友好。所以在這篇文章中，我將會向大家展示在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 ViewPager. 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 methodgetPageTitle(int) in the adapter supplied to the ViewPager.

For an interactive indicator, see PagerTabStrip.

翻譯：

PagerTabStrip是ViewPager的一個關於當前頁面、上一個頁面和下一個頁面的一個非交互的指示器。它經常作爲ViewPager控件的一個子控件被被添加在XML佈局文件中。在你的佈局文件中，將它作爲子控件添加在ViewPager中。而且要將它的 android:layout_gravity 屬性設置爲TOP或BOTTOM來將它顯示在ViewPager的頂部或底部。每個頁面的標題是通過適配器的getPageTitle(int)函數提供給ViewPager的。

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

1、首先，文中提到：在你的佈局文件中，將它作爲子控件添加在ViewPager中。

2、第二，標題的獲取，是重寫適配器的getPageTitle(int)函數來獲取的。

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

1、XML佈局文件：

[html]view
plain copy
 
<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>

清楚的看到我們將.PagerTitleStrip將其作爲ViewPager的子控件直接嵌入其中；這是第一步；當然android:layout_gravity=""的值要設置爲top或bottom。將標題欄顯示在頂部或底部。

2、重寫適配器的getPageTitle（）函數

便於大家有個整體認識，先貼全局代碼，然後再逐個講，這段代碼是在《ViewPager 詳解（二）---詳解四大函數》直接更改來的，如果不太明白，先看看這篇文章。

[java]view
plain copy
 
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);  

    }  

}

相比較《ViewPager 詳解（二）---詳解四大函數》這裏作了一點更改：

1、變量

[java]view
plain copy
 

private List<String> titleList;  //標題列表數組  

申請了一個String數組，用來存儲三個頁面所對應的標題的

2、初始化

[java]view
plain copy
 
titleList = new ArrayList<String>();// 每個頁面的Title數據  

titleList.add("王鵬");  

titleList.add("姜語");  

titleList.add("結婚");

在初始化階段增加了這麼一段初始化數組的代碼。

3、重寫CharSequence getPageTitle(int )函數

[java]view
plain copy
 
@Override  

public CharSequence getPageTitle(int position) {  

    // TODO Auto-generated method stub  

    return titleList.get(position);  

}

根據位置返回當前所對應的標題。

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

[java]view
plain copy
 
@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

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

此例是以《ViewPager 詳解（一）---基本入門》爲基礎，更改而成；

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

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 ViewPager. 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 methodgetPageTitle(int) in the adapter supplied to the ViewPager.

For a non-interactive indicator, see PagerTitleStrip.

翻譯：

PagerTabStrip是ViewPager的一個關於當前頁面、上一個頁面和下一個頁面的一個可交互的指示器。它經常作爲ViewPager控件的一個子控件被被添加在XML佈局文件中。在你的佈局文件中，將它作爲子控件添加在ViewPager中。而且要將它的 android:layout_gravity 屬性設置爲TOP或BOTTOM來將它顯示在ViewPager的頂部或底部。每個頁面的標題是通過適配器的getPageTitle(int)函數提供給ViewPager的。

可以看到，除了第一句以外的其它句與PagerTitleStrip的解釋完全相同。即用法也是相同的。只是PagerTabStrip是可交互的，而PagerTitleStrip是不可交互的區別。對於區別在哪些位置，即是上面的兩點（是否可點擊與下劃線指示條）。

用法與PagerTitleStrip完全相同，即：

1、首先，文中提到：在你的佈局文件中，將它作爲子控件添加在ViewPager中。

2、第二，標題的獲取，是重寫適配器的getPageTitle(int)函數來獲取的。

看看實例：

1、XML佈局

[html]view
plain copy
 
<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>

可以看到，同樣，是將PagerTabStrip作爲ViewPager的一個子控件直接插入其中，當然android:layout_gravity=""的值一樣要設置爲top或bottom。

2、重寫適配器的getPageTitle（）函數

全部代碼：

[java]view
plain copy
 
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);  

    }  

}

這裏的代碼與PagerTitleStrip的完全相同，就不再講解了。

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

3、擴展：PagerTabStrip屬性更改

在源碼中，大家可以看到有個工程叫TestViewPage_PagerTabStrip_extension，運行一下，效果是這樣的：

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

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

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

下面說說是如何更改的：

1、更改下劃線顏色：

主要靠PagerTabStrip的setTabIndicatorColorResource方法；

代碼如下：

[java]view
plain copy
 
pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);  

pagerTabStrip.setTabIndicatorColorResource(R.color.green);

2、添加標題——重寫適配器CharSequence getPageTitle(int)方法

在CharSequence getPageTitle(int position)方法返回值是，我們不返回String對象，而採用SpannableStringBuilder來構造了下包含圖片的擴展String對像；

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

[java]view
plain copy
 
@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都沒有用這個玩意的。所以這裏也只是一個過渡，在開發中，我們也不建議使用這兩個東東。

爲什麼無法改變PagerTabStrip的滑動特性，看這個貼子：《Fixed Tabs with android.support.v4.view.PagerTabStrip or ViewPagerIndicator》

參考文章：

《Android多屏滑動:ViewPager基礎使用及PagerTabStrip先天缺陷(附源碼)》

《android:修改PagerTabStrip中的背景顏色，標題字體的樣式、顏色和圖標以及指示條的顏色》

所有源碼打包在一起，分爲三個：

1、TestViewPage_pagerTitleStrip：pagerTitleStrip實現實例

2、TestViewPage_PagerTabStrip ：PagerTabStrip實現實例

3、TestViewPage_PagerTabStrip_extension：PagerTabStrip的擴展實現

源碼下載地址：http://download.csdn.net/detail/harvic880925/7747417

請大家尊重原創者版權，轉載請標明出處：http://blog.csdn.net/harvic880925/article/details/38521865 謝謝！

ViewPager 詳解（三）---PagerTabStrip與PagerTitleStrip添加標題欄的異同

一、PagerTitleStrip

Class Overview

1、XML佈局文件：

2、重寫適配器的getPageTitle（）函數

1、變量

2、初始化

3、重寫CharSequence getPageTitle(int )函數

二、PagerTabStrip

Class Overview

1、XML佈局

2、重寫適配器的getPageTitle（）函數

3、擴展：PagerTabStrip屬性更改

1、更改下劃線顏色：

2、添加標題——重寫適配器CharSequence getPageTitle(int)方法

三、總結

Android ListView詳解

Android AlertDialog對話框

ViewPager 詳解（二）---詳解四大函數

Simulated Annealing 模擬退火

ViewPager 詳解（四）----自主實現滑動指示條

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結