Android Material Design 系列之 TabLayout + ViewPager + Fragment 使用详解

前言

本文是 Material Design 系列第三篇：TabLayout + ViewPager + Fragment 基本使用，Material Design 所有控件属于高级 UI，所以 Material Design 控件是中高级工程师必备技能。现在市面上很多主流界面效果都是采用 Material Design 风格控件完成。希望博主 Material Design 系列文章对各位初学者有所帮助，也为自己学习做详细笔记。

一、TabLayout 方法介绍

方法	介绍
addTab（TabLayout.Tab tab）	向此布局添加选项卡
addView（View child）	添加子视图
clearOnTabSelectedListeners()	删除所有以前添加的 TabLayout.OnTabSelectedListeners
addOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）	添加加一个TabLayout.OnTabSelectedListener 监听事件，当 tab 选择更改时，它将被调用
TabLayout.Tab newTab()	创建并返回一个新的 TabLayout.Tab
removeAllTabs()	从操作栏中删除所有选项卡，并取消选择当前选项卡
removeOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）	删除以前通过 addOnTabSelectedListener（OnTabSelectedListener）添加的给定
TabLayout.OnTabSelectedListener，tab 选中监听器
removeTab（TabLayout.Tab tab）	从布局中删除选项卡
removeTabAt（int position）	从布局中删除选项卡
setupWithViewPager（ViewPager viewPager）	将 TabLayout 与 ViewPager 链接在一起
setScrollPosition（int position，float positionOffset，boolean updateSelectedText）	设置选项卡的滚动位置，当标签 tab 显示为滚动容器（如 ViewPager）的一部分时，此功能非常有用
setSelectedTabIndicatorColor（int color）	设置选中的 tab 的指示器（下划线）颜色
setSelectedTabIndicatorHeight（int height）	设置选中的 tab 的指示器的高度
setTabGravity（int gravity）	设置 TabLayout 的布局方式，GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满 TabLayout）
setTabMode（int mode）	设置 tab 选项卡的行为模式,MODE_FIXED* （固定的 tab）和 MODE_SCROLLABLE（滑动的 tab）
setTabTextColors（int normalColor，int selectedColor）	设置用于选项卡的不同状态（常规，选定）的文字颜色
setupWithViewPager（ViewPager viewPager，boolean autoRefresh）	将 TabLayout 与 ViewPager 链接在一起，当更改 PagerAdapter 时，TabLayout 是否更新由 autoRefresh 决定
shouldDelayChildPressedState()	如果此 ViewGroup 的子代或子孙后代按下的状态应该被延迟，则返回 true。 一般来说，应该对可以滚动的容器（如 List）进行此操作。

二、TabLayout 基础使用

TabLayout 的出现，给开发者带来很多便利，99%的 APP 都会有 Tab 栏+ViewPager+Fragment 的基础功能，这好比一个 APP 的魂，所以 TabLayout 很好的诠释了 Google 对开发者越来越友好，操作系统性能不断优化提升，开发者 API 和控件也在不断优化。

文章中效果图界面放在 TabLayout 出生之前，大多数人可能会采用 RadioButton+ViewPager 的方法实现，这也是当时比较主流的实现方式，可能还有使用 HorizontalScrollView+ViewPager 的方式等等…

TabLayout 出现后这种效果实现起来更加便捷，代码耦合度降低，维护成本低。

1、基础使用

1. 只需要在 XML 中定义 TabLayout 即可：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

2. 在 Activity 中设置相关属性：

// 设置TAB滚动显示
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
// 添加TAB标签
for (String mTitle : mTitles) {
   
    tabLayout.addTab(tabLayout.newTab().setText(mTitle));
}

上面这些是最常用，也是最基础的属性，开发中基本都会用到，这才刚刚设置完 TabLayout 栏，只需要几行代码就可以轻松完成，可以拿你以前的代码比较一下。通过以上 2 步就可以达到如下效果：

2、设置 TabLayout 水平滚动

TabLayout 如果 Tab 比较多，类似新闻客户端，需要将 Tablayout 设置水平滚动，否则就会出现 Tab 空白的现象。

使用 setTabMode(int mode)方法

• 参数：mode 有 2 个值，MODE_SCROLLABLE 和 MODE_FIXED，系统默认不滚动 MODE_FIXED，如果需要设置水平滑动，mode 设置为 MODE_SCROLLABLE 即可。

3、设置字体选中颜色

使用 setTabTextColors(int normalColor, int selectedColor)方法

• 参数 1：设置 Tab 字体未选中颜色
• 参数 2：设置 Tab 字体选中颜色

tabLayout.setTabTextColors(getResources().getColor(R.color.colorBlack, null),
        getResources