TabLayout一行代码固定宽度

2024-01-17 13:47:31

众所周知，TabLayout未提供固定指示器宽度方法，而网上也已经有了一些解决方案，例如反射、自定义TabView、导入其它依赖。但个人对反射有抵触、又觉得自定义TabView和导入依赖太过沉重，就找了另一种方法："自定义指示器Drawable"。

TabLayout中对指示器样式提供了相当大的灵活性，例如你可以在xml中配置指示器的颜色、高度、圆角、动画效果等，它主要通过设置TabIndicator作为指示器，利用android:drawable配置指示器的样式，下图是它的部分属性：

TabLayout中的TabIndicator的属性

TabIndicator中有两个比较重要的属性：mIndicatorWidth和mIndicatorHeight，分别对应指示器的宽度和高度，但即使你设置了mIndicatorWidth，指示器也不会生效，这是为什么呢？

原因在于TabIndicator是作为装饰绘制在TabView上，换句话说，你并不能直接通过设置mIndicatorWidth来改变指示器的宽度，指示器的实际宽度是由TabView决定的，而TabView的宽度则是由它的内容决定的。

既然TabLayout不提供固定指示器宽度方法，那么可不可以反过来，先固定TabView的宽度，然后再固定指示器的宽度呢？没错，这是一种思路，也是本文将要介绍的方法。

本文提供两种方法来固定TabView的宽度：

使用android:maxWidth属性
使用android:ellipsize属性和android:singleLine属性

方法一：使用 android:maxWidth 属性

TabLayout的每个Tab对应一个TabView，因此我们可以通过设置android:maxWidth属性来限制TabView的最大宽度，进而固定TabView的宽度。示例代码如下：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorHeight="4dp"
    app:tabIndicatorColor="@color/colorPrimary">

    <com.google.android.material.tabs.TabItem
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:maxWidth="100dp"
        android:text="Tab 1" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:maxWidth="100dp"
        android:text="Tab 2" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:maxWidth="100dp"
        android:text="Tab 3" />

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

在示例代码中，我们为每个TabItem设置了android:maxWidth属性，值为100dp，这将限制TabView的最大宽度为100dp。

方法二：使用 android:ellipsize 属性和 android:singleLine 属性

我们可以使用android:ellipsize属性和android:singleLine属性来限制TabView的内容，从而固定TabView的宽度。示例代码如下：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorHeight="4dp"
    app:tabIndicatorColor="@color/colorPrimary">

    <com.google.android.material.tabs.TabItem
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="Tab 1" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="Tab 2" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:ellipsize="end"
        android:singleLine="true"
        android:text="Tab 3" />

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