在 Android ViewPager (页面切换组件) 我们创建了一个基本的 ViewPager

但这个 ViewPager 总觉得还缺少些什么，能添加上标题一起切换就好了，就像下面这样

Android 官方早就帮我们想好了，它们提供了 PagerTitleStrip 与 PagerTabStrip 用来制作 ViewPaper 的标题栏，前者是普通文字，后者会附带下划线，它们会随着页面切换而切换

本节我们就先来讲讲 PagerTitleStrip

PagerTitleStrip

PagerTitleStrip 在 android.support.v4.view 包下，可以通过 XML 代码创建

<android.support.v4.view.PagerTitleStrip
    android:id="@+id/pagertitle"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_gravity="top"
    android:textColor="#ffffff" />

然后提供了以下几个方法用于获取或定制外观

范例

我们先来看看最后的效果图

1. 复用 Android ViewPager (页面切换组件) 中的 demo

2. 修改 activity_main.xml 添加一个 PagerTitleStrip

   <?xml version="1.0" encoding="utf-8" ?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
   
       <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.PagerTitleStrip
               android:id="@+id/pagertitle"
               android:layout_width="wrap_content"
               android:layout_gravity="top"
               android:textColor="#333333" />
      </android.support.v4.view.ViewPager>
   
   </LinearLayout>
   

3. 修改 MsPagerAdapter.java ，因为我们要实现对应 View 的 Title

   重写方法 getPageTitle()

   package cn.twle.android.viewpager;
   
   import android.support.v4.view.PagerAdapter;
   
   import android.view.View;
   import android.view.ViewGroup;
   
   import java.util.ArrayList;
   
   public class MsPagerAdapter extends PagerAdapter {
   
       private ArrayList<View> mData;
       private ArrayList<String> mTitle;
   
       public MsPagerAdapter() {
       }
   
       public MsPagerAdapter(ArrayList<View> view_list,ArrayList<String> title) {
           super();
           this.mData = view_list;
           this.mTitle = title;
       }
   
       @Override
       public int getCount() {
           return mData.size();
       }
   
       @Override
       public boolean isViewFromObject(View view, Object object) {
           return view == object;
       }
   
       @Override
       public Object instantiateItem(ViewGroup container, int position) {
           container.addView(mData.get(position));
           return mData.get(position);
       }
   
       @Override
       public void destroyItem(ViewGroup container, int position, Object object) {
           container.removeView(mData.get(position));
       }
   
       @Override
       public CharSequence getPageTitle(int position) {
           return mTitle.get(position);
       }
   }
   

4. 最后修改 MainActivity.java 添加标题

   package cn.twle.android.viewpager;
   
   import android.os.Bundle;
   import android.support.v4.view.ViewPager;
   import android.support.v7.app.AppCompatActivity;
   import android.view.LayoutInflater;
   import android.view.View;
   
   import java.util.ArrayList;
   
   public class MainActivity extends AppCompatActivity{
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           ViewPager viewpaper = (ViewPager) findViewById(R.id.viewpager);
   
           ArrayList<String> titles = new ArrayList<String>();
   
           titles.add("Page One");
           titles.add("Page Two");
           titles.add("Page Three");
   
           ArrayList<View> view_list = new ArrayList<View>();
   
           LayoutInflater li = getLayoutInflater();
   
           view_list.add(li.inflate(R.layout.view_one,null,false));
           view_list.add(li.inflate(R.layout.view_two,null,false));
           view_list.add(li.inflate(R.layout.view_three,null,false));
   
           MsPagerAdapter mAdapter =  new MsPagerAdapter(view_list,titles);
   
           viewpaper.setAdapter(mAdapter);
       }
   }
   

运行之后发现长的有点难看，不过这不要紧，毕竟定制下样式就可以了，如果有 今日头条 那样的下划线效果就更赞了

参考文档

1. Android ViewPager