底部导航嵌套ViewPager2时TabLayout重复显示问题求助

问题场景 #

应用带有底部标签导航，Activity内包含ViewPager，首个Fragment（HomeFragment）嵌套了ViewPager2和TabLayout。运行后TabLayout出现标签重复显示的问题。

问题原因 #

1. 当Fragment因配置变更（如屏幕旋转）或底部导航切换重建时，TabLayoutMediator被重复调用attach()，但未解绑之前的绑定，导致TabLayout重复添加标签。
2. HomeFragment的onDestroyView未处理TabLayoutMediator的解绑逻辑，也未清空ViewPager2适配器和TabLayout标签，残留的绑定关系导致重复渲染。
3. 原适配器使用Activity的FragmentManager管理子Fragment，易与Activity的Fragment生命周期冲突，引发重复创建问题。

解决方案 #

1. 管理TabLayoutMediator的生命周期 #

在HomeFragment中保存TabLayoutMediator实例，在视图销毁时解绑，并清空相关组件引用，避免残留绑定。

2. 使用Fragment自身的FragmentManager管理子Fragment #

修改ViewPagerFragmentAdapter的构造参数，传入当前Fragment而非Activity，确保子Fragment的生命周期与父Fragment绑定。

修改后的代码 #

HomeFragment #

public class HomeFragment extends Fragment {
    private ViewPager2 viewPager;
    private TabLayout tabLayout;
    private ViewPagerFragmentAdapter adapter;
    private TabLayoutMediator tabLayoutMediator;
    private final String[] labels = new String[]{"TL", "Social"};

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        viewPager = view.findViewById(R.id.viewPagerhome);
        tabLayout = view.findViewById(R.id.tabLayoutHome);
        viewPager.setCurrentItem(0, false);
        init();
        return view;
    }

    private void init() {
        adapter = new ViewPagerFragmentAdapter(this);
        viewPager.setAdapter(adapter);
        tabLayoutMediator = new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
            tab.setText(labels[position]);
        });
        tabLayoutMediator.attach();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        if (tabLayoutMediator != null) {
            tabLayoutMediator.detach();
        }
        viewPager.setAdapter(null);
        tabLayout.removeAllTabs();
        // 置空引用避免内存泄漏
        viewPager = null;
        tabLayout = null;
        adapter = null;
        tabLayoutMediator = null;
    }
}

ViewPagerFragmentAdapter #

private class ViewPagerFragmentAdapter extends FragmentStateAdapter {

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

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new TLTabFragment();
            case 1:
                return new SocialTabFragment();
        }
        return new TLTabFragment();
    }

    @Override
    public int getItemCount() {
        return labels.length;
    }
}

额外检查 #

确认Activity中的ViewPager与TabLayout绑定逻辑独立于Fragment内的组件，避免两者的TabLayout出现混淆或冲突。

内容的提问来源于stack exchange，提问作者mavilla vishnu vardhan