Android开发笔记（一百四十七）标签布局TabLayout

标签布局TabLayout是MaterialDesign库中的一个新控件，常与工具栏Toolbar搭配使用。大家平时常用的App就有不少采用了TabLayout，比如京东App的商品页，从左到右依次是“商品”、“详情”、“评价”，具体界面如下图所示：


京东的这个页面便是典型的Toolbar+TabLayout效果，实现的话不外乎Toolbar内部嵌套TabLayout，然后TabLayout再通过ViewPager集成多个Fragment页。如此说来其实也不复杂，那还是先看看模拟京东的页面效果图。下面是模拟页面之一的“商品”页：


下面是模拟页面之一的“详情”页：


接下来看看这两个页面互相切换的动图，切换操作可以通过点击顶部的标签文字实现（TabLayout切换页面），也可以通过在下方左右滑动页面实现（ViewPager切换页面）。如下所示：


看完了效果图，再来分析分析具体的实现过程。TabLayout的展现形式类似PagerTabStrip，一样是文字标签带下划线，不同的是，TabLayout允许定制更丰富的样式，它新增的样式属性主要有：
tabBackground : 指定标签的背景。
tabIndicatorColor : 指定下划线的颜色。
tabIndicatorHeight : 指定下划线的高度。
tabTextColor : 指定标签文字的颜色。
tabTextAppearance : 指定标签文字的风格。
tabSelectedTextColor : 指定选中文字的颜色。

而在代码中，TabLayout通过如下方法操作标签：
newTab : 创建新标签。
addTab : 添加一个标签。
getTabAt : 获取指定位置的标签。
setOnTabSelectedListener : 设置标签的选中监听器。该监听器需实现OnTabSelectedListener接口的三个方法，具体说明如下：
onTabSelected: 在标签选中时触发；
onTabUnselected: 在标签取消选中时触发；
onTabReselected: 在标签已选中状态再次选中时触发；

上面的属性和方法说明略显单调，那还是给个具体的代码例子，看看这些属性和方法该如何搭配使用。下面是界面布局的xml文件例子：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"