Tablayout有6个TabItem如何实现单次仅显3个且滑动切换后续3个

实现核心逻辑 #

通过固定单个Tab的宽度、设置滚动模式，配合滑动监听实现3个Tab为一组的滚动效果，同时预留空间露出下一组第一个Tab的边缘。

步骤1：计算单个Tab的固定宽度 #

首先获取屏幕宽度，按单屏显示3个Tab的需求计算每个Tab的宽度，预留少量空间露出下一个Tab的边缘：

// 获取屏幕总宽度
val screenWidth = resources.displayMetrics.widthPixels
// 除以3.1而非3，预留出下一个Tab的显示空间，可根据实际露出需求调整系数
val singleTabWidth = (screenWidth / 3.1).toInt()
// 批量给所有Tab设置固定宽度
for (i in 0 until tabLayout.tabCount) {
    tabLayout.getTabAt(i)?.view?.apply {
        minimumWidth = singleTabWidth
        maxWidth = singleTabWidth
    }
}

步骤2：配置TabLayout基础属性 #

在XML布局中设置TabLayout为可滚动模式，关闭默认的指示器满宽适配：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:tabIndicatorFullWidth="false"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp" />

步骤3：实现3个Tab为一组的滑动逻辑 #

给TabLayout添加选中监听，每次选中Tab时自动滚动到对应分组的起始位置，保证单屏始终展示3个Tab+下一个Tab的边缘：

tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) {
        tab ?: return
        val currentPos = tab.position
        // 计算当前Tab所属的分组起始位置，每3个为一组
        val groupStartPos = currentPos - (currentPos % 3)
        // 平滑滚动到分组起始位置
        tabLayout.smoothScrollToPosition(groupStartPos)
    }
    override fun onTabUnselected(tab: TabLayout.Tab?) = Unit
    override fun onTabReselected(tab: TabLayout.Tab?) = Unit
})

额外优化 #

如果搭配ViewPager/ViewPager2使用，设置viewPager.offscreenPageLimit = 3，提前加载相邻分组的页面内容，避免滑动时出现加载卡顿。
注意：如果使用自定义Tab布局，需要给自定义布局的根节点设置固定宽度为前面计算出的singleTabWidth，避免内容撑开Tab导致宽度计算失效。

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