MaterialDesign（二），DrawerLayout使用
什么是 DrawerLayout
DrawerLayout（抽屉式导航栏）是一个面板，它将应用的主要导航选项显示在屏幕左边缘。大多数情况下，它处于隐藏状态，但是如果用户从屏幕左边缘滑动手指，同时在应用顶层触摸操作栏中的应用图标，它将会显示出来
简单来说这是一个实现了侧滑菜单效果的控件，主要分为侧边菜单和主内容两部分，并可根据手势操作进行展开或隐藏。下面结合 Toolbar + DrawerLayout + NavigationView 来学习一下
简单使用
按照惯例，我们先看一下效果图：
DrawerLayout.gif
从效果图来看，界面主要分为3部分：Toolbar、内容区域、侧边栏（NavigationView）。下面我们就该效果看看具体实现，如果对 Toolbar 不熟悉的，可以看我的前一篇文章 MaterialDesign（一），ToolBar使用
- 引入 com.android.support:design
由于我们这个例子使用到 NavigationView，所以需要引入 com.android.support:design
compile 'com.android.support:design:26.1.0'
- 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_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary">
<!--此处可以添加自定义控件-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="custom"
android:textColor="@android:color/white"
android:textSize="16sp"/>
</android.support.v7.widget.Toolbar>
<TextView
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="内容"/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header"
app:menu="@menu/menu_nav"/>
</android.support.v4.widget.DrawerLayout>
从 xml 布局文件看，我们的根布局是 DrawerLayout，里面包含两个部分，从上到下第一部分必须是主布局，第二部分是侧边栏，这里的侧边栏我们使用了 NavigationView，也可以是任意视图。第二部分必须添加 android:layout_gravity 属性，这里使用了 android:layout_gravity="start" 表示是左侧边栏。NavigationView 的其他属性，下面介绍 NavigationView 再进行解释，现在主要关注 DrawerLayout 的实现
- Activity 中获取并设置相关属性值，以及事件监听
@BindView(R.id.drawer_layout)
DrawerLayout mDrawerLayout;
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 点击导航图标展开侧边栏
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
// 如有需要可以设置DrawerLayout监听
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
// 滑动过程回调
}
@Override
public void onDrawerOpened(View drawerView) {
// 展开回调
}
@Override
public void onDrawerClosed(View drawerView) {
// 关闭回调
}
@Override
public void onDrawerStateChanged(int newState) {
// 状态改变回调
}
});
可以看出在 Activity 中无需设置什么，主要设置一下 Toolbar 的导航图标点击时展开侧边栏，设置监听可根据具体业务设置
NavigationView 介绍
Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file.
NavigationView is typically placed inside a DrawerLayout.
大致的意思是 NavigationView 代表着应用的标准导航栏，菜单的内容可以由菜单资源文件填充，通常放置在 DrawerLayout 中
上面我们在 xml 中已经使用到 NavigationView 这个控件了，下面了解一下使用到的这两个属性， app:headerLayout="@layout/nav_header" 属性是给导航栏设置一个头布局，可以引用 layout 文件； app:menu="@menu/menu_nav" 属性是为导航栏设置菜单项，支持分组，根据效果图，看下具体的实现
nav_header.xml
<?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="240dp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/android_bg"/>
</LinearLayout>
menu_nav.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="设置">
<menu>
<group android:id="@+id/setting_g_1">
<item
android:id="@+id/setting_item_1"
android:icon="@drawable/ic_settings_black_24dp"
android:title="设置1"/>
<item
android:id="@+id/setting_item_2"
android:icon="@drawable/ic_settings_black_24dp"
android:title="设置2"/>
</group>
</menu>
</item>
<item android:title="设置（个性）">
<menu>
<group android:id="@+id/setting_g_2">
<item
android:id="@+id/setting_item_3"
android:icon="@drawable/ic_settings_black_24dp"
android:title="设置3"/>
<item
android:id="@+id/setting_item_4"
android:icon="@drawable/ic_settings_black_24dp"
android:title="设置4"/>
</group>
</menu>
</item>
</menu>
这里简单的设置了一张图片作为头部，菜单项则使用了两个分组，每个分组里面有两个菜单项，可以说是非常简单。最后在 Activity 中设置各个菜单项的点击事件即可，代码如下
mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
String tip = "";
switch (id) {
case R.id.setting_item_1:
tip = "设置1";
break;
case R.id.setting_item_2:
tip = "设置2";
break;
case R.id.setting_item_3:
tip = "设置3";
break;
case R.id.setting_item_4:
tip = "设置4";
break;
}
Toast.makeText(ToolbarActivity.this, tip, Toast.LENGTH_SHORT).show();
// 隐藏侧边栏
mDrawerLayout.closeDrawer(GravityCompat.START);
return false;
}
});
结语
本文主要介绍了 DrawerLayout 和 NavigationView 的使用，DrawerLayout 在实际开发过程中用的也比较多。想了解更多，可以参考官方 API。DrawerLayout API，NavigationView API，请自备梯子。本文 demo 已上传到 github
