一. 继承关系

1
2
3
4
5
6
java.lang.Object
  ↳android.view.View
    ↳android.view.ViewGroup
      ↳android.widget.FrameLayout
        ↳android.widget.HorizontalScrollView
          ↳com.google.android.material.tabs.TabLayout

Tablayout继承自HorizontalScrollView，用作页面切换指示器，因使用简便功能强大而广泛使用在App中。

需要注意一点，AndroidStuid默认是没有添加对 TableLayout的依赖的。

添加的方式有两种：

  1. 点击下载的按钮，TabLayout，系统就会自动帮你添加依赖。

  1. 主动添加依赖，不推荐。

二. TabLayout的Xml属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
app:tabIndicatorColor：      //指示线的颜色
app:tabIndicatorHeight：     //指示线的高度
app:tabIndicatorFullWidth：  //指示线的宽度 默认true
                             //true-和Tab的宽度一致
                             //false-和字体的范围一致

android:background：         //tab的背景颜色

app:tabBackground：          //tab选中或者没有选中的背景（颜色或者图片）
//="@drawable/my_tab_background"
//
//my_tab_background.xml
//<?xml version="1.0" encoding="utf-8"?>
//<selector xmlns:android="http://schemas.android.com/apk/res/android">
 //   <item android:drawable="@color/colorRed" android:state_selected="false"/>
//    <item android:drawable="@color/colorBlue" android:state_selected="true"/>
//</selector>

app:tabGravity：             //tab的布局方式，两个值
                             //GRAVITY_CENTER （内容中心显示） 
                             //GRAVITY_FILL （内容尽可能充满TabLayout）。

app:tabContentStart：        //相对起始位置tab的Y轴偏移量

app:tabTextColor：           //tab正常状态的颜色
app:tabSelectedTextColor：   //tab选中时的字体颜色

app:tabTextAppearance：tab的字体样式style
//="@style/MyTextAppearance"
//
//<!--Tab字体大小-->
//<style name="MyTextAppearance" parent="TextAppearance.AppCompat">
//        <item name="textAllCaps">true</item>
//        <item name="android:textAllCaps">true</item>
//        <item name="android:textSize">20sp</item>
//        <item name="android:textStyle">bold</item>
//</style>

app:tabMode：  //默认是fixed，固定的；scrollable：可滚动的

app:tabRippleColor：         //设置为@null就可以取消点击的水波纹效果

app:tabPadding：             //设置tab的内边距（上下左右）。
app:tabPaddingTop：          //设置tab的上方内边距。
app:tabPaddingBottom：       //设置tab的底部内边距。
app:tabPaddingStart：        //设置tab的左侧内边距。
app:tabPaddingEnd：          //设置tab的右侧内边距。

三. TabLayout的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//添加一个TabLayout.OnTabSelectedListener监听事件，当tab选择更改时，它将被调用。
addOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）

//删除所有以前添加的TabLayout.OnTabSelectedListeners。
clearOnTabSelectedListeners（）

//向此布局添加选项卡。
addTab（TabLayout.Tab tab，boolean setSelected）
addTab（TabLayout.Tab tab，int position）
addTab（TabLayout.Tab tab）
addTab（TabLayout.Tab tab，int position，boolean setSelected）

//添加子视图。
addView（View child，int index）
addView（View child）
addView（View child，ViewGroup.LayoutParams params）
addView（View child，int index，ViewGroup.LayoutParams params）

//返回当前所选标签的位置。
int getSelectedTabPosition（）

//返回指定位置的tab。
TabLayout.Tab getTabAt（int index）

//返回当前在操作栏中注册的选项卡数。
int getTabCount（）

//设置TabLayout的布局方式，GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）
setTabGravity（int gravity）
//返回当前的标签tab的布局方式，GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）
int getTabGravity（）

//设置tab选项卡的行为模式,MODE_FIXED* （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。
setTabMode（int mode）
//返回tab选项卡的行为模式,MODE_FIXED* （固定的tab）和 MODE_SCROLLABLE（滑动的tab）
int getTabMode（）

//获取用于选项卡的不同状态（正常，已选择）的文本颜色。
ColorStateList getTabTextColors（）

//从操作栏中删除所有选项卡，并取消选择当前选项卡。
removeAllTabs（）

从布局中删除选项卡。
removeTab（TabLayout.Tab tab）
removeTabAt（int position）

//设置选项卡的滚动位置，当标签tab显示为滚动容器（如ViewPager）的一部分时，此功能非常有用。
//位置int：当前滚动位置
//positionOffset float：表示从位置偏移的[0, 1)的值。
//updateSelectedText boolean：是否更新文本的选择状态。。
setScrollPosition（int position，float positionOffset，boolean updateSelectedText）

//设置选中的tab的指示器（下划线）的高度。
setSelectedTabIndicatorHeight（int height）

//设置选中的tab的指示器（下划线）的颜色。
setSelectedTabIndicatorColor（int color）

//设置用于选项卡的不同状态（常规，选定）的文字颜色。
setTabTextColors（int normalColor，int selectedColor）
setTabTextColors（ColorStateList textColor）

//将TabLayout与ViewPager链接在一起。
setupWithViewPager（ViewPager viewPager）
//将TabLayout与ViewPager链接在一起，当更改PagerAdapter时，TabLayout是否更新由autoRefresh决定。
setupWithViewPager（ViewPager viewPager，boolean autoRefresh）

四. 各种样式的例子

Tablayout-Github

1. 正常使用

① 设置字体的样式

1
2
3
4
5
6
7
8
9
<!--style样式文件-->

<style name="MyTextAppearance" parent="TextAppearance.AppCompat">
    <!--true: 英文默认全大写
         false: 英文分大小写     -->
    <item name="android:textAllCaps">true</item>
    <item name="android:textSize">20sp</item>
    <item name="android:textStyle">bold</item>
</style>

② 设置背景的样式

1
2
3
4
5
6
7
8
9
10
11
12
<!--my_tab_background.xml-->

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--未选中时的背景颜色-->
    <item android:drawable="@color/colorRed" 
             android:state_selected="false"/>
             
    <!--选中时的背景颜色-->
    <item android:drawable="@color/colorGreen" 
             android:state_selected="true"/>
</selector>

③ 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"

    app:tabBackground="@drawable/my_tab_background"

    app:tabPadding="0dp"

    app:tabTextColor="#ffffff"
    app:tabSelectedTextColor="#000000"

    app:tabIndicatorHeight="10sp"
    app:tabIndicatorColor="#000000"

    app:tabTextAppearance="@style/MyTextAppearance"
    />
1
2
3
4
5
6
7
/**
 * 第一个
 */
TabLayout tabLayout1 = findViewById(R.id.tab_1);
tabLayout1.addTab(tabLayout1.newTab().setText("Tab1"));
tabLayout1.addTab(tabLayout1.newTab().setText("Tab2"));
tabLayout1.addTab(tabLayout1.newTab().setText("Tab3"));

2. 不设置指示线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"

app:tabBackground="@drawable/my_tab_background"

app:tabPadding="0dp"

app:tabTextColor="#ffffff"
app:tabSelectedTextColor="#000000"

app:tabIndicatorHeight="0sp"
app:tabIndicatorColor="#000000"
app:tabIndicatorFullWidth="true"

app:tabTextAppearance="@style/MyTextAppearance"
/>
1
2
3
4
5
6
7
/**
 * 第二个
 */
TabLayout tabLayout2 = findViewById(R.id.tab_2);
tabLayout2.addTab(tabLayout2.newTab().setText("Tab1"));
tabLayout2.addTab(tabLayout2.newTab().setText("Tab2"));
tabLayout2.addTab(tabLayout2.newTab().setText("Tab3"));

3. 指示线宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"

    app:tabBackground="@drawable/my_tab_background"

    app:tabPadding="0dp"

    app:tabTextColor="#ffffff"
    app:tabSelectedTextColor="#000000"
    app:tabIndicatorHeight="10sp"
    app:tabIndicatorFullWidth="false"

    app:tabIndicatorColor="#000000"

    app:tabTextAppearance="@style/MyTextAppearance"
    />
1
2
3
4
5
6
7
/**
 * 第三个
 */
final TabLayout tabLayout3 = findViewById(R.id.tab_3);
tabLayout3.addTab(tabLayout3.newTab().setText("Tab1"));
tabLayout3.addTab(tabLayout3.newTab().setText("Tab2"));
tabLayout3.addTab(tabLayout3.newTab().setText("Tab3"));

4. 添加图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"

    app:tabBackground="@drawable/my_tab_background"

    app:tabPadding="0dp"

    app:tabTextColor="#ffffff"
    app:tabSelectedTextColor="#000000"
    app:tabIndicatorHeight="10sp"
    app:tabIndicatorFullWidth="true"

    app:tabIndicatorColor="#000000"

    app:tabTextAppearance="@style/MyTextAppearance"
    />
1
2
3
4
5
6
7
8
9
10
/**
 * 第四个
 */
final TabLayout tabLayout4 = findViewById(R.id.tab_4);
tabLayout4.addTab(tabLayout4.newTab().setText("Tab1"));
tabLayout4.addTab(tabLayout4.newTab().setText("Tab2"));
tabLayout4.addTab(tabLayout4.newTab().setText("Tab3"));
for (int i = 0; i < tabLayout4.getTabCount(); i++) {
    tabLayout4.getTabAt(i).setIcon(R.mipmap.ic_launcher_round);
}

5. 自定义图标位置

① 自定义的布局xml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--tab_layout.xml-->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:orientation="horizontal"
    android:gravity="center">
    
    <ImageView
        android:id="@+id/imgView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginStart="8dp"
        />

</LinearLayout>

② 加载自定义布局，绑定数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 *
 * @param position
 * @return
 */
private View myTabView(int position,String[] texts,int[] resources){
    //加载布局
    View tabView = LayoutInflater.from(this).inflate(R.layout.tab_layout, null);

    //找到对应的控件
    ImageView imageView = tabView.findViewById(R.id.imgView);
    TextView textView = tabView.findViewById(R.id.textView);

    //设置对应内容
    imageView.setImageResource(resources[position]);
    textView.setText(texts[position]);

    return tabView;
}

③ 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_5"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"

    app:tabBackground="@drawable/my_tab_background"

    app:tabPadding="0dp"

    app:tabTextColor="#ffffff"
    app:tabSelectedTextColor="#000000"
    app:tabIndicatorHeight="10sp"
    app:tabIndicatorFullWidth="true"

    app:tabIndicatorColor="#000000"

    app:tabTextAppearance="@style/MyTextAppearance"
    
    <!--设置点击是否有水波纹效果-->
    <!--app:tabRippleColor="@null"-->
    />
1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 第五个
 */
final TabLayout tabLayout5 = findViewById(R.id.tab_5);
String[] texts = {"Tab1","Tab2","Tab3"};
int[] resources = {R.mipmap.ic_launcher_round,R.mipmap.ic_launcher_round,R.mipmap.ic_launcher_round};
for (int i = 0; i < texts.length; i++) {
    tabLayout5.addTab(tabLayout5.newTab());
}
for (int i = 0; i < tabLayout5.getTabCount(); i++) {
    tabLayout5.getTabAt(i).setCustomView(myTabView(i,texts,resources));
}

6. 滚动模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_6"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"

    android:background="#fbf4f2"

    app:tabPadding="0dp"

    app:tabTextColor="#000000"
    app:tabSelectedTextColor="#ff7a61"
    app:tabIndicatorHeight="2sp"
    app:tabIndicatorFullWidth="true"

    app:tabIndicatorColor="#ff7a61"

    app:tabMode="scrollable"
    />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 第六个
 */
final TabLayout tabLayout6 = findViewById(R.id.tab_6);
tabLayout6.addTab(tabLayout6.newTab().setText("Tab1"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab2"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab3"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab4"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab5"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab6"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab7"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab8"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab9"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab10"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab11"));
tabLayout6.addTab(tabLayout6.newTab().setText("Tab12"));

五. 结合 ViewPagger

参考：ViewPager

六. 完善的内容

1. 静态添加 TabItem 的当时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<android.support.design.widget.TabLayout

	android:layout_width="wrap_content"

	android:layout_height="wrap_content">
	

	<android.support.design.widget.TabItem

			android:layout_width="wrap_content"

			android:layout_height="wrap_content"

			android:text="Tab1"/>

			...

</android.support.design.widget.TabLayout>

参考文章

第三方库：XTabLayout

手把手教你如何在Android Studio 中配置Android Design Support Library

Tablayout使用全解，一篇就够了

TabLayout的属性介绍

Design库-TabLayout属性详解

设置tablayout的字体大小

android TabLayout 选中改变背景

TabLayout设置下划线(Indicator)宽度

Android开发TabLayout取消水波纹效果以及按下阴影效果

android appcompat_v7 去掉点击效果或者自定义水波纹颜色

Android TabLayout 与ViewPager滑动页面的实现