TabLayout基本属性全解
前⾔
之前讲过⼀篇TabLayout实现顶部导航的⽂章，这篇⽂章，来详细介绍下TabLayout的⼀些基本使⽤，让⼤家以后更加⽅便的使⽤。这篇⽂章涉及的内容有：
1. 控件库的导⼊
2. TabLayout导航UI的快速实现
3. TabLayout均分显⽰的问题
4. 和ViewPager的联动
5. 加⼊Padding
6. Tab的宽度限制
7. Tab的“Margin”
8. 设置TabLayout选中和没选中时字体颜⾊
9. 改变指⽰器下标的颜⾊
10. 改变整个TabLayout的颜⾊
11. 改变TabLayout内部字体⼤⼩
12. 改变指⽰器下标的⾼度
13. 添加图标
14. 默认选中某项
15. 监听事件
16. TabLayout点击事件
17. 项⽬截图及效果图
⼀.控件库的导⼊
TabLayout属于android的Design库中的控件，所以需要在使⽤之前在项⽬的app对应的adle中导⼊该库：
//TabLayout
implementation 'com.android.support:design:27.1.1'
implementation 'com.android.support:support-v4:27.1.1'
⼆.TabLayout导航UI的快速实现
TabLayout导航ui的实现有两种⽅式，xml的实现和代码的实现。
1.1 xml实现TabLayout导航栏
直接在TabLayout内部加⼊TabItem即可，
<?xml version="1.0" encoding="utf-8"?>
<straint.ConstraintLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
xmlns:tools="schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="stdemo.main.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab2"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab3"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab4"/>
</android.support.design.widget.TabLayout>
</straint.ConstraintLayout>
1.2 代码实现TabLayout导航栏
先声明⼀个导航代码实现如下：
@BindView(R.id.tablayout)
TabLayout mTabLayout;
private String mTitles[] = {
"上海", "头条推荐", "⽣活", "娱乐⼋卦", "体育",
"段⼦", "美⾷", "电影", "科技", "搞笑",
"社会", "财经", "时尚", "汽车", "军事",
"⼩说", "育⼉", "职场", "萌宠", "游戏",
"健康", "动漫", "互联⽹"};
//TabLayout的基本使⽤
for(int i=0;i<4;i++){
TabLayout.Tab wTab();
tab.setTag(i);
tab.setText(mTitles[i]);
mTabLayout.addTab(tab);
｝
这两种⽅法的区别是xml添加的只能是固定的⼏个item，若item的个数超过⼀屏宽度则不能使⽤这种⽅式布局，⽽代码布局则能实现item的个数超过⼀屏宽度的布局。
下⾯给出效果图
三.TabLayout均分显⽰的问题
当导航过多的时候，使⽤app:tabMode="scrollable"属性，能实现滑动均分，当导航不⾜⼀屏的时候，去掉app:tabMode="scrollable"才能实现均分展⽰.
xml中显⽰如下：
<?xml version="1.0" encoding="utf-8"?>
<straint.ConstraintLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
xmlns:tools="schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="stdemo.main.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
</android.support.design.widget.TabLayout>
</straint.ConstraintLayout>
代码如下：
for(int i=0;i<4;i++){
TabLayout.Tab wTab();
tab.setTag(i);
tab.setText(mTitles[i]);
mTabLayout.addTab(tab);
｝
效果图：
当item个数很多的时候，xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<straint.ConstraintLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
xmlns:tools="schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="stdemo.main.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
</android.support.design.widget.TabLayout>
</straint.ConstraintLayout>
代码如下：
//TabLayout的基本使⽤
for(int i=0;i<mTitles.length;i++){
TabLayout.Tab wTab();
tab.setTag(i);
tab.setText(mTitles[i]);
mTabLayout.addTab(tab);
}
效果图如下：
四.和ViewPager的联动
之前已经讲过TabLayout和ViewPager联动的知识了，有兴趣的可以了解下这篇⽂章，这⾥就不做详细讲解了。
五.加⼊Padding
设置Tab内部的⼦控件的Padding：
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"
设置整个TabLayout的Padding：
android layout布局app:paddingEnd="xxdp"
app:paddingStart="xxdp"
六.Tab的宽度限制
设置最⼤的tab宽度：
app:tabMaxWidth="xxdp"
设置最⼩的tab宽度：
app:tabMinWidth="xxdp"
七.Tab的“Margin”
TabLayout开始位置的偏移量：
app:tabContentStart="50dp"
⼋.设置TabLayout选中和没选中时字体颜⾊
设置选中和没选中的颜⾊可以在xml中设置，也可以在代码中设置
8.1xml中设置
<?xml version="1.0" encoding="utf-8"?>
<straint.ConstraintLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
xmlns:tools="schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="stdemo.main.MainActivity">
<!--app:tabSelectedTextColor="@color/red"//选中⾊-->
<!--tabTextColor="@color/blue"//未选中⾊-->
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:tabSelectedTextColor="@color/red"
app:tabTextColor="@color/blue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
</android.support.design.widget.TabLayout>
</straint.ConstraintLayout>
8.2代码中设置
代码中设置的时候，xml不需要做相关设置：
<?xml version="1.0" encoding="utf-8"?>
<straint.ConstraintLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
xmlns:tools="schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="stdemo.main.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
</android.support.design.widget.TabLayout>
</straint.ConstraintLayout>
代码设置如下：
//设置tab⽂本的没有选中（第⼀个参数）和选中（第⼆个参数）的颜⾊
mTabLayout.setTabTextColors(Color.GREEN, Color.RED);
效果图如下：
由于篇幅原因，后⾯⼏个知识点就不做详细介绍了，⽂末会给出相关知识点的效果图，具体的⼤家可以看demo中的介绍，这⾥我主要强调⼏点：
1. 在"1
2.改变指⽰器下标的⾼度"中需要注意的是：
当设置指⽰器的⾼度为0dp，或者设置指⽰器颜⾊透明，即可实现没有下标指⽰器的效果。
2. 在"15. 监听事件"中需要注意的是：
初始化进⼊的时候，监听事件的三个⽅法都不会执⾏，假设此时你的item选中的是index=0，当你点击index=1的那项
时，onTabUnselected(TabLayout.Tab tab)执⾏的是index=0的tab，onTabSelected(TabLayout.Tab tab)会执⾏index=1的Tab，此时onTabReselected(TabLayout.Tab tab)不会执⾏。当item已经选中的是index=1的时候，你再点击这个index=1的item的时
候，onTabSelected(TabLayout.Tab tab)和onTabUnselected(TabLayout.Tab tab)不会执⾏，onTabReselected(TabLayout.Tab tab)会执⾏，tab为你当前点击的tab。
3. 在""中需要注意的是：
其中switch-case中即是你要处理的点击事件的逻辑，这⾥需要注意的是
if(!TabAt(position).isSelected()){
return;
}
这段代码即表⽰只有当前item被选中的情况下，点击事件才⽣效。这个⽅法可以⽤来处理TabLayout和ViewPager联动的情况下，仍需要在item上添加处理事件的情况。
⼗七.项⽬截图及效果图
17.1 项⽬截图
17.2 改变指⽰器下标的颜⾊效果图
17.3 改变整个TabLayout的颜⾊效果图
17.4 改变TabLayout内部字体⼤⼩效果图
17.5 改变指⽰器下标的⾼度效果图
17.6 添加图标效果图
17.7 TabLayout点击事件效果图
ok，今天关于TabLayout相关知识就讲到这⾥了。
TabLayout基本属性全解
注：本⽂著作权归作者，由demo⼤师代发，拒绝转载，转载需要作者授权
发表评论