【Android】DrawerLayout+NavigationView实现侧滑菜单页面

【Android】DrawerLayout+NavigationView实现侧滑菜单页面

在 Android 开发中，侧滑菜单是一个非常常见的用户界面模式，它能够在屏幕的一侧显示一个导航菜单，允许用户通过滑动手势或点击按钮来访问不同的应用功能。本文将介绍如何使用 DrawerLayout 和 NavigationView 来实现这一功能。

效果展示

先来看看这两个组件的结合可以实现什么效果吧！

基本概念

1. DrawerLayout

DrawerLayout 是 Android 中一种强大的布局容器，它为开发者提供了在主屏幕一侧或两侧放置可滑动视图的能力，这种滑动视图通常被称为抽屉（Drawer）。抽屉通常用于放置导航菜单，但也可以用于其他类型的内容，如工具面板或设置菜单。

主要特性和功能

• 多层视图结构: DrawerLayout 通常包含两个或多个子视图，其中一个是主要内容区域（通常是应用的主要 UI），另一个或多个是抽屉内容。抽屉视图可以位于屏幕的左侧、右侧或两侧。
• 抽屉操作: 抽屉可以通过手势（例如从屏幕边缘滑动）或编程方式打开和关闭。开发者可以通过监听抽屉状态的变化（如打开、关闭、拖动）来执行特定的操作。
• 可自定义的抽屉: 开发者可以完全自定义抽屉的内容和外观，包括其宽度、背景颜色、内容布局等。
• 兼容性和响应性: DrawerLayout 设计时考虑到了不同的屏幕尺寸和方向，因此可以适应不同的设备和屏幕状态，如平板设备和横屏模式。

2. NavigationView

NavigationView 是一个专门用于在 DrawerLayout 中实现导航菜单的视图组件。它简化了侧边菜单的创建，并提供了丰富的功能和自定义选项。

主要特性和功能

• 菜单项配置: NavigationView 使用菜单资源文件（XML 格式）来定义其内容。通过菜单资源文件，开发者可以轻松地配置菜单项的 ID、标题、图标等属性，并可以将菜单项分组，支持单选和多选行为。
• 菜单头部视图: NavigationView 可以包含一个头部视图，通常用于显示用户信息或应用的标识。头部视图的布局可以完全自定义，支持包括头像、用户名等元素。
• 易于集成: NavigationView 可以轻松地与 DrawerLayout 结合使用。通过设置 android:layout_gravity="start" 或 android:layout_gravity="end" 属性，开发者可以将导航视图放置在抽屉的左侧或右侧。
• 样式和主题支持: NavigationView 支持 Material Design 风格，并提供了多种自定义选项，如背景颜色、选中项的颜色等。开发者可以通过自定义样式和主题来改变其外观，使其与应用的整体风格保持一致。
• 事件处理: NavigationView 提供了一个简单的回调接口 NavigationView.OnNavigationItemSelectedListener，用于处理菜单项的选择事件。开发者可以在这个接口中定义菜单项点击时的行为，如切换 Fragment、启动新 Activity 等。

实现步骤

1. 布局文件

首先，我们需要在布局文件中定义 DrawerLayout 和 NavigationView 的结构：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp" />

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start"
        tools:context=".MainActivity">

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fg_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nv_view"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:focusable="true"
            app:headerLayout="@layout/drawer_header_layout"
            app:menu="@menu/menu_botton"/>
    </androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>

在这个布局文件中，DrawerLayout 包含一个 FragmentContainerView 作为主内容区域，以及一个 NavigationView 作为侧滑菜单。

NavigationView的这两项是需要我们自己去配置的，分别对应上下两部分：

有一点需要注意和强调一下Fragment的容器布局一定要放在上面，否则会被菜单栏盖过导致无法修改Fragment。

2. 配置菜单资源文件与头部资源文件

我们使用一个菜单资源文件来定义 NavigationView 中的菜单项：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id=<