ViewPager2与TabLayout多标签（17个）导航映射异常求助

问题描述 #

使用TabLayout+ViewPager2+TabLayoutMediator实现17个标签的页面切换，点击第5个及以后的标签时，ViewPager2会滚动到最后一个页面，出现标签与页面映射错误的情况。

原因分析 #

1. FragmentStateAdapter默认ID机制缺陷：FragmentStateAdapter默认以position作为页面的唯一标识，当页面数量较多时，ViewPager2的页面回收、预加载机制可能导致位置映射混乱，无法正确匹配标签对应的页面。
2. TabLayout属性配置问题：tabGravity="fill"在标签数量过多时会过度压缩标签宽度，可能引发TabLayout内部点击位置计算偏差，导致点击事件映射到错误的页面位置。
3. ViewPager2边界设置问题：clipChildren="false"和clipToPadding="false"可能干扰ViewPager2的滚动边界判断，影响页面定位准确性。

解决方案 #

1. 修改FragmentStateAdapter，使用唯一ID标识页面 #

重写getItemId和containsItem方法，用Category的唯一ID替代position作为页面标识，确保ViewPager2能精准匹配标签与页面：

package com.ai.wallpaper.adapters

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.lifecycle.Lifecycle
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.ai.wallpaper.fragments.WallpaperFragment
import com.ai.wallpaper.response.models.Category

class WallpaperPagerAdapter(
    fragmentManager: FragmentManager,
    lifecycle: Lifecycle,
    private val isPremium: Boolean,
    private val categoryList: MutableList<Category>
) : FragmentStateAdapter(fragmentManager, lifecycle) {

    override fun createFragment(position: Int): Fragment {
        return WallpaperFragment.newInstance(categoryList[position].id, isPremium)
    }

    override fun getItemCount(): Int {
        return categoryList.size
    }

    // 重写方法，使用Category的唯一ID作为页面标识
    override fun getItemId(position: Int): Long {
        // 若Category的id为String类型，可转换为hashCode或Long值
        return categoryList[position].id.toLong()
    }

    override fun containsItem(itemId: Long): Boolean {
        return categoryList.any { it.id.toLong() == itemId }
    }
}

2. 调整TabLayout的属性配置 #

将tabGravity="fill"改为tabGravity="center"，配合tabMode="auto"自动切换为滚动模式，避免标签过度压缩：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="34dp"
    android:background="@color/bgd_color_light"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:tabBackground="@color/bgd_color_light"
    app:tabGravity="center" <!-- 修改此处 -->
    app:tabIndicator="@drawable/tab_indicator_round"
    app:tabIndicatorAnimationMode="elastic"
    app:tabIndicatorColor="@color/app_color"
    app:tabIndicatorGravity="stretch"
    app:tabMode="auto"
    app:tabRippleColor="@color/transparent"
    app:tabSelectedTextColor="@color/white"
    app:tabTextAppearance="@style/CustomTabText" />

3. 移除ViewPager2的不必要边界设置 #

如果不需要实现页面边缘可见的效果，移除clipChildren和clipToPadding属性，恢复正常的滚动边界判断：

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/vp2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <!-- 移除以下两个属性 -->
    <!-- android:clipChildren="false" -->
    <!-- android:clipToPadding="false" -->
    android:orientation="horizontal" />

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