1 导入包

29以前：

implementation 'com.android.support:design:28.0.0'

29及以后(使用androidx)：

implementation 'com.google.android.material:material:1.0.0'

2 常用的布局属性

2.1 tabIndicatorFullWidth

tabIndicatorFullWidth表示Tab指示器的宽度是否满宽度，即与Tab布局一样宽度。

//指示器不与Tab的宽度相同，其宽度由Tab中的文字宽度决定
app:tabIndicatorFullWidth="false"
//指示器与Tab的宽度相同，其宽度由Tab的宽度决定，默认为true
app:tabIndicatorFullWidth="true"

app:tabIndicatorFullWidth="false"如图所示：
指示器宽度

app:tabIndicatorFullWidth="true"如图所示：
指示器宽度

2.2 其它属性

属性	描述
tabIndicatorColor	设置tab指示器(tab的下划线)的颜色。
tabIndicatorHeight	设置tab指示器(tab的下划线)的高度。
tabBackground	设置的背景。
tabContentStart	相对起始位置tab的Y轴偏移量。
tabGravity	tab的布局方式，两个值GRAVITY_CENTER （内容中心显示）和 GRAVITY_FILL （内容尽可能充满TabLayout）。
tabMaxWidth	设置tab选项卡的最大宽度。
tabMinWidth	设置tab选项卡的最小宽度。
tabMode	设置布局中tab选项卡的行为模式，两个常量MODE_FIXED （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。
tabPadding	设置tab的内边距（上下左右）。
tabPaddingTop	设置tab的上方内边距。
tabPaddingBottom	设置tab的底部内边距。
tabPaddingStart	设置tab的左侧内边距。
tabPaddingEnd	设置tab的右侧内边距。
tabSelectedTextColor	设置tab被选中时的文字颜色。
tabTextColor	设置tab默认的文字颜色。
tabRippleColor	设置水波纹背景颜色，如果设置为透明则可达到去掉水波纹的效果

3 TabLayout方法介绍

方法	描述
addOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）	添加一个TabLayout.OnTabSelectedListener监听事件，当tab选择更改时，它将被调用。
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）	添加具有指定布局参数的子视图。
clearOnTabSelectedListeners（）	删除所有以前添加的TabLayout.OnTabSelectedListeners。
generateLayoutParams（AttributeSet attrs）	根据提供的属性集返回一组新的布局参数。
getSelectedTabPosition（）	返回当前所选标签的位置。
TabLayout.Tab getTabAt（int index）	返回指定位置的tab。
getTabCount（）	返回当前在操作栏中注册的选项卡数。
getTabGravity（）	返回当前的标签tab的布局方式，GRAVITY_CENTER （内容中心显示）和 GRAVITY_FILL （内容尽可能充满TabLayout）。
getTabMode（）	返回tab选项卡的行为模式,MODE_FIXED* （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。
getTabTextColors（）	获取用于选项卡的不同状态（正常，已选择）的文本颜色。
newTab ()	创建并返回一个新的TabLayout.Tab。
removeAllTabs（）	从操作栏中删除所有选项卡，并取消选择当前选项卡。
removeOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）	删除以前通过addOnTabSelectedListener（OnTabSelectedListener）添加的给定TabLayout.OnTabSelectedListener，tab选中监听器。
removeTab（TabLayout.Tab tab）	从布局中删除选项卡。
removeTabAt（int position）	从布局中删除指定位置的选项卡。
setOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）	API方法24.0.0中已弃用此方法。使用addOnTabSelectedListener（OnTabSelectedListener）和removeOnTabSelectedListener（OnTabSelectedListener）。
setScrollPosition（int position，float positionOffset，boolean updateSelectedText）	设置选项卡的滚动位置，当标签tab显示为滚动容器（如ViewPager）的一部分时，此功能非常有用。位置int：当前滚动位置positionOffset float：表示从位置偏移的[0, 1)的值。updateSelectedText boolean：是否更新文本的选择状态。
setSelectedTabIndicatorColor（int color）	设置选中的tab的指示器（下划线）颜色。
setSelectedTabIndicatorHeight（int height）	设置选中的tab的指示器的高度。
setTabGravity（int gravity）	设置TabLayout的布局方式，GRAVITY_CENTER （内容中心显示）和 GRAVITY_FILL （内容尽可能充满TabLayout）。
setTabMode（int mode）	设置tab选项卡的行为模式,MODE_FIXED* （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。
setTabTextColors（int normalColor，int selectedColor）	设置用于选项卡的不同状态（常规，选定）的文字颜色。
setTabTextColors（ColorStateList textColor）	设置用于选项卡的不同状态（常规，选定）的文字颜色。
setTabsFromPagerAdapter（PagerAdapter adapter）	API方法23.2.0中已弃用此方法。使用setupWithViewPager（ViewPager）将TabLayout与ViewPager链接在一起。当使用该方法时，当更改PagerAdapter时，TabLayout将自动更新。
setupWithViewPager（ViewPager viewPager，boolean autoRefresh）	将TabLayout与ViewPager链接在一起，当更改PagerAdapter时，TabLayout是否更新由autoRefresh决定。
setupWithViewPager（ViewPager viewPager）	将TabLayout与ViewPager链接在一起。
shouldDelayChildPressedState（）	如果此ViewGroup的子代或子孙后代按下的状态应该被延迟，则返回true。一般来说，应该对可以滚动的容器（如List）进行此操作。这防止当用户实际上尝试滚动内容时出现按压状态。由于兼容性原因，默认实现返回true。不滚动的子类通常会覆盖此方法并返回false。

4 两种添加Tab的方式

4.1 使用代码动态添加Tab

xml布局如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/dynamic_tablayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorColor="#1B67DB"
        app:tabIndicatorHeight="5dp"
        app:tabContentStart="10dp"
        app:tabGravity="fill"
        >
    </com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

使用代码动态添加Tab如下：

public class DynamicTabLayoutActivity extends Activity {
    private TabLayout mTabLayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_dynamic);
        initView();
    }

    private void initView() {
        mTabLayout = findViewById(R.id.dynamic_tablayout);

        mTabLayout.addTab(mTabLayout.newTab().setText("TAB1"));
        mTabLayout.addTab(mTabLayout.newTab().setText("TAB2TAB2TAB2"));
        mTabLayout.addTab(mTabLayout.newTab().setText("TAB3"));
        mTabLayout.addTab(mTabLayout.newTab().setText("TAB4"));

    }
}

4.2 静态添加Tab

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorColor="#1B67DB"
        app:tabIndicatorHeight="5dp"
        app:tabContentStart="10dp"
        app:tabRippleColor="#C52C2C"
        app:tabGravity="fill">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab1"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab2Tab2Tab2"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab1"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab1"/>
    </com.google.android.material.tabs.TabLayout>
</LinearLayout>

源码地址

It一zhai男

发布了136 篇原创文章 · 获赞 175 · 访问量 14万+

私信关注

TabLayout简单使用（一）