Skip to content

侧边导航栏 (Navigation Rail)

源:Navigation rail

侧边导航栏允许用户在中大型设备上切换 UI 视图。

Navigation Rail 示例

变体对比

  1. Collapsed (折叠式): 默认 80dp 宽(M3 推荐 96dp),仅显示图标或图标+简短标签。
  2. Expanded (扩展式): 类似于抽屉,可以显示更长的文本标签。

核心结构 (Anatomy)

结构图

  1. 容器 | 2. 菜单 | 3. FAB (可选页眉) | 4. 图标 | 5. 选中指示器 | 6. 标签文本 | 7. 徽章 (Badge)

代码实现

基础用法

xml
<com.google.android.material.navigationrail.NavigationRailView
    android:id="@+id/navigationRail"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:headerLayout="@layout/rail_fab_header"
    app:menu="@menu/rail_menu" />
kotlin
navigationRail.setOnItemSelectedListener { item ->
    when(item.itemId) {
        R.id.home -> { /* 导航到首页 */ true }
        else -> false
    }
}

// 运行时选中某项
navigationRail.selectedItemId = R.id.settings

交互增强

1. 展开与收起

你可以通过代码触发 Rail 的展开动画,使其转换为类似抽屉的样式:

kotlin
navigationRailView.expand()
navigationRailView.collapse()

2. 添加徽章 (Badges)

kotlin
val badge = navigationRail.getOrCreateBadge(R.id.notifications)
badge.isVisible = true
badge.number = 99

屏幕适配

自动内边距

默认情况下,NavigationRailView 会根据系统状态栏和导航栏的 Insets 自动添加顶部和底部内边距,确保内容不被刘海或手势条遮挡。