祝天下所有的母亲，母亲节快乐
今天是母亲节，希望所有在外漂泊的程序员，动动手给母亲打个电话，告诉她我们长大了，谢谢你这么多年的照顾！让她们在这个简单而又不平凡的日子里，增添一缕欣慰！
谨以此献给在外漂泊和奋斗的程序员！！！
游子吟
作者：孟郊
慈母手中线，游子身上衣。
临行密密缝，意恐迟迟归。
谁言寸草心，报得三春晖。
今天我们来说说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显示的文字
许多挑剔的产品或者美工，会提出各种各样的关于文字显示方面的内容，每次我都觉得一个字体就影响用户体验了？所以当时我的想法是酱紫的。。。
image
其实是可以改的，但是真的就影响用户体验吗？你可以这样改！
<!--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的选中背景
在相应的样式中设置
<item name="tabBackground">@drawable/tab_background</item>这个样式也是一个状态选择器，自己写喜欢的就好了！
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...
网友评论