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

祝天下所有的母亲，母亲节快乐

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

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

游子吟

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

今天我们来说说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 设置图标的

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

基本设置的效果图

代码是这样滴

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显示的文字

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

image

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

然后通过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的操作
            }
        });

所有的回调都是针对于一个Tab进行操作的。想怎么改变在相应的回调红进行处理就好了！

效果1

效果2

这里上两张效果图，小伙伴们自己想想怎么实现的，如果你不知道怎么实现的话，可以去 我的gitHub上看看怎么实现的。

---

今天的内容就这么多了，别忘了给自己的母亲打个电话！！！see you...