最详细的 NavigationDrawer 开发实践总结

638 查看

最详细的 NavigationDrawer 开发实践总结

继前面写的两篇文章之后（有问题欢迎反馈哦）：

Android开发：Translucent System Bar 的最佳实践
 Android开发：最详细的 Toolbar 开发实践总结

接着来写写Android系统UI新特性，本文是我对最近开发过程中应用 NavigationDrawer 特性的详细总结。本文涉及到的所有代码实现细节，会在文末附上源码地址。有问题欢迎在下方留言讨论。

NavigationDrawer 简介

NavigationDrawer 是 Google 在 Material Design 中推出的一种侧滑导航栏设计风格。说起来可能很抽象，我们直接来看看网易云音乐的侧滑导航栏效果

网易云音乐侧滑导航栏效果

Google 为了支持这样的导航效果，推出一个新控件 —— DrawerLayout 。而在 DrawerLayout 没诞生之前，需求中需要实现侧滑导航效果时，我们必然会选择去选择一些成熟的第三方开源库（如最有名的 SlidingMenu）来完成开发。效果上，普遍都像手Q 那样：

手Q的SlidingMenu实现侧滑效果

在对比过 DrawerLayout 和 SlidingMenu 的实现效果后，基于以下的几点，我认为完全可以在开发中使用 DrawerLayout 取代以前的 SlidingMenu：

从动画效果上看，你会发现两者仅仅是在移动的效果上有些差别外，其他地方并没有太大的差异
在交互效果上，我认为这两者都差不多的，就算你把网易云音乐的效果套到了手Q 上，也不会影响到用户的交互
DrawerLayout 用起来比 SlidingMenu 更简单，代码量更少(往下看就知道了)
DrawerLayout 是向下兼容的，所以不会存在低版本兼容性问题
Google 亲儿子，没理由不支持啊！！！！！！
到这里，要是你还没有引入 DrawerLayout 开发的冲动，请继续听我为你好好安利一番。

初识 DrawerLayout

一般情况下，在 DrawerLayout 布局下只会存在两个子布局，一个内容布局和一个侧滑菜单布局，这两个布局关键在于 android:layout_gravity 属性的设置。如果你想把其中一个子布局设置成为左侧滑菜单，只需要设置 android:layout_gravity=”start” 即可（也可以是 left，右侧滑则为 end 或 right ），而没有设置的布局则自然成为内容布局。那么，使用 DrawerLayout 到底有多简单呢，我们先直接看看下面的布局文件

layout/activity_simple_drawer.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.v4.widget.DrawerLayout

android:id="@+id/simple_navigation_drawer"

android:layout_width="match_parent"

android:layout_height="match_parent">

<include

android:id="@+id/tv_content"

layout="@layout/drawer_content_layout"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<include

layout="@layout/drawer_menu_layout"

android:layout_width="250dp"

android:layout_height="match_parent"

android:layout_gravity="start" />

<include

layout="@layout/drawer_menu_layout"

android:layout_width="250dp"

android:layout_height="match_parent"

android:layout_gravity="end" />

</android.support.v4.widget.DrawerLayout>

</RelativeLayout>

到此，你在 Activity 里面什么都不用做，就已经完成了下面侧滑效果的实现了，简单到害怕有木有。

最简单的侧滑效果实现

在欣赏着 DrawerLayout 简单方便的同时，Google 也为我们提供了 DrawerLayout 很多常用的API，其中包括：打开或关闭侧滑栏、控制侧滑栏的方向、设置滑动时渐变的阴影颜色和监听滑动事件等。

SimpleDrawerActivity运行效果

具体详细代码请参加工程中的 SimpleDrawerActivity，此处就不贴代码了。还有一处 DrawerLayout 使用的小细节需要温馨提醒一下，有一次，我手误把 DrawerLayout 的 android:layout_width 设置成 wrap_content，就出现下面的异常了

DrawerLayout的wrap_content错误

遇到过相同情况的童鞋，只需要把 android:layout_width 设置成 match_parent 即可。

再识 NavigationView

在 Google 推出 NavigationDrawer 设计中，NavigationView 和 DrawerLayout 是官方推荐的最佳组合。在使用 NavigationView 前，因为它是在 Material Design 的兼容包中，所以需要先在 build.gradle 中引入

1	compile 'com.android.support:design:23.1.1'

这里因为我工程配置的 compileSdkVersion 是 23 ，所以需要引入 com.android.support:design：23.x.x 的版本。需要吐槽的是，这里如果你引入了 com.android.support:design：23.1.0 ，工程运行后 NavigationView 会报一个 android.view.InflateException：xxxxxx 的错误（又是一个大坑）。

接下来简单的介绍一下 NavigationView 的使用，我们继续看看几个相关布局文件 layout/activity_simple_navigation_drawer.xml、layout/navigation_drawer_header.xml、menu/navigation_drawer_menu.xml 和实现效果：

layout/activity_simple_navigation_drawer.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/drawer"

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="NavigationDrawerContent" />

</LinearLayout>

<android.support.design.widget.NavigationView

android:id="@+id/navigation_view"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

app:headerLayout="@layout/navigation_drawer_header"

app:menu="@menu/navigation_drawer_menu" />

</android.support.v4.widget.DrawerLayout>

layout/navigation_drawer_header.xml

/android.jobbole.com/83105/">Android开发：Translucent System Bar 的最佳实践
Android开发：最详细的 Toolbar 开发实践总结

NavigationDrawer 简介

NavigationDrawer 是 Google 在 Material Design 中推出的一种侧滑导航栏设计风格。说起来可能很抽象，我们直接来看看网易云音乐的侧滑导航栏效果

网易云音乐侧滑导航栏效果

手Q的SlidingMenu实现侧滑效果

在对比过 DrawerLayout 和 SlidingMenu 的实现效果后，基于以下的几点，我认为完全可以在开发中使用 DrawerLayout 取代以前的 SlidingMenu：

初识 DrawerLayout

layout/activity_simple_drawer.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.v4.widget.DrawerLayout

android:id="@+id/simple_navigation_drawer"

android:layout_width="match_parent"

android:layout_height="match_parent">

<include

android:id="@+id/tv_content"

layout="@layout/drawer_content_layout"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<include

layout="@layout/drawer_menu_layout"

android:layout_width="250dp"

android:layout_height="match_parent"

android:layout_gravity="start" />

<include

layout="@layout/drawer_menu_layout"

android:layout_width="250dp"

android:layout_height="match_parent"

android:layout_gravity="end" />

</android.support.v4.widget.DrawerLayout>

</RelativeLayout>

到此，你在 Activity 里面什么都不用做，就已经完成了下面侧滑效果的实现了，简单到害怕有木有。

最简单的侧滑效果实现

SimpleDrawerActivity运行效果

DrawerLayout的wrap_content错误

遇到过相同情况的童鞋，只需要把 android:layout_width 设置成 match_parent 即可。

再识 NavigationView

1	compile 'com.android.support:design:23.1.1'

layout/activity_simple_navigation_drawer.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/drawer"

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="NavigationDrawerContent" />

</LinearLayout>

<android.support.design.widget.NavigationView

android:id="@+id/navigation_view"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

app