MaterialDesign系列文章（八）TabLayout的使用

本文链接：https://blog.csdn.net/qq_15538877/article/details/80303383

祝天下所有的母亲，母亲节快乐
今天是母亲节，希望所有在外漂泊的程序员，动动手给母亲打个电话，告诉她我们长大了，谢谢你这么多年的照顾！让她们在这个简单而又不平凡的日子里，增添一缕欣慰！

谨以此献给在外漂泊和奋斗的程序员！！！

游子吟

作者：孟郊
慈母手中线，游子身上衣。
临行密密缝，意恐迟迟归。
谁言寸草心，报得三春晖。

今天我们来说说TabLayout在开发中的一些使用集锦！

本文知识点：

TabLayout是什么？
TabLayout的一下常见设置；
TabLayout的基本使用；
TabLayout的一些特殊配置；
TabLayout的一些常见案例。

1. TabLayout是什么？

TabLayout提供了一个水平布局来显示选项卡。之前我们在使用选项卡的时候都是使用RadioGroup和RadioButton实现的，也有使用三方框架的。其实最主要的是没有TabLayout的动画效果，代码还很复杂！

2. TabLayout的一些常见设置

2.1 基本的属性设置

app:tabBackground 设置背景
app:tabGravity 设置填充类型的
- fill 全部填充默认的
- center 居中，但是这个是包裹内容的
tabIndicatorColor 设置选项卡底部横线的颜色
tabIndicatorHeight 设置选项可底部横线的高度
tabMaxWidth 设置最大宽度
tabMinWidth 设置最小宽度
tabMode 设置模式
- MODE_FIXED 固定选项卡，可以显示所有选项卡，但是多的话不建议使用
- MODE_SCROLLABLE 可以滑动的选项卡，这里涉及到上面的最大宽度，可以自行设置
app:tabPadding 设置padding 可以分别设置左上右下的padding距离
app:tabSelectedTextColor 设置选择的文字颜色
app:tabTextAppearance 设置文字的样式
app:tabTextColor 设置默认的文字的颜色
TabItem 内部维护的标签
- android:icon 设置图标的

基本的设置就这么多，上一张基本设置的效果图

基本设置的效果图

代码是这样滴

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".tablayout.TabLayoutActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="TabLayout的展示"
            android:textColor="@android:color/white"
            android:textSize="16sp" />
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/colorAccent"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:tabGravity="fill"
        app:tabIndicatorColor="#fcb314"
        app:tabIndicatorHeight="5dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="@android:color/white">

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_dialer_sip_white_24dp"
            android:text="标签1" />

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@drawable/ic_search_black_24dp"
            android:text="标签2" />
    </android.support.design.widget.TabLayout>
</android.support.constraint.ConstraintLayout>

2.2 关联ViewPager的操作

这应该是最常见的操作了。一般由TabLayout都会关联ViewPager，但是由很多APP是通过FragmentTransaction进行替换的。这里先不去说关于这种方法的实现，感兴趣的同学可以自己研究一下！

2.2.1 当你在布局文件中设置了相应的标签

对于这种情况，基本上是标签固定的情况的设置，直接通多代码关联一下就可以了！

setupWithViewPager(@Nullable ViewPager viewPager)
setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh)

由两个相应的重载方法，这个autoRefreshsh是是否需要布局更新的，也就是说你TabLayout的标签增加的时候，是否需要更新(但是如果你新增了标签的话，需要更改相应的ViewPager的适配器中的条目)！如果你想选择一个指定的条目，可以通过mTb.getTabAt(i).select();进行相应的选择！！！

2.2.2 当你的标签是从服务器过来的时候

很多APP的标签内容是通过服务器过来的，那么就存在一个动态改变的操作了，往往是通过代码去实现条目的，放心。也很简单，像这样！！！

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

就可以动态的添加tab了。

坑

你在布局文件或者动态设置的标签文字的时候，发现文字不见了？what？？？我明明设置了。。。这里你只需要重写一下ViewPager适配器中的getPageTitle(int position)方法，把标题设置进去就好了。其实这个只是针对于标签固定的内容设置的，但是一般我们的标签都是不确定个数的，所以一般都是这样设置的。

3. TabLayout的一些特殊配置

3.1 更改TabLayout显示的文字

许多挑剔的产品或者美工，会提出各种各样的关于文字显示方面的内容，每次我都觉得一个字体就影响用户体验了？所以当时我的想法是酱紫的。。。

其实是可以改的，但是真的就影响用户体验吗？你可以这样改！

    <!--TabLayout的文字修改-->
    <style name="TabLayoutStyle">
        <item name="android:textSize">20sp</item>
        <!--这个是控制你输入的字母大小写的！-->
        <item name="android:textAllCaps">false</item>
    </style>

然后通过app:tabTextAppearance="@style/TabLayoutStyle"设置进去就好了。这里说明一下，其实TabLayout里面默认由三种文字状态
- TextAppearance.Large
- TextAppearance.Medium
- TextAppearance.Small
感兴趣的同学可以设置看看效果！

3.2 关于TabLayot图标的问题

默认情况下，你设置的图标是在上边的，但是产品跑过来说，放在左边把！这样好看一点，好看个大头鬼啊！天天就改改改的…..我的终极绝招是通过代码把里面的内容全部自定义，其实很简答的啊！TabLayout给我们提供了一个方法，这个方法是Tab的setCustomView()设置你想要的布局的，但是一下几点内容需要注意的！也是我踩了很久的坑。。。

getCustomView(); 空指针异常的问题。 起初我还以为我哪里写错了，网上各种找，各种对比，后来我发现了一个问题，如果你在 setupWithViewPager();之前调用添加自定义view的方法(也就是setCustomView())的时候，那么后面不管你怎么取都会是空，然后我就在像之前的标题没有出现的问题，我有了一个大胆的假设，其实你的Tab生成的时机应该是关联ViewPager之后，所以在这之前你设置的标题才不显示的，但是你传入标题的时候，设置标题，因为ViewPager认为标题是固定的，所以这种方式的时候，才会有标题，大家注意一下这里就好了！！！顺序问题。。。
设置自定义后的文字显示问题。 当你设置了自定义View的时候，文字的变色问题就很明显了，这个时候你只要写一个selector就可以解决问题了！

这样无论图标的问题就不是问题了，你想放在哪里都可以了。对于美工不能怂。

3.3 关于TabLayout的选中背景

在相应的样式中设置
@drawable/tab_background这个样式也是一个状态选择器，自己写喜欢的就好了！

3.4 关于TabLayout的监听问题

有的时候会有监听点击了那么TabLayout的操作，关于TabLayout的监听，这里就有必要说明一下了！

addOnTabSelectedListener(@NonNull OnTabSelectedListener listener)

        TabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //选择的Tab
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //推出选中的Tab
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //重新选中Tab的操作
            }
        });