如何将Bottom Navigation Bar置于Navigation Drawer上方？求实现技巧

针对你要做的Discord式导航抽屉（底部导航栏始终在抽屉上层可见），这里分两种主流实现方式讲具体技巧：

一、原生Android View系统实现 #

1. 核心布局层级调整 #

不要把BottomNavigationView放在DrawerLayout的内容区域里，改用ConstraintLayout作为父容器，让DrawerLayout和BottomNavigationView平级，利用View的绘制顺序（后添加的View层级更高），确保底部导航始终显示在抽屉上层。

示例布局代码：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 抽屉布局作为底层，高度截止到底部导航栏顶部 -->
    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottom_nav"
        app:layout_constraintTop_toTopOf="parent">

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

        <!-- 侧边抽屉内容，模拟Discord风格 -->
        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_drawer"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#202225"
            app:menu="@menu/drawer_menu"
            app:itemTextColor="#FFFFFF"
            app:itemIconTint="#FFFFFF"/>

    </androidx.drawerlayout.widget.DrawerLayout>

    <!-- 底部导航栏，层级高于抽屉 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#202225"
        app:menu="@menu/bottom_nav_menu"
        app:itemTextColor="#FFFFFF"
        app:itemIconTint="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

2. 交互细节处理 #

• 点击底部导航时自动关闭抽屉：

bottomNav.setOnItemSelectedListener(item -> {
    drawerLayout.closeDrawers();
    // 处理页面跳转逻辑
    return true;
});

• 抽屉滑出时给主内容添加变暗效果：

drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
    @Override
    public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
        mainContentContainer.setAlpha(1 - slideOffset * 0.3f);
    }

    @Override
    public void onDrawerOpened(@NonNull View drawerView) {}

    @Override
    public void onDrawerClosed(@NonNull View drawerView) {
        mainContentContainer.setAlpha(1f);
    }

    @Override
    public void onDrawerStateChanged(int newState) {}
});

二、Jetpack Compose实现 #

1. 用Box控制层级 #

Compose中通过Box的子元素顺序控制层级，将底部导航放在抽屉布局之后，确保它的层级更高。

示例代码：

@Composable
fun DiscordStyleScreen() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val bottomNavHeight = BottomNavigationDefaults.Height

    Box(modifier = Modifier.fillMaxSize()) {
        // 抽屉布局（底层）
        ModalNavigationDrawer(
            drawerState = drawerState,
            drawerContent = {
                Column(
                    modifier = Modifier
                        .fillMaxHeight()
                        .width(280.dp)
                        .background(Color(0xFF202225))
                        .padding(top = 16.dp)
                ) {
                    NavigationDrawerItem(
                        label = { Text("首页", color = Color.White) },
                        selected = false,
                        onClick = { scope.launch { drawerState.close() } },
                        icon = { Icon(Icons.Filled.Home, contentDescription = null, tint = Color.White) }
                    )
                    // 添加更多抽屉项
                }
            },
            content = {
                // 主内容区域，预留底部导航高度的 padding
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    content = { padding ->
                        Column(
                            modifier = Modifier
                                .fillMaxSize()
                                .padding(
                                    start = padding.calculateStartPadding(LayoutDirection.Ltr),
                                    top = padding.calculateTopPadding(),
                                    end = padding.calculateEndPadding(LayoutDirection.Ltr),
                                    bottom = padding.calculateBottomPadding() + bottomNavHeight
                                )
                        ) {
                            Text("主内容区域", color = Color.White)
                        }
                    }
                )
            }
        )

        // 底部导航栏（上层）
        BottomNavigation(
            modifier = Modifier.align(Alignment.BottomCenter),
            backgroundColor = Color(0xFF202225)
        ) {
            BottomNavigationItem(
                icon = { Icon(Icons.Filled.Home, contentDescription = "首页", tint = Color.White) },
                label = { Text("首页", color = Color.White) },
                selected = true,
                onClick = {
                    if (drawerState.isOpen) {
                        scope.launch { drawerState.close() }
                    }
                    // 处理页面跳转逻辑
                }
            )
            // 添加更多底部导航项
        }
    }
}

2. 视觉优化 #

抽屉滑出时给主内容添加模糊/变暗效果：

val slideOffset = drawerState.currentValue.offset
Box(modifier = Modifier.fillMaxSize()) {
    // 主内容区域
    // ...
    // 遮罩层
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black.copy(alpha = slideOffset * 0.3f))
    )
}

通用技巧 #

1. 抽屉宽度控制：设置抽屉宽度为屏幕宽度的70%-80%（比如280dp），和Discord风格一致，避免占满屏幕。
2. 色彩统一：抽屉和底部导航使用同色系深色背景，文字、图标用浅色，保持视觉协调。
3. 滑动体验：确保抽屉的滑动触发区域不被底部导航拦截，所以抽屉高度要设置到导航栏顶部。

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