通常在ViewPager的上方，我们都会放一个标签指示器与ViewPager进行联动，同样“爱阅”也是遵照这样的设计风格进行设计和实现的。可选择的实现方案其实有很多，比如：TabPageIndicator或者GitHub上的开源框架PagerSlidingTabTrip。但是这些都是第三方的而且也已经比较老了，所以我使用Android自带的控件TabLayout来实现这个效果，而且TabLayout更为强大，因为Tab标签可以使用自定义View并且可以实现多种属性的设置。
首先来看下效果图：
点此进入目录：[干货] 十天 教你从创意到上线APP
一、TabLayout的基本使用
1、在布局中加入该控件
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_main"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="center"
android:background="#D2A2CC"
app:tabMode="scrollable" />
2、在代码中找到并设置
@BindView(R.id.tab_layout_main)
TabLayout mTabLayout;
mTabLayout.addTab(tablayout.newTab().setText("新闻"));
mTabLayout.addTab(tablayout.newTab().setText("天气"));
mTabLayout.addTab(tablayout.newTab().setText("娱乐"));
显示效果
向上滑动还可收缩成这样：
这样我们就把最简单的用法掌握了，但如果你想要往里面加入一些个性化设置也是可以的，比如你想加入图片的话，可以这么办：
mTabLayout.addTab(tablayout.newTab().setText("新闻").setIcon(R.mipmap.icon1));
mTabLayout.addTab(tablayout.newTab().setText("天气").setIcon(R.mipmap.icon2));
mTabLayout.addTab(tablayout.newTab().setText("娱乐").setIcon(R.mipmap.icon3));
二、结合ViewPager施展魔法
基本的设置结束了，那么这个时候我们要实现最开始的效果 —— 滑动ViewPager的同时改变Tab的状态，要真么办呢？
1、首先要准备好ViewPager的数据
在我们上午实现的ViewPagerAdapter中重写getPageTitle()方法，以此返回每个ViewPager的标题的数据，代码如下：
@Override
public CharSequence getPageTitle(int position) {
return mCategoryList.get(position).getName();
}
这个方法里对应返回的值就是我们最终想要显示在Tab中的标题，所以你要可以根据你自己的业务场景来进行实现。
2、把ViewPager和TabLayout进行绑定
代码很简单，一行搞定：
mTabLayout.setupWithViewPager(mViewpager);
没错，setupWithViewPager()是TabLayout自带的方法，就是专门用来和ViewPager视图进行绑定的。如果没有其他问题，你会发现我们的基本视图效果已经实现了，但是如果你想要实现更多的属性效果，可以参看接下来总结的一些常用属性。
三、TabLayout常用属性
1、颜色改变
- 改变选中字体的颜色
app:tabSelectedTextColor="@android:color/holo_orange_light"
- 改变未选中字体的颜色
app:tabTextColor="@color/colorPrimary"
- 改变指示器下标的颜色
app:tabIndicatorColor="@android:color/holo_orange_light"
- 改变整个TabLayout的颜色
app:tabBackground="color"
2、尺寸与图标
- 改变TabLayout内部字体大小
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"
- 改变指示器下标的高度
app:tabIndicatorHeight="4dp"
- 添加图标
mTabLayout.addTab(tabLayout.newTab().setText("Tab A").setIcon(R.mipmap.ic_launcher));
- 内容的显示模式
app:tabGravity="center" // 居中，如果是fill，则是充满
3、宽度限制
- 设置最大的tab宽度
app:tabMaxWidth="xxdp"
- 设置最小的tab宽度
app:tabMinWidth="xxdp"
4、TabLayout的监听事件
选中了某个tab的监听事件OnTabSelectedListener()
tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
@Override
public voidonTabSelected(TabLayout.Tab tab) {
//选中了tab的逻辑
}
@Override
public voidonTabUnselected(TabLayout.Tab tab) {
//未选中tab的逻辑
}
@Override
public voidonTabReselected(TabLayout.Tab tab) {
//再次选中tab的逻辑
}
});
至此为止，我们TabLayout的最常用属性就介绍完毕了，如果你还有更复杂的需求，比如：Tab点击缩放的实现，可以参考该链接：TabLayout使用方法详解
联系方式：
