如何在fixed模式下将TabLayout的TabItem设置为多行排列？

Hey there! Let's cut to the chase: Google's official TabLayout doesn't have a native, out-of-the-box setting to make fixed tabs wrap into multiple lines—both fixed and scrollable modes default to single-row layouts. So there's no "just tweak a few XML attributes" direct fix, but we can extend TabLayout's logic or use a flexible alternative to get the exact multi-line fixed tab behavior you want, without hacky workarounds.

Option 1: Custom TabLayout with Overridden Measurement Logic #

This approach extends the native TabLayout, modifying how it measures its tab strip to support wrapping. It keeps all of TabLayout's built-in features (like indicators, selection animations) while enabling multi-line layout.

Step 1: Create the Custom MultiLineTabLayout Class #

import android.content.Context
import android.util.AttributeSet
import android.view.ViewGroup
import com.google.android.material.tabs.TabLayout

class MultiLineTabLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : TabLayout(context, attrs, defStyleAttr) {

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val tabStrip = getChildAt(0) as ViewGroup
        var totalHeight = 0
        var currentRowWidth = 0
        val parentMaxWidth = MeasureSpec.getSize(widthMeasureSpec)

        // Calculate total height by wrapping tabs into rows
        for (i in 0 until tabStrip.childCount) {
            val tab = tabStrip.getChildAt(i)
            measureChild(tab, widthMeasureSpec, heightMeasureSpec)
            val tabWidth = tab.measuredWidth
            val tabHeight = tab.measuredHeight

            if (currentRowWidth + tabWidth > parentMaxWidth) {
                // Wrap to new row, add tab height to total
                totalHeight += tabHeight
                currentRowWidth = tabWidth
            } else {
                currentRowWidth += tabWidth
            }
        }
        // Add the height of the last row
        totalHeight += tabStrip.getChildAt(tabStrip.childCount - 1).measuredHeight

        // Update TabLayout's measured height to fit all rows
        super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(totalHeight, MeasureSpec.EXACTLY))
    }
}

Step 2: Use the Custom TabLayout in Your XML #

Replace the default TabLayout with your custom class, keeping tabMode="fixed" as you wanted:

<com.yourpackage.name.MultiLineTabLayout
    android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/colorGrayStandard"
    app:tabTextColor="@color/colorWhite">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/device" />
    <!-- Keep your other 6 TabItems here as before -->
</com.yourpackage.name.MultiLineTabLayout>

Option 2: FlexboxLayout for Full Control #

If you want even more flexibility over tab layout (like custom spacing, alignment, or row distribution), use FlexboxLayout as your tab container paired with ViewPager2. This lets you build a multi-line tab bar from scratch while keeping tab-view pager sync.

Step 1: Add Flexbox Dependency #

First, add the Flexbox library to your app-level build.gradle (or build.gradle.kts):

implementation "com.google.android.flexbox:flexbox:3.0.0"

Step 2: Build the Layout in XML #

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexTabContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        app:justifyContent="flex_start"
        app:gap="8dp">

        <!-- Replace TabItems with TextViews for custom tabs -->
        <TextView
            android:id="@+id/tab_device"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingHorizontal="16dp"
            android:paddingVertical="12dp"
            android:text="@string/device"
            android:textColor="@color/colorWhite"
            android:textSize="14sp" />
        <!-- Add the other 6 tab TextViews here -->
    </com.google.android.flexbox.FlexboxLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Step 3: Link Tabs to ViewPager in Code #

In your Activity/Fragment, handle tab clicks and ViewPager selection sync:

val tabViews = listOf(
    tab_device, tab_wikipedia, tab_wikia, tab_youtube,
    tab_goodreads, tab_imdb, tab_yelp
)
val viewPager = findViewById<ViewPager2>(R.id.view_pager)
viewPager.adapter = YourCustomPagerAdapter(this)

// Handle tab clicks to switch ViewPager pages
tabViews.forEachIndexed { index, tab ->
    tab.setOnClickListener {
        viewPager.currentItem = index
    }
}

// Update tab appearance when ViewPager page changes
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        tabViews.forEachIndexed { index, tab ->
            val textColor = if (index == position) {
                resources.getColor(R.color.colorGrayStandard)
            } else {
                resources.getColor(R.color.colorWhite)
            }
            tab.setTextColor(textColor)
            // Optional: Add bold text or underline for selected tabs
        }
    }
})

Quick Notes #

• Option 1 is best if you want to keep using TabLayout's native features (like the sliding indicator) with minimal changes.
• Option 2 gives you full control over tab layout and styling, perfect for custom designs.

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