本文详细介绍了ViewPager中PagerTitleStrip和PagerTabStrip的使用方法及区别，包括如何在XML布局文件中配置并设置标题，以及如何通过重写适配器的getPageTitle方法实现标题的动态显示。
前面关于ViewPager的两篇总结中演示了ViewPager的相关用法，但我们发现其仅仅实现了滑动切换。如果每一页都
有对应的标题栏会让使用者感觉更友好（类似选项卡）。ViewPager中显示标题栏涉及“PagerTitleStrip”和
“PagerTabStrip”两个类，同样它们都位于android.support.v4.view包中。正所谓“见名知义”，看到这两个类名，
就应对其的作用有个八九不离十的认知。
首先看一下，添加了标题的ViewPager。
可以看到，三个页面是带着标题一块滑动的。
一 PagerTitleStrip
官方的解释如下。
PagerTitleStrip is a non-interactive indicator of the current, next, and previous pages of aViewPager. 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, seePagerTabStrip.
PagerTabStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个非交互的指示器。它经常作为
ViewPager控件的一个子控件被被添加在XML布局文件中。在你的布局文件中，将它作为子控件添加在ViewPager中。
而且要将它的 android:layout_gravity 属性设置为TOP或BOTTOM来将它显示在ViewPager的顶部或底部。每个页面的
标题是通过适配器的getPageTitle(int)函数提供给ViewPager的。
可能译的不太通顺，这里英文难度不大，大家应该也能看得懂，着重看下面两点。
一、在你的布局文件中，将它作为子控件添加在ViewPager中。
二、标题的获取是重写适配器的getPageTitle(int)函数来获取的。
1.1 activity_main.xml
下面我们看一看程序的实现。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.example.testviewpage_1.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。将标题栏显示在顶部或底部。
1.2 Override getPageTitle(int) in the adapter
package com.example.testviewpage_3;
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 ViewPager viewPager; // 对应的viewPager
private List<View> viewList;// view数组
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>();
titleList.add("Helios");
titleList.add("Lemon");
titleList.add("Seven");
PagerAdapter pagerAdapter = new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// return arg0 == arg1;
return arg0 == viewList.get(Integer.parseInt(arg1.toString()));
}
@Override
public int getCount() {
return viewList.size();
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(viewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
// return viewList.get(position);
return position;
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
};
viewPager.setAdapter(pagerAdapter);
}
}相比较《Android之ViewPager总结（二）》，这里作了如下更改。
申明了一个List，用来存储三个页面对应的标题。
private List<String> titleList;// 标题数组
titleList = new ArrayList<String>();
titleList.add("Helios");
titleList.add("Lemon");
titleList.add("Seven");根据位置返回当前页面对应的标题。
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}二 PagerTabStrip
使用PagerTabStrip做出来的带有标题的ViewPager效果如何呢？请看下面的截图。
其实这两个实现的效果基本差不多，但有两点不同。
1、PagerTabStrip在当前页的标题下，会有一个下划线显示出类似Tab的效果。
2、PagerTabStrip的Tab是可以点击的，当用户点击某一个Tab时，当前页面就会跳转到这个页面，而
PagerTitleStrip则没这个功能。
首先同样来看看官方对PagerTabStrip的解释。
PagerTabStrip is an interactive indicator of the current, next, and previous pages of aViewPager. 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)函数来实现的。
看看下面的实例。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.example.testviewpage_1.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.PagerTabStrip
android:id="@+id/PagerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
</RelativeLayout>package com.example.testviewpage_3;
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 ViewPager viewPager; // 对应的viewPager
private List<View> viewList;// view数组
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>();
titleList.add("Helios");
titleList.add("Lemon");
titleList.add("Seven");
PagerAdapter pagerAdapter = new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// return arg0 == arg1;
return arg0 == viewList.get(Integer.parseInt(arg1.toString()));
}
@Override
public int getCount() {
return viewList.size();
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(viewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
// return viewList.get(position);
return position;
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
};
viewPager.setAdapter(pagerAdapter);
}
}这里的代码与PagerTitleStrip的完全相同，就不再累述。就这样，我们就讲完了有关PagerTabStrip的简单使用
方法。
三 PagerTabStrip属性更改
从上面图中可以看到两个地方做了更改。1、下划线颜色，原生是白色的，变成了红色；2、在Tab标题前加了一
个图片；下面说说是如何更改的。
更改下划线颜色。
pagerTitle = (PagerTabStrip) findViewById(R.id.PagerTitle);
pagerTitle.setTabIndicatorColorResource(android.R.color.holo_red_dark);在Tab标题前加图片。getPageTitle(int position)方法返回值是字符串，我们不返回字符串对象，而采用
SpannableStringBuilder来构造包含图片的扩展String对象；
@Override
public CharSequence getPageTitle(int position) {
// space added before text for
SpannableStringBuilder ssb = new SpannableStringBuilder(" "+ titleList.get(position));
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都没有
用这个玩意的。所以这里也只是一个过渡，在开发中，我们也不建议使用这两个东东。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
