Android 應用開發----ViewPager---PagerTitleStrip新增標題欄

阿新 • • 發佈：2018-12-15

ViewPager 詳解 PagerTabStrip與PagerTitleStrip新增標題欄的異同

一、PagerTitleStrip

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

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

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

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>

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

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

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

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; //標題列表陣列

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

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 "XX";
case 1:
return "XX";
case 2:
return "XX";
default:
return "";
}
}

這樣效果是一樣一樣的，只是程式碼不好維護而已。好了，有關PagerTabStrip的問題，我們就先說到這。

二、PagerTabStrip

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

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

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

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

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

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佈局

<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（）函式

全部程式碼：

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方法；

程式碼如下：

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

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

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

具體程式碼如下，不再細講，大家可以看看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都沒有用這個玩意的。所以這裡也只是一個過渡，在開發中，我們也不建議使用這兩個東東。

Android 應用開發----ViewPager---PagerTitleStrip新增標題欄

ViewPager 詳解 PagerTabStrip與PagerTitleStrip新增標題欄的異同

一、PagerTitleStrip

1、XML佈局檔案：

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