TabLayout点击Tab时指示器位置不更新问题求助

问题现象 #

• 点击TabLayout的Tab时，指示器位置无变化
• 滑动ViewPager2时，指示器显示正常
• 点击Tab后再滑动页面，指示器恢复正常
• 仅当ViewPager2子Fragment中的RecyclerView有数据时触发该问题；若RecyclerView的getItemCount返回0，指示器显示正常，甚至TabLayout未与ViewPager2绑定也会出现异常

异常Fragment代码 #

布局代码 #

<com.google.android.material.tabs.TabLayout
        android:id="@+id/mTabLayout"
        style="@style/MyTabStyle2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/light_gray_1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabGravity="fill"
        tools:ignore="SpeakableTextPresentCheck"
        tools:layout_height="50dp">
    </com.google.android.material.tabs.TabLayout>


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/mViewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/light_gray_1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mTabLayout" />

逻辑代码 #

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    initAdapter();
    initViewPager();
    initTabLayout();
}
private void initAdapter() {
    titlesList.add(getString(R.string.message_tab_multi));
    titlesList.add(getString(R.string.message_tab_single));
    titlesList.add(getString(R.string.message_tab_welcome));
    productPagerAdapter = new MessagePager2Adapter(this);
}

public void initViewPager() {
    mViewPager.setAdapter(productPagerAdapter);
    mViewPager.setOffscreenPageLimit(titlesList.size());
}

public void initTabLayout() {
    new TabLayoutMediator(mTabLayout, mViewPager, (tab, position) ->
            tab.setText(titlesList.get(position))).attach();
}

private class MessagePager2Adapter extends FragmentStateAdapter {

    public MessagePager2Adapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    public MessagePager2Adapter(@NonNull Fragment fragment) {
        super(fragment);
    }

    public MessagePager2Adapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            default:
            case TAB_MESSAGE_MULTI:
                return MessagePostMultiFragment.newInstance();
            case TAB_MESSAGE_SINGLE:
                return MessagePostSingleFragment.newInstance();
            case TAB_MESSAGE_WELCOME:
                return MessagePostWelcomeFragment.newInstance();
        }
    }

    @Override
    public int getItemCount() {
        return titlesList.size();
    }
}

正常工作的Fragment参考代码 #

布局代码 #

<com.google.android.material.tabs.TabLayout
    android:id="@+id/mTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    style="@style/MyTabStyle"
    app:tabGravity="fill"
    android:background="@color/light_gray_2"
    tools:layout_height="50dp"/>

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/mViewPager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/light_gray_1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/mTabLayout" />

逻辑代码 #

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    initAdapter();
    initViewPager();
    initTabLayout();

}

private void initAdapter() {
    titlesList.add(getString(R.string.product_tab_product_search));
    titlesList.add(getString(R.string.product_tab_product_serving));
    pagerAdapter = new ProductPagerAdapter(this);
}

public void initViewPager() {
    mViewPager.setAdapter(pagerAdapter);
    mViewPager.setOffscreenPageLimit(titlesList.size());
}

public void initTabLayout() {
    new TabLayoutMediator(mTabLayout, mViewPager, (tab, position) ->
            tab.setText(titlesList.get(position))).attach();

}

public class ProductPagerAdapter extends FragmentStateAdapter {

    public ProductPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    public ProductPagerAdapter(@NonNull Fragment fragment) {
        super(fragment);
    }

    public ProductPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case TAB_PRODUCT_SEARCH:
                return ProductSearchFragment.newInstance();
            case TAB_PRODUCT_SERVING:
                return ProductServingFragment.newInstance();
            default:
                return ProductSearchFragment.newInstance();
        }
    }

    @Override
    public int getItemCount() {
        return titlesList.size();
    }
}

排查方向与解决方案 #

1. 检查TabStyle差异：对比MyTabStyle2和MyTabStyle的配置，重点查看是否有自定义指示器宽度（如tabIndicatorFullWidth）、指示器动画、Tab选中状态等设置，这些可能导致Tab点击时指示器未正确更新。
2. 强制TabLayout状态更新：在Tab点击事件中手动触发指示器更新，示例代码：

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int position = tab.getPosition();
        mViewPager.setCurrentItem(position);
        // 强制更新指示器位置
        mTabLayout.setScrollPosition(position, 0f, true);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {}

    @Override
    public void onTabReselected(TabLayout.Tab tab) {}
});

3. 处理RecyclerView加载后的布局变化：在子Fragment的RecyclerView数据加载完成后，通知父布局重新计算，避免因高度变化导致TabLayout联动异常：

// 子Fragment中RecyclerView数据加载完成后
recyclerView.post(() -> {
    ViewParent parent = getParentFragment().getView();
    if (parent != null) {
        parent.requestLayout();
    }
});

4. 关闭RecyclerView嵌套滚动：尝试关闭ViewPager2内部RecyclerView的嵌套滚动，避免滑动冲突导致状态不同步：

recyclerView.setNestedScrollingEnabled(false);

5. 调整初始化时机：将TabLayout和ViewPager2的初始化逻辑移至onViewCreated而非onActivityCreated，确保View完全初始化后再进行绑定：

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    initAdapter();
    initViewPager();
    initTabLayout();
}

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