在Android开发中，Material Design组件库提供的TabLayout是一个非常常用的导航控件。然而，默认样式往往无法满足复杂的UI设计需求，尤其是当设计师要求为每个Tab项设置独立的圆角背景，并精确控制Tab之间的间距（Margin）时。本文将深入探讨如何通过代码动态调整TabLayout的内部布局参数，实现高度定制化的视觉效果。

以下是默认样式与自定义背景及间距样式的对比效果：

动态调整Tab间距的实现原理

要修改Tab项之间的间距，直接在XML中设置属性往往无法达到预期效果。核心思路是获取TabLayout的内部子容器（通常是SlidingTabStrip，它继承自LinearLayout），然后遍历其子View（即每一个Tab项），动态修改它们的MarginLayoutParams。

需要注意的是，这里必须使用Margin而不是Padding。因为TabLayout底部的指示器（Indicator）宽度是根据TabView的实际测量宽度来计算的，如果使用Padding，会导致指示器宽度与视觉上的文字宽度不一致。

核心间距调整代码

以下是经过优化和重构的间距调整工具方法。该方法支持配置常规间距、边缘间距以及内部Padding，使代码更具复用性。

/**
 * 动态调整 TabLayout 中各个 Tab 的 Margin 和 Padding
 * @param tabLayout 目标 TabLayout 实例
 * @param itemMarginDp Tab 之间的常规水平间距 (dp)
 * @param edgeMarginDp 首尾 Tab 距离容器边缘的间距 (dp)
 * @param innerPaddingDp Tab 内部的水平 Padding (dp)
 */
fun configureTabSpacing(
    tabLayout: TabLayout, 
    itemMarginDp: Float = 6f, 
    edgeMarginDp: Float = 16f, 
    innerPaddingDp: Float = 10f
) {
    tabLayout.post {
        val tabContainer = tabLayout.getChildAt(0) as? ViewGroup ?: return@post
        
        val standardMargin = dpToPx(itemMarginDp)
        val edgeMargin = dpToPx(edgeMarginDp)
        val padding = dpToPx(innerPaddingDp)

        for (index in 0 until tabContainer.childCount) {
            val tabView = tabContainer.getChildAt(index)
            val layoutParams = tabView.layoutParams as? ViewGroup.MarginLayoutParams ?: continue

            // 计算左侧 Margin：第一个 Tab 使用边缘间距，其余使用常规间距
            layoutParams.leftMargin = if (index == 0) edgeMargin else standardMargin
            
            // 计算右侧 Margin：最后一个 Tab 使用边缘间距，其余使用常规间距
            layoutParams.rightMargin = if (index == tabContainer.childCount - 1) edgeMargin else standardMargin
            
            tabView.layoutParams = layoutParams
            
            // 设置内部 Padding，确保文字不会紧贴背景边缘
            tabView.setPadding(padding, tabView.paddingTop, padding, tabView.paddingBottom)
        }
    }
}

// 辅助方法：dp 转 px
private fun dpToPx(dpValue: Float): Int {
    return TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP, 
        dpValue, 
        Resources.getSystem().displayMetrics
    ).toInt()
}

XML 布局配置

在布局文件中，我们需要为自定义样式的TabLayout配置特定的属性，例如隐藏默认指示器、设置自定义背景drawable以及取消点击水波纹效果。

<!-- 默认样式的 TabLayout -->
<com.google.android.material.tabs.TabLayout
    android:id="@+id/defaultTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    app:tabMode="scrollable" />

<!-- 自定义背景与间距的 TabLayout -->
<com.google.android.material.tabs.TabLayout
    android:id="@+id/customTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/bg_tab_item"
    app:tabIndicatorHeight="0dp"
    app:tabMode="scrollable"
    app:tabRippleColor="@android:color/transparent"
    app:tabSelectedTextColor="@color/primary_green"
    app:tabTextColor="@color/text_secondary" />

Activity 中的初始化逻辑

最后，在Activity或Fragment中初始化数据，并将自定义间距逻辑应用到目标TabLayout上。

class CustomTabActivity : AppCompatActivity() {

    private val categoryTitles = listOf(
        "欧冠", "英超", "西甲", "意甲", "德甲", 
        "法甲", "中超", "欧联杯", "皇马", "巴萨", "拜仁", "利物浦"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_custom_tab)

        val defaultTabs = findViewById<TabLayout>(R.id.defaultTabLayout)
        val customTabs = findViewById<TabLayout>(R.id.customTabLayout)

        // 填充 Tab 数据
        categoryTitles.forEach { title ->
            defaultTabs.addTab(defaultTabs.newTab().setText(title))
            customTabs.addTab(customTabs.newTab().setText(title))
        }

        // 应用自定义间距和边距配置
        configureTabSpacing(customTabs)
    }
}