Android 滑动菜单(DrawerLayout + NavigationView )_android滑动菜单

目录

一、DrawerLayout介绍

1.1 功能和用途

1.2 优点：

1.3 适用场景

二、实现 DrawerLayout

三、交互和操作

3.1 打开侧边栏

3.2 传入错误的Gravity

3.3 关闭侧边栏

3.4 侧滑菜单监听

四、NavigationView

4.1 添加布局

4.2 nav_header_main

4.3 menu

五、注意事项

---

一、DrawerLayout介绍

        滑动菜单可以说是 Material Design 中的亮点之一了，Google 自己的应用就在使用(Play Store)，国内也有很多如网易云音乐、网易邮箱等，丝滑流畅不带一丢丢卡顿。如果要我们自己实现那么需要处理一些 UI显示 和 很多响应事件。现在借助 Material Design 中控件可以简单实现是不是美滋滋？一起来试试吧？

DrawerLayout 是 Android 中用于实现侧边导航栏的一个重要组件。

1.1 功能和用途

• 1.侧边导航栏

  • 导航功能： DrawerLayout 提供了一种简单而直观的方式来让用户访问应用的不同部分或功能模块。

  • 节省空间： 通过侧边栏，用户可以轻松访问应用的导航选项，而不必占用主要内容区域。

• 2.菜单展示

  • 显示菜单： 可以在侧边栏中展示应用的主要功能菜单或导航菜单，使用户可以快速浏览和选择。

  • 组织结构： 侧边栏可以帮助用户更清晰地了解应用的结构和可用功能。

1.2 优点：

• 1.更好的用户体验

  • 快速访问： 用户可以轻松地在不离开当前内容的情况下访问导航选项，提高了用户体验和导航效率。

  • 一致性： 为用户提供了一致的方式来访问应用的不同部分，使得应用更易于理解和使用。

• 2.布局灵活性

  • 节省空间： 对于大型应用，DrawerLayout 可以帮助节省主要内容区域的空间，同时提供更多导航选项。

  • 适应性： 适用于各种应用，特别是需要侧边导航并希望保持界面简洁的应用程序。

• 3.自定义性和可扩展性

  • 可定制化： DrawerLayout 可以轻松地与其他 UI 元素集成，例如 NavigationView，从而使侧边栏的外观和功能更加丰富。

  • 扩展性： 可以根据应用需求对侧边栏进行定制和扩展，以满足不同的用户需求。

1.3 适用场景

• 大型应用程序： 适用于需要管理多个模块和功能的复杂应用。

• 导航类应用： 对于需要用户频繁切换和访问不同内容的应用，如新闻、社交媒体和多标签浏览器等。

二、实现 DrawerLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
 
    <!-- 主屏幕显示内容 -->
    <include
        android:id="@+id/include"
        layout="@layout/activity_chips"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- 侧滑菜单显示内容 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="DrawerLayout-帅次"
        android:layout_gravity="start"
        android:background="@color/purple_200"
        android:padding="20dp"
        android:textColor="@color/white"
        android:textSize="24sp"/>
 
 
</androidx.drawerlayout.widget.DrawerLayout>

        一般情况下，DrawerLayout第一个子视图(include)就是主视图，也就是打开App第一眼看到的布局；而第二个子视图(TextView)就是侧滑菜单布局。

注意：

主视图的 layout_height 必须是 match_parent，否则报错。

侧滑菜单关键属性android:layout_gravity，这个是必须要指定的。

因为我们需要告诉 DrawerLayout 滑动菜单是在屏幕的左边还是右边。

• 指定 left 表示滑动菜单在左边;

• 指定 right 表示滑动菜单在右边。

        这里你也可以设置成 start(end)，这样会根据系统语言来进行判断。 如上面代码， android:layout_gravity="start"：

• 如果系统语言是从左往右的，比如汉语/英语等，那么滑动菜单就在左边，- 如果系统语言是从右往左，如阿拉伯语，那么菜单就在右边。

建议使用 start|end。

        这里只是一个简单的实现，你可以把 TextView 改为 NavigationView 或自定义布局。

三、交互和操作

3.1 打开侧边栏

        通过按钮或手势调用 drawerLayout.openDrawer() 方法，将滑动菜单显示出来，注意 openDrawer 方法需要传入一个Gravity参数。需要和XML文件设置的 layout_gravity 方向保持统一，否则会报错。

  binding.drawerLayout.openDrawer(GravityCompat.START)

3.2 传入错误的Gravity

  binding.drawerLayout.openDrawer(GravityCompat.END)

3.3 关闭侧边栏

    DrawerLayout 跟 Dialog 类似，只要点击其他区域自动关闭。当然你也可以通过下面代码手动关闭。

binding.drawerLayout.closeDrawer(GravityCompat.START);

3.4 侧滑菜单监听

        添加 addDrawerListener，根据侧滑菜单状态执行相应的操作。

        binding.drawerLayout.addDrawerListener(object :DrawerListener{
            override fun onDrawerClosed(drawerView: View) {
                Log.d("DrawerLayout", "onDrawerClosed")
            }
            override fun onDrawerOpened(drawerView: View) {
                Log.d("DrawerLayout", "onDrawerOpened")
            }
            override fun onDrawerStateChanged(newState: Int) {}
            override fun onDrawerSlide(drawerView: View, slideOffset: Float) {}
 
        })

四、NavigationView

        根据上面内容已经成功实现了侧滑菜单的功能，但是侧滑菜单的UI比较单一。真正的侧滑菜单可不会这么简单的，例如顶部的 Play Store 策划菜单截图。

        那么咱们怎么能达到 Play Store 的页面效果呢？

• 1.在侧滑菜单中自定义布局

• 2.Google 提供的 NavigationView(推荐使用)。

        NavigationView 是 Material 库中提供的一个控件，搭配DrawerLayout效果更佳。

4.1 添加布局

        将上面的 TextView 替换为 NavigationView。

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...>
 
    <!-- 主屏幕显示内容 -->
    <include
        ... />
    <!-- 侧滑菜单显示内容 -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="false"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
 
 
</androidx.drawerlayout.widget.DrawerLayout>

4.2 nav_header_main

        顶部个人信息

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="176dp"
    android:background="@color/color_blue"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
 
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/nav_header_desc"
        android:paddingTop="16dp"
        app:srcCompat="@mipmap/ic_launcher_round" />
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        android:text="@string/nav_header_title"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/nav_header_subtitle" />
</LinearLayout>

4.3 menu

        菜单列表

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">
 
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@mipmap/ic_home"
            android:title="@string/menu_home" />
        <item
            android:id="@+id/nav_add"
            android:icon="@mipmap/ic_add"
            android:title="@string/menu_add" />
        <item
            android:id="@+id/nav_user"
            android:icon="@mipmap/ic_user"
            android:title="@string/menu_user" />
    </group>
</menu>

五、注意事项

• 1.主内容视图一定要是DrawerLayout的第一个子视图且宽度和高度需要match_parent。

• 2.侧滑菜单必须添加android:layout_gravity属性，推荐使用 start|end，不推荐使用left|right。

• 3.侧滑视图的宽度以dp为单位，官方建议一般小于320(为了总能看到一些主内容视图)。

• 4.设置侧滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener)。

快乐的时光总是短暂的，光看是没有用滴，快实践起来吧！！！