详解Android中ViewPager的PagerTabStrip子控件的用法

我们先来看一个小例子：

可以看到，效果实现的也是很棒，比之前自定义的标签指示器更加的流畅。下面，简单介绍一下 PagerTabStrip和它的使用。

PagerTabStrip是v4支持包里面的类，是ViewPager专用的类，不能在其他地方使用。在使用的时候，我们只需要在ViewPager的布局里面声明即可。

如下面的代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@android:color/white"
 android:orientation="vertical" >

 <android.support.v4.view.ViewPager
  android:id="@+id/viewPager"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <android.support.v4.view.PagerTabStrip
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="top"
   android:background="@android:color/holo_blue_light"
   android:textColor="@android:color/white" />
 </android.support.v4.view.ViewPager>

</LinearLayout>

我们可以设置layout_gravity属性，比如top或者是bottom，来控制显示的位置。除此之外，不需要进行其他设置。

剩下的，就是我们需要在代码里面实现的了。

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class PagerTabStripActivity extends FragmentActivity {

 private List<Fragment> fragments;
 private ViewPager viewPager;
 private List<String> titleList;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  initView();
 }

 private void initView() {
  viewPager = (ViewPager) findViewById(R.id.viewPager);

  titleList = new ArrayList<String>();
  titleList.add("最新推荐");
  titleList.add("游戏娱乐");
  titleList.add("影音视频");

  fragments = new ArrayList<Fragment>();
  fragments.add(new MyFragment(android.R.color.holo_green_light));
  fragments.add(new MyFragment(android.R.color.holo_orange_light));
  fragments.add(new MyFragment(android.R.color.holo_red_light));

  FragmentPagerAdapter adapter = new FragmentPagerAdapter(
    getSupportFragmentManager()) {

   @Override
   public int getCount() {
    return 3;
   }

   @Override
   public Fragment getItem(int position) {
    return fragments.get(position);
   }

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

  };

  viewPager.setAdapter(adapter);

 }
}

在上面的代码里面，展现了我们如何控制标题的文字，我们只需要重写getPagerTitle方法即可。
下面我们再来结合例子细说一下PagerTabStrip：

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>

可以看到，同样，是将PagerTabStrip作为ViewPager的一个子控件直接插入其中，当然android:layout_gravity=""的值一样要设置为top或bottom。
2、重写适配器的getPageTitle（）函数
全部代码：

package com.example.testviewpage_2; 

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;
}