Android：如何在TabLayout中设置不同宽度的TabItem？

问题描述 #

使用以下XML创建包含三个TabItem的TabLayout时，第三个带汉堡图标的TabItem无法设置为比前两个更窄的宽度：设置TabItem的android:layout_width仅对图标生效，且无法通过width和weight属性控制整体宽度。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    android:elevation="5dp"
    app:tabMaxWidth="0dp"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/main_color">

    <com.google.android.material.tabs.TabItem
        android:id="@+id/myDiaryTab"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="내 일기" />
    
    <com.google.android.material.tabs.TabItem
        android:id="@+id/allDiaryTab"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="우리 일기" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/moreTab"
        android:layout_width="20dp"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_hamburger" />

</com.google.android.material.tabs.TabLayout>

解决方案 #

问题根源在于app:tabGravity="fill"和app:tabMaxWidth="0dp"会强制所有Tab均分父布局宽度，需要调整属性并结合代码或自定义布局实现差异化宽度：

1. 调整TabLayout核心属性 #

先移除app:tabGravity="fill"和app:tabMaxWidth="0dp"，添加app:tabMinWidth="0dp"允许Tab宽度不受默认最小限制：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    android:elevation="5dp"
    app:tabIndicatorColor="@color/main_color"
    app:tabMinWidth="0dp"> <!-- 允许Tab宽度小于默认最小值 -->
    
    <!-- 保留原有TabItem，去掉无效的layout_width设置 -->
    <com.google.android.material.tabs.TabItem
        android:id="@+id/myDiaryTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="내 일기" />
    
    <com.google.android.material.tabs.TabItem
        android:id="@+id/allDiaryTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="우리 일기" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/moreTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_hamburger" />

</com.google.android.material.tabs.TabLayout>

2. 方法一：动态设置第三个Tab宽度 #

在Activity/Fragment中通过代码修改第三个Tab的布局参数，固定其宽度：

Kotlin实现

tabLayout.post {
    val thirdTab = tabLayout.getTabAt(2) // 第三个Tab索引为2
    thirdTab?.view?.apply {
        layoutParams.width = resources.getDimensionPixelSize(R.dimen.tab_more_width) // 比如设置为40dp
        requestLayout()
    }
}

Java实现

tabLayout.post(new Runnable() {
    @Override
    public void run() {
        TabLayout.Tab thirdTab = tabLayout.getTabAt(2);
        if (thirdTab != null) {
            View tabView = thirdTab.getView();
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
            params.width = getResources().getDimensionPixelSize(R.dimen.tab_more_width);
            tabView.setLayoutParams(params);
            tabView.requestLayout();
        }
    }
});

3. 方法二：使用自定义Tab布局（更灵活） #

通过自定义布局精准控制每个Tab的样式，适合复杂需求：

步骤1：创建第三个Tab的自定义布局（layout/custom_tab_more.xml）

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="40dp" <!-- 固定宽度 -->
    android:layout_height="match_parent"
    android:src="@drawable/ic_hamburger"
    android:scaleType="centerInside" />

步骤2：创建前两个文本Tab的自定义布局（layout/custom_tab_text.xml）

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1" <!-- 均分剩余宽度 -->
    android:gravity="center"
    android:textColor="@color/tab_text_color"
    android:textSize="14sp" />

步骤3：在代码中为Tab设置自定义布局

// 为第一个Tab设置文本布局
tabLayout.getTabAt(0)?.setCustomView(R.layout.custom_tab_text)?.let {
    (it as TextView).text = "내 일기"
}
// 为第二个Tab设置文本布局
tabLayout.getTabAt(1)?.setCustomView(R.layout.custom_tab_text)?.let {
    (it as TextView).text = "우리 일기"
}
// 为第三个Tab设置图标布局
tabLayout.getTabAt(2)?.setCustomView(R.layout.custom_tab_more)

这样前两个Tab会均分TabLayout的剩余宽度，第三个Tab保持自定义布局的固定窄宽度，完全满足需求。

内容的提问来源于stack exchange，提问作者Hyejung