Android TabLayout：固定Tab指示器宽度为4dp并居中显示（适配ViewPager2）

嘿，刚好之前在项目里碰到过一模一样的需求！结合你用的Material 1.3.0和Target SDK 30，给你两个靠谱的实现方案，亲测有效～

方案一：自定义指示器Drawable（推荐，无反射更稳定） #

这种方法直接给TabLayout设置一个自定义的Drawable作为指示器，完全可控，不用担心版本兼容问题。

步骤1：创建自定义Indicator Drawable #

新建一个FixedWidthTabIndicator.kt文件，代码如下：

import android.graphics.Canvas
import android.graphics.ColorFilter
import android.graphics.Paint
import android.graphics.PixelFormat
import android.graphics.drawable.Drawable
import android.content.Context
import android.util.TypedValue
import androidx.core.content.ContextCompat

class FixedWidthTabIndicator(private val context: Context) : Drawable() {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        // 替换成你需要的指示器颜色
        color = ContextCompat.getColor(context, R.color.tab_indicator_color)
        style = Paint.Style.FILL
    }
    // 固定指示器宽度4dp
    private val indicatorWidth = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        context.resources.displayMetrics
    ).toInt()

    override fun draw(canvas: Canvas) {
        val bounds = bounds
        // 计算居中的X坐标：容器中心 - 指示器宽度的一半
        val startX = bounds.centerX() - indicatorWidth / 2f
        // 绘制固定宽度的矩形指示器
        canvas.drawRect(
            startX,
            bounds.top.toFloat(),
            startX + indicatorWidth,
            bounds.bottom.toFloat(),
            paint
        )
    }

    override fun setAlpha(alpha: Int) {
        paint.alpha = alpha
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        paint.colorFilter = colorFilter
    }

    override fun getOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }
}

步骤2：给TabLayout设置自定义指示器 #

在Activity/Fragment里初始化TabLayout时，添加以下代码：

val tabLayout = findViewById<TabLayout>(R.id.tabLayout)
// 设置自定义指示器
tabLayout.setIndicator(FixedWidthTabIndicator(this))
// 设置指示器高度（比如2dp，根据需求调整）
tabLayout.setSelectedTabIndicatorHeight(TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP,
    2f,
    resources.displayMetrics
).toInt())

// 绑定ViewPager2（常规操作）
val viewPager2 = findViewById<ViewPager2>(R.id.viewPager2)
TabLayoutMediator(tabLayout, viewPager2) { tab, position ->
    tab.text = "Tab ${position + 1}" // 替换成你的Tab标题
}.attach()

步骤3：确保Tab标题居中 #

在布局文件里给TabLayout添加tabGravity="center"属性，让标题居中，这样指示器居中才更协调：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabMode="fixed" <!-- 固定Tab数量用fixed，滚动用scrollable -->
    app:tabTextColor="@color/tab_unselected_color"
    app:tabSelectedTextColor="@color/tab_selected_color" />

方案二：反射修改默认指示器（快速实现，依赖版本） #

如果你不想写自定义Drawable，也可以通过反射修改默认SlidingTabIndicator的宽度，适合快速验证效果，但要注意Material库版本变化可能导致失效（你的1.3.0版本是没问题的）。

代码示例：

tabLayout.post {
    try {
        // 获取TabLayout内部的SlidingTabIndicator实例
        val slidingTabField = TabLayout::class.java.getDeclaredField("slidingTabIndicator")
        slidingTabField.isAccessible = true
        val slidingTabIndicator = slidingTabField.get(tabLayout) as View

        // 修改指示器宽度为4dp
        val indicatorWidthField = slidingTabIndicator::class.java.getDeclaredField("mIndicatorWidth")
        indicatorWidthField.isAccessible = true
        val fixedWidth = TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            4f,
            resources.displayMetrics
        ).toInt()
        indicatorWidthField.set(slidingTabIndicator, fixedWidth)

        // 刷新视图
        slidingTabIndicator.invalidate()
    } catch (e: Exception) {
        e.printStackTrace()
    }
}

注意事项 #

• 方案一的自定义Drawable可以灵活调整颜色、圆角等样式，比如要圆角的话，把drawRect改成drawRoundRect即可。
• 确保你的TabLayout是Material Components库的com.google.android.material.tabs.TabLayout，不是AppCompat的旧版本。

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