当 tabmode 设置为可滚动时，TabLayout 不填充屏幕宽度

Question

当 Tabmode 设置为可滚动时，我的 Android TabLayout 不占用全屏宽度 我尝试将模式设置为固定，重力设置为填充，在这种情况下，文本的字体大小会变得非常小。请帮我解决这个问题：
请找到我的以下布局：
选项卡布局：

<com.google.android.material.tabs.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/tab_style"
            android:layout_width="match_parent"

            app:tabMaxWidth="0dp"

            />


Styles:
<style name = "tab_style"  parent="Widget.MaterialComponents.TabLayout">
          <item name="tabGravity">fill</item>
        <item name="tabMode">scrollable</item>
        <item name="textAllCaps">false</item>
        <item name="tabBackground">@color/cg_interactive_elements</item>
        <item name="tabTextColor">@color/cg_tab_text_color</item>
        <item name="tabIndicatorColor">@color/cg_text_light</item>
        <item name="tabTextAppearance">@style/TabText_style</item>
        <item name ="tabSelectedTextColor">@color/cg_text_light</item>
        <item name ="tabIndicatorHeight">5dp</item>
        <item name = "android:layout_height">50dp</item>
            <item name = "tabMaxWidth">0dp</item>
      </style>



    <style name="TabText_style" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
        <item name="android:textAllCaps">false</item>
        <item name ="android:textSize">16sp</item>
        <item name="android:fontFamily">sans-serif</item>
        <item name = "fontWeight">200</item>
        <item name = "android:fillColor">@color/cg_fill_color</item>
        <item name = "borderWidth">4dp</item>
        <item name = "android:gravity">center</item>
        <item name = "android:textAppearance">@style/TextAppearance.AppCompat.Medium</item>
    </style>

总体布局：

  <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="@+id/tablayout_container">


<com.google.android.material.appbar.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="106dp"
    android:background="@color/cg_header_navigation"
    android:id="@+id/app_bar_container">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/top_app_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:titleMarginTop="13dp"
        android:minHeight="?attr/actionBarSize"
        app:menu="@menu/top_app_bar"
        app:layout_scrollFlags="scroll|enterAlways"
        app:titleTextColor="@color/cg_text_light" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/sliding_tabs"
        style="@style/tab_style"
        android:layout_width="match_parent"

        app:tabMaxWidth="0dp"

        />

</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/cg_background"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    />

/>

Answer 1

使用tabMode="scrollable" 时，每个选项卡的宽度都设置为尽可能小，以便将文本换行。这意味着当没有许多标签时，标签布局将不会填充整个屏幕。

如果您使用tabMode="fixed"，则选项卡布局的宽度始终是可用的全宽，并且每个选项卡都会获得相等的空间份额。这意味着如果有很多选项卡，每个选项卡都可能非常小并且被挤压（选项卡布局将无法滚动）。

没有标准的方法可以让选项卡展开以填充所有空间并在需要更多空间时滚动。要实现这一点，您需要一个自定义 TabLayout，如下所示或根据 answers 到 similar questions 中的一些

class ScalableTabLayout : TabLayout {
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val tabLayout = getChildAt(0) as ViewGroup
        if (tabLayout.childCount > 0) {
            val widthPixels = MeasureSpec.getSize(widthMeasureSpec)
            val tabMinWidth = widthPixels / tabLayout.childCount
            tabLayout.forEachChild { it.minimumWidth = tabMinWidth }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }
}

然后在你的布局文件中使用它：

<com.package.name.ScalableTabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMaxWidth="0dp"
    app:tabMode="scrollable" />

tabMaxWidth="0dp" 和 tabMode="scrollable" 都是必需的