Fragment+DrawerLayout+NavigationView实现侧滑菜单页面结构_安卓侧滑menu+fragment

前面几篇文章我们学习了Fragment+ViewPager+Bottom导航按钮实现的典型页面结构( Fragment+ViewPager+BottomNavigationView实现页面导航)，从实践中对Fragment的应用有了更深的认识。本文我们再补充一种典型的，常见的又实用的页面结构：侧滑菜单式页面布局。同样是对Fragment的一种应用，结合控件DrawerLayout、NavigationView、ActionBarDrawerToggle实现典型的侧滑菜单式页面。

1. 目标效果

2. 案例教学

2.1 主界面布局

之前网上有各种自定义的控件方案来实现侧滑菜单，虽然可以实现，但五花八门复杂难懂。后来官方结合网上各种方案，统一出了专门的侧滑菜单控件：DrawerLayout，抽屉布局。顾名思义，就是像抽屉一样，从侧面抽出一个菜单页面。

我们要实现的效果是顶部带有ActionBar，侧滑菜单在ActionBar之下的，因为这种情况我们可以看到左上角有个菜单打开/关闭的图标。这个图标通常在关闭的时候是三条线，打开的时候自动变成箭头，并且这个过程有一个比较丝滑的动画转变效果。相信大家都见过这种效果，网上也有一些想自己手写动画实现的，特别费劲。其实系统已经帮我们实现了，我们只需要引用即可轻松实现。

activity_drawer.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.FragmentBottomTab1.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/Theme.FragmentBottomTab1.PopupOverlay" />
    </com.google.android.material.appbar.AppBarLayout>

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

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

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nv"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:clickable="true"
            app:headerLayout="@layout/drawer_header_layout"
            app:menu="@menu/drawer_nav_menu" />

    </androidx.drawerlayout.widget.DrawerLayout>

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

整体还是上下结构，最上面是ActionBar，这里我们使用AppBarLayout+Toolbar来实现，当作我们的ActionBar。下面是重头戏侧滑菜单和主体内容，用DrawerLayout实现。

• AppBarLayout+Toolbar部分

需要注意的就是一些主题资源了。比如android:theme="@style/Theme.FragmentBottomTab1.AppBarOverlay"、android:background="?attr/colorPrimary"、app:popupTheme="@style/Theme.FragmentBottomTab1.PopupOverlay"。

在themes.xml里添加

<style name="Theme.FragmentBottomTab1.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.FragmentBottomTab1.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
1
2

• DrawerLayout部分

DrawerLayout是一种容器控件，我们只需要把菜单和主体页面放到里面即可。菜单和主体页面分别用NavigationView和FragmentContainerView承接。他们放置的先后顺序没有关系，决定他们摆放位置的是NavigationView的属性android:layout_gravity="start"，表示NavigationView在抽屉的左侧，那么剩下的FragmentContainerView自然就是在右侧充当主体内容部分了。

再来看一下其他的一些细节。

• tools:openDrawer=“start”
  tools开头的这个命名空间表示的是只在代码编写阶段用来预览的属性，运行时不生效，因此这个属性只是为了让我们在预览界面里看到当前抽屉打开的效果。

• app:menu="@menu/drawer_nav_menu"
  侧滑菜单的菜单项部分，与上节文章里的底部导航菜单类似，只需要用menu文件就可以定义出菜单项了。

  drawer_nav_menu.xml 如下：

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/menu_home"
            android:icon="@drawable/selector_home"
            android:title="首页" />

        <item
            android:id="@+id/menu_find"
            android:icon="@drawable/selector_find"
            android:title="发现" />

        <item
            android:id="@+id/menu_mine"
            android:icon="@drawable/selector_mine"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16