android 顶部导航TabLayout+ViewPager（包含图标文字样式）

一、实现TabLayout顶部导航的效果的步骤：

1、导入Android Design Support Library即在build.gradle中添加

compile 'com.android.support:design:23.4.0'

2、在布局中使用Tablayout和ViewPager

    <!--这种写法是文档提供的-->
    <android.support.v4.view.ViewPager
        android:layout_below="@id/tablayout"
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top">
        </android.support.design.widget.TabLayout>

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

3、创建Fragment

需注意的是Fragment一定要是v4包下的

public class MyTablayoutFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        String page = getArguments().getString("page");
        TextView textView = new TextView(getActivity());
        textView.setText("fragemnt :"+page);
        return textView;
    }
}

4、创建适配器

适配器为FragmentPageAdapter也是v4包下的

 private class MyAdapter extends FragmentPagerAdapter{
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

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

        @Override
        public int getCount() {
            return mList.size();
        }
        //说明一下：TabLayout要使用这个方法的时候会先remove掉TabLayout添加的所有Tab，所以有的会看不到内容，看一下TabLayout的源码就会明白了
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitle.get(position);
        }
    }

mList为放Fragment的list集合，也就是曾现出来的页面；
mTitle为每页上面的标题，通过getTitle方法获取。

5、核心代码

1）首先找到布局中的两个控件TabLayout和ViewPager(通过findViewById);

 tablayout = (TabLayout) findViewById(R.id.tablayout);
 viewpager = (ViewPager) findViewById(R.id.viewpager);

2）接下来设置tablayout 的样式：

 tablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
 tablayout.setTabGravity(TabLayout.GRAVITY_CENTER);

Android Material Design 中的TabLayout有两个比较有用的属性 app:tabMode、app:tabGravity，
（1）app:tabMode有两个值：fixed和scrollable。
（2）app:tabGravity有两个值：fill和center。
比较常用的是app:tabMode设置值scrollable，以及app:tabGravity设置值center。
比如，当app:tabMode设置值scrollable表示此TabLayout中当子view超出屏幕边界时候，将提供滑动以便滑出不可见的那些子view。
而app:tabGravity设置值center，在有些情况下，比如TabLayout中子view较少需要居中显示时候的情景。

3）接下来为TabLayout设置标题：

 //设置tab的标题，通过adapter中的getTitle
 tablayout.setTabsFromPagerAdapter(myAdapter);

4）接下来为viewPager设置适配器：

 viewpager.setAdapter(myAdapter);

5）最后将Tab Layout和ViewPager相关联：

 //将viewpager与tablayout 相关联
 tablayout.setupWithViewPager(viewpager);

注意： 4）和5）的顺序是不能换的，因为从源码可知，tablayout要从viewpager 上获取adapter，若没有找到adapter则会抛异常。

二、实现导航是图标和文字的样式

如果我们要实现的只是文字的导航，就不会有辣么多事了，直接使用ViewPager的getPageTitle就可以完成；但是要想实现微信那样带有图标的底部导航就有一点点问题了。

1、首先看看setupWithViewPager这个方法都干了啥：

public void setupWithViewPager(@NonNull ViewPager viewPager) {
    final PagerAdapter adapter = viewPager.getAdapter();
    if (adapter == null) {
        throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
    }

    // First we'll add Tabs, using the adapter's page titles
    setTabsFromPagerAdapter(adapter);

    // Now we'll add our page change listener to the ViewPager
    viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(this));

    // Now we'll add a tab selected listener to set ViewPager's current item
    setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));

    // Make sure we reflect the currently set ViewPager item
    if (adapter.getCount() > 0) {
        final int curItem = viewPager.getCurrentItem();
        if (getSelectedTabPosition() != curItem) {
            selectTab(getTabAt(curItem));
        }
    }
}

2、接下来有一个方法应该注意到setTabsFromPagerAdapter

public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) {
    removeAllTabs();
    for (int i = 0, count = adapter.getCount(); i < count; i++) {
        addTab(newTab().setText(adapter.getPageTitle(i)));
    }
}

看到这里是不是就有点蒙圈了呢，removeAllTabs();他把所有的Tab都remove了，然后自己从adapter中的getPageTitle方法中自己添加Tab，这个是不是让你有点抓狂。

3、救星来了

既然他给我们改了，哪么我们在给它改回来（adapter中不写getPageTitle方法哈），取到没个Tab，然后给他们设置文字和图片（icon注意哈，设置ICON时最好用选择器的方式：为了实现点击效果）

在setupWithViewPager之后写如下代码就可以解决问题了：

for (int i = 0; i < mTitleIcons.length; i++) {

//mTitleIcons[i]和mTitleNames[i]是放图片和文字的资源的数组
tablayout.getTabAt(i).setIcon(mTitleIcons[i]).setText(mTitleNames[i]);

//这个是设置选中和没选中的文字的颜色
tablayout.setTabTextColors( Color.parseColor("#666666"),Color.parseColor("#ff6b00"));

}

这样就实现了

这里补充说明一下：有些人会用到setCustomView去进行设置，但是使用了该方法后他的样式就失效了，看起来怪怪的所以还是按上面的方法吧。

TabLayout使用setupWithViewPager()方法绑定Viewpager后不显示文字