Viewpager+Fragment实现滑动标签页

来上海实习快两周了，我是以Android实习生的身份进来的，但是老板一直让我做java web，说先测试水平，然后再转Android项目组，不过我心里可焦灼了，所以把老板交代的任务提前弄完了，再来搞我的Android。

ViewPager介绍：

好了，废话不多说了，今天主要要实现的是利用Viewpager+Fragment实现滑动标签页，首先，从官方文档出发，介绍一下ViwePager中比较关键的地方：

1. ViewPager直接继承了ViewGroup类，所以它是一个容器类，可以添加其他的View类

2. ViewPager类需要一个PagerAdapter适配器为它提供数据

3. ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter使用

在编写ViewPager时，需要使用PagerTitleStrip和PagerTabStrip类，用于显示每一页的标题，其中，PagerTitleStrip类直接继承ViewGroup，而PagerTabStrip类继承PagerTitleStrip，二者均为容器类，但需要注意的是，在定义xml的layout的时候，这两个类必须是ViewPager的子标签，否则会报错“PagerTitleStrip must be a direct child of a ViewPager.”

下面，我将展示一个较为简单的例子程序，用Viewpager+Fragment实现滑动标签页。一下几步完成。

1. 编写xml布局文件；

2. 编写适配器ViewPagerAdapter(继承自FragmentPagerAdapter)；

3. 编写ViewPagerActivity(继承自FragmentActivity)；

编写xml布局文件

在编写布局文件时，需注意PagerTabStrip或PagerTitleStrip必须是ViewPager的直接子类，如下：

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

          <android.support.v4.view.PagerTabStrip
              android:id="@+id/pagerTabStrip"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="top"/>

</android.support.v4.view.ViewPager>

或：

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

          <android.support.v4.view.PagerTitleStrip
              android:id="@+id/pagerTitleStrip"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="top"/>

</android.support.v4.view.ViewPager>

那么，PagerTitleStrip和PagerTabStrip到底有什么区别呢？
总结起来，便是：

• PagerTabStrip：点击上面的标题可以实现ViewPager的切换。

• PagerTitleStrip：点击上面的标题无反应。

编写适配器ViewPagerAdapter

• 首先，继承FragmentPagerAdapter后，需得明确ViewPagerAdapter所需要的参数，即Fragment集合、titles集合以及FragmentManager，如下：

    private List<BaseFragment> fragments;
    private List<String> titles;

    public ViewPagerAdapter(FragmentManager manager){
        super(manager);
    }

    public ViewPagerAdapter(FragmentManager manager, List<BaseFragment> fragments, List<String> titles){
        super(manager);
        this.fragments = fragments;
        this.titles = titles;
    }

• 之后，实现getItem、getCount、getPageTitle方法：

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

    @Override
    public int getCount() {
        return fragments.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }

这样，适配器就编写完成了。

编写ViewPagerActivity

• 代码如下：

public class ViewPagerActivity extends FragmentActivity {

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;
    private List<BaseFragment> fragments;
    private List<String> titles;
    private HotSpotFragment hotSpotFragment;
    private FindFragment findFragment;
    private TopicFragment topicFragment;
    private LifeFragment lifeFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        ActivityManager.addActivity(this);

        initView();
        initData();
        initEvent();

    }

    public void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagerTabStrip);
        //设置下划线的颜色
        pagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.colorPrimary));
        //设置字体颜色
        pagerTabStrip.setTextColor(getResources().getColor(R.color.colorPrimary));

    }

    public void initData() {
        fragments = new ArrayList<BaseFragment>();
        titles = new ArrayList<String>();

        hotSpotFragment = new HotSpotFragment();
        findFragment = new FindFragment();
        topicFragment = new TopicFragment();
        lifeFragment = new LifeFragment();

        fragments.add(hotSpotFragment);
        fragments.add(findFragment);
        fragments.add(topicFragment);
        fragments.add(lifeFragment);

        titles.add("热点");
        titles.add("发现");
        titles.add("话题");
        titles.add("生活");
    }

    public void initEvent() {
        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),fragments,titles));
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ActivityManager.removeActivity(this);
    }
}

• 其中，ActivityManager是用于管理Activity的类，实现如下：

public class ActivityManager {

    //用于管理所有的Activity
    public static List<Activity> activities = new ArrayList<Activity>();

    /**
     * 将Activity添加到List中，方便于管理
     *
     * @param activity
     */
    public static void addActivity(Activity activity){
        if(activity != null && !activities.contains(activity))
            activities.add(activity);
    }

    /**
     * 移除对应的Activity
     *
     * @param activity
     */
    public static void removeActivity(Activity activity){
        if(activity != null && activities.contains(activity))
            activities.remove(activity);
    }

    /**
     * 移除所有的Activity，即退出应用
     */
    public static void finishAll(){
        for(Activity activity : activities){
            if(activity != null && !activity.isFinishing()){
                activity.finish();
            }
        }
    }
}

到这里，我们运行一下项目，观察是否能达到预期结果，如图：

问题来了，上方的标题栏并没有显示出来，于是，变检查了很多次代码，仍然不能解决，后来，上网查相关资料的时候，得到了答案

PagerTabStrip not showing in ViewPager in app targeting Android 6.X (N)

给出的解决方法是：

((ViewPager.LayoutParams) pagerTabStrip.getLayoutParams()).isDecor = true;

再次运行，如下：