Android 导航条效果实现（三） ViewPager+PagerTabStrip

ViewPager+PagerTabStrip实现Tab效果：（ViewPager默认滑动导航条效果）

public class PagerTabStrip extends PagerTitleStrip

java.lang.Object
    ↳ android.view.View
        ↳android.view.ViewGroup
            ↳ android.support.v4.view.PagerTitleStrip
                ↳ android.support.v4.view.PagerTabStrip

（一）说明

官网原文：
PagerTabStrip is an interactive indicator of the current, next, and previous pages of a ViewPager. 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 method getPageTitle(int) in the adapter supplied to the ViewPager.

For a non-interactive indicator, see PagerTitleStrip.

大致意思：
PagerTabStrip是一个能为ViewPager指示上一个页面、当前页面，下一个页面的可交互的指示器。需要在布局文件中把它写作ViewPager的一个子视图，并设置他的android:layout_gravity属性值为TOP或BOTTOM来把他放置在ViewPager的顶部或者底部。每一页的标题需要在适配器中通过方法getPageTitle(int) 提供给ViewPager。

如果需要不具交互性的指示器，查看PagerTitleStrip。

（二）ViewPager 实现带滑动导航条选项卡的步骤：

1. 特殊的布局文件；
   ViewPager：
   &
   PagerTabStrip：
   或
   PagerTitleStrip：

2. 通过findViewById()方法来实例化ViewPager和PagerTabStrip；

3. 设置PagerTabStrip；
   
   • 通过PagerTabStrip 对象的setTextColor()方法设置导航条文字颜色；
   • 通过PagerTabStrip 对象的setBackgroundColor ()方法设置导航条背景颜色；
   • 通过PagerTabStrip 对象的setDrawFullUnderline()方法设置导航条下方是否有完整下划线颜色；
   • 通过PagerTabStrip 对象的setTabIndicatorColor()方法设置导航条文字下方的指示颜色；
   • 通过PagerTabStrip 对象的setTextSpacing()方法设置导航条文字的间隔。

主要代码如下：
MainActivity.java

package com.noonecode.viewpagerpagertabstripdemo;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.util.TypedValue;

public class MainActivity extends FragmentActivity {

    private ViewPager mViewPager;
    private PagerTabStrip mPagerTabStrip;

    private List titles;// 标题
    private List fragments;// 页面
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initData();
    }

    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mPagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertabstrip);
        mPagerTabStrip.setBackgroundColor(Color.RED);// 背景颜色
        mPagerTabStrip.setTextColor(Color.WHITE);// 标题颜色，这里需要带透明度的颜色值
        mPagerTabStrip.setTabIndicatorColor(Color.YELLOW);// 指示器颜色，这里需要带透明度的颜色值
        mPagerTabStrip.setTextSize(TypedValue.COMPLEX_UNIT_SP, 26);// 字体大小
    }

    private void initData() {
        titles = new ArrayList(Arrays.asList("娱乐", "经济", "教育", "军事"));

        fragments = new ArrayList();
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());
        fragments.add(new Fragment3());
        fragments.add(new Fragment4());

        adapter = new MyAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
    }

    class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

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

activity_main.xml

.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  tools:context="com.noonecode.viewpagerpagertabstripdemo.MainActivity" >

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

.support.v4.view.ViewPager>

每个Fragment中只有一个TextView，代码不再贴出来。

运行效果展示：

注意

• PagerTabStrip设置的颜色值是有透明度的，未设置透明度将看不到预期的效果

（完毕）

导航：
Android 导航条效果实现（一） TabActivity+TabHost
http://blog.csdn.net/qq_33425116/article/details/52573967

Android 导航条效果实现（二） FragmentTabHost
http://blog.csdn.net/qq_33425116/article/details/52575811

Android 导航条效果实现（三） ViewPager+PagerTabStrip
http://blog.csdn.net/qq_33425116/article/details/52577570

Android 导航条效果实现（四） ViewPager+自定义导航条
http://blog.csdn.net/qq_33425116/article/details/52584282

Android 导航条效果实现（五） ActionBar+Fragment
http://blog.csdn.net/qq_33425116/article/details/52587635

Android 导航条效果实现（六） TabLayout+ViewPager+Fragment
http://blog.csdn.net/qq_33425116/article/details/52599818