Android中Navigation Drawer与TabLayout关联Fragment重叠问题求解

问题根因 #

1. 布局层级重叠：你在DrawerLayout的内容区同时放置了带ViewPager2的drawer_toolbar、content_main等多个布局，且drawer_toolbar根布局高度设为match_parent，直接占满了整个内容区域，ViewPager2加载的Tab Fragment会一直显示在层级中，后续新增的侧滑菜单Fragment会和它直接重叠。
2. 容器ID错误：onNavigationItemSelected方法中调用replace(R.id.content, xxx)，但你的布局里不存在ID为R.id.content的容器，content_main.xml里的Fragment容器ID是R.id.container，无效的容器ID会导致Fragment加载逻辑异常，回退栈也无法正常工作。
3. 导航状态未隔离：Tab导航和侧滑导航属于两套独立导航逻辑，切换时没有做状态互斥，没有隐藏/显示对应导航区域。

修复步骤 #

1. 调整主布局结构 #

修改activity_main.xml，统一用单个容器管理所有导航内容，避免布局重叠：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- 全局唯一内容容器 -->
    <FrameLayout
        android:id="@+id/main_content_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:menu="@menu/drawer_menu"
        app:headerLayout="@layout/drawer_header"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"/>

</androidx.drawerlayout.widget.DrawerLayout>

把原来drawer_toolbar.xml对应的Tab导航逻辑抽成独立的HomeTabFragment，Tab下的两个子Fragment交给这个Fragment内部的ViewPager2管理。

2. 新增HomeTabFragment代码 #

将原来MainActivity里的Tab、ViewPager初始化逻辑移到这个Fragment中：

public class HomeTabFragment extends Fragment {
    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager2 viewPager2;
    private DrawerLayout drawerLayout;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.drawer_toolbar, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        toolbar = view.findViewById(R.id.toolbar);
        tabLayout = view.findViewById(R.id.tablayout);
        viewPager2 = view.findViewById(R.id.vp_horizontal_ntb);

        // 绑定Toolbar到Activity
        AppCompatActivity activity = (AppCompatActivity) requireActivity();
        activity.setSupportActionBar(toolbar);
        drawerLayout = activity.findViewById(R.id.drawer);

        // 绑定DrawerToggle
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(activity, drawerLayout, toolbar, R.string.open, R.string.close);
        drawerLayout.addDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.setDrawerIndicatorEnabled(true);
        actionBarDrawerToggle.syncState();

        // 初始化ViewPager2
        ViewPagerAdapter adapter = new ViewPagerAdapter(this);
        viewPager2.setAdapter(adapter);

        // TabLayout和ViewPager2双向绑定
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager2.setCurrentItem(tab.getPosition());
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {}
            @Override
            public void onTabReselected(TabLayout.Tab tab) {}
        });

        viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                tabLayout.selectTab(tabLayout.getTabAt(position));
            }
        });
    }

    private static class ViewPagerAdapter extends FragmentStateAdapter {
        public ViewPagerAdapter(@NonNull Fragment fragment) {
            super(fragment);
        }
        @NonNull
        @Override
        public Fragment createFragment(int position) {
            switch (position){
                case 0: return new perfil_user();
                case 1: return new genera_debate();
                default: return new perfil_user();
            }
        }
        @Override
        public int getItemCount() {
            return 2;
        }
    }
}

3. 修改MainActivity初始化逻辑 #

默认加载Tab首页作为入口：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    drawerLayout = findViewById(R.id.drawer);
    navigationView = findViewById(R.id.navigationView);
    navigationView.setNavigationItemSelectedListener(this);
    
    // 首次启动加载Tab首页
    if (savedInstanceState == null) {
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.main_content_container, new HomeTabFragment())
            .commit();
        // 需要先在drawer_menu.xml中新增一个首页选项，id设为R.id.home
        navigationView.setCheckedItem(R.id.home);
    }
}

4. 修正侧滑菜单选中逻辑 #

统一替换全局内容容器的Fragment，修复回退逻辑：

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    Fragment targetFragment = null;
    int itemId = item.getItemId();
    if (itemId == R.id.home) {
        targetFragment = new HomeTabFragment();
    } else if (itemId == R.id.user) {
        targetFragment = new perfil_user();
    } else if (itemId == R.id.friendslist) {
        targetFragment = new addFriends();
    } else if (itemId == R.id.exit) {
        finish();
        drawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }

    if (targetFragment != null) {
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.main_content_container, targetFragment)
            .addToBackStack(null)
            .commit();
        item.setChecked(true);
    }

    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
}

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