Skip to content

侧滑抽屉 (Navigation Drawer)

源:Navigation drawers

建议说明

在 M3 设计系统中,Navigation Drawer 正在被 Expanded Navigation Rail(扩展型侧边导航栏)取代,后者在不同屏幕尺寸下适配更好。

侧滑抽屉提供对应用目的地的访问。M3 提供了两种主要变体。

抽屉示例

  1. Standard (标准型): 始终可见,与内容并排。
  2. Modal (模态型): 默认隐藏,滑出时带遮罩。

核心结构 (Anatomy)

结构图

  1. 容器 | 2. 标题 | 3. 标签文本 | 4. 图标 | 5. 选中指示器 | 6. 徽章 (Badge) | 7. 遮罩层 (Scrim)

代码实现 (Modal)

模态抽屉需要配合 DrawerLayout 使用。

xml
<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主屏幕内容 -->
    <androidx.coordinatorlayout.widget.CoordinatorLayout ...>
        ...
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <!-- 抽屉视图 -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>
kotlin
// 打开抽屉
topAppBar.setNavigationOnClickListener {
    drawerLayout.open()
}

// 菜单点击监听
navigationView.setNavigationItemSelectedListener { item ->
    item.isChecked = true
    drawerLayout.close()
    true
}

交互增强

1. 添加页眉 (Header)

使用 app:headerLayout 可以在抽屉顶部添加用户信息、App Logo 等。

2. 预测性返回 (Predictive Back)

M3 抽屉支持 Android 14+ 的预测性返回动画,让滑动退出更加自然。


主题化

你可以自定义选中项的形状 (itemShapeAppearance) 和颜色。

xml
<style name="Widget.App.NavigationView" parent="Widget.Material3.NavigationView">
    <!-- 将选中项改为药丸形状 -->
    <item name="itemShapeAppearance">@style/ShapeAppearance.Material3.Corner.Full</item>
    <item name="itemIconTint">@color/my_nav_tint_selector</item>
</style>