最简单地实现标签页导航-----TabLayout+ViewPager

上次使用Fragment+ViewPager实现了标签页导航，虽说效果达到了，但是你们有没有觉得，要写好多代码，还有处理好多逻辑。假如每次都要这样写，这么多代码，太没意思啦。可能你会想，要不封装一下吧。可是要怎么封装呢？在你冥思苦想的时候，谷歌早已替你解决好了这个问题。谷歌在Material Design之后，添加了新的控件支持库。在

android.support.design.widget这个包里面有这样的一个控件TabLayout，一看就知道是用来实现Tab导航栏的。下面我来介绍一下它的使用步骤：

第一步：肯定是添加design支持库

{

  compile 'com.android.support:design:23.1.1'
}

第二步：布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.sanisy.study.MainActivity"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:background="@color/colorAccent"
        app:tabTextColor="#ffffff"
        app:tabSelectedTextColor="#ffec00"
        app:tabIndicatorColor="#ffec00"
        android:layout_height="wrap_content">

    </android.support.design.widget.TabLayout>


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

</LinearLayout>

其中tabTextColor是设置导航标题字体的默认颜色，tabSelectedTextColor是设置被选中的标题的颜色，tabIndicatorColor是设置导航栏底部的横条的颜色。为了好看我设置成了选中时的颜色。

第三步：代码操作。
public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager mViewPager;
    private FragmentPagerAdapter pagerAdapter;
    private List<Fragment> fragmentList;
    private PagerFragment1 fragment1;
    private PagerFragment2 fragment2;
    private PagerFragment3 fragment3;

    private String[] mTitles = {"页面1","页面2","页面3"};

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

        initAdapter();
        initViewPager();
        initTabLayout();

    }

    private void initTabLayout(){
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);

        //通过TabLayout的addTab方法，添加顶部的导航标题，其实这样做是没有任何效果的。你会发现根本看不到文字。
//        tabLayout.addTab(tabLayout.newTab().setText("页面1"),false);
//        tabLayout.addTab(tabLayout.newTab().setText("页面2"),true);
//        tabLayout.addTab(tabLayout.newTab().setText("页面3"), false);

        tabLayout.setupWithViewPager(mViewPager);
        //设置默认的选中项方法1
        tabLayout.getTabAt(1).select();
    }

    private void initAdapter(){
        fragmentList = new ArrayList<Fragment>();

        fragment1 = new PagerFragment1();
        fragment2 = new PagerFragment2();
        fragment3 = new PagerFragment3();
        fragmentList.add(fragment1);
        fragmentList.add(fragment2);
        fragmentList.add(fragment3);

        pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        };
    }

    private void initViewPager(){
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(pagerAdapter);
         //设置默认选中的标签的方法2
//        mViewPager.setCurrentItem(1);
    }

}

TabLayout是通过ViewPager的Adapter的getPageTitle方法来设置导航栏的标题的，可以看到我们将TabLayout和ViewPager绑定在了一起
//绑定  
tabLayout.setupWithViewPager(mViewPager);

我们看一下源码就知道了

接着我们找到setTabsFromPagerAdapter这个方法

很清楚的看到跟上面所说的是一致的。效果是出来了，但是我们怎么根据实际情况来设置默认选中的标签呢？首先我想tabLayout.setSelected...(position),结果Android Studio毛都没有提示，于是跟进源码去看了看。看了才知道这个方法是private的，外部无法访问。

我就像能不能拿到mTabStrip,结果发现无法拿到。那么我就想，拿到Tab可不可以也这样setSelected呢，tabLayout.getTabAt(positon).s...，我发现没有setSelected这个方法，倒是出现了select()这个方法，难到就是它了，一点进去果然是它。跟到下面的这个方法。

发现其中调用了setSelectedTabView(position)这个方法，正是上面内部用来设置选中的标签的方法。

好了大功告成，先走了......