DrawerLayout使用方法学习笔记

今天心血来潮想要学习一下侧滑菜单的实现方法，现在结合官方文档和AndroidStudio自动生成的NavigationDrawerActivity记录一下DrawerLayout的使用方法，算是自己的学习笔记。

NavigationDrawerActivity的效果图如下：



DrawLayout是位于android.support.v4.widget包中的布局控件，是官方为实现侧滑菜单专门提供的布局控件，官方提供的东西即使不明白原理也要先做到会用才行啊。

创建DrawerLayout

要想使用侧滑菜单，需要将DrawerLayout作为布局的根view，换句话说就是activity布局文件里最外层的layout就是DrawerLayout，然后在DrawerLayout里添加一个包含屏幕主要内容的view和一个侧滑菜单的view。

例如，例子中activity_main.xml布局文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<!--最外层需要是DrawerLayout-->
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<!--屏幕主要内容的view-->
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--侧滑菜单的view-->
<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_main"
app:menu="@menu/activity_main_drawer" />

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

划重点：

屏幕主要内容view必须为DrawerLayout的第一个子view，因为xml布局文件按照z-order顺序安排view而且侧滑菜单view必须位于屏幕主内容view之上

屏幕主内容view的宽和高必须都设置为match_parent，因为当侧滑菜单隐藏时它占据了屏幕上的全部空间

侧滑菜单view必须指定水平方向上的layout_gravity属性，为了支持RTL语言建议将属性指定为“start”而不是“left”，换句话说必须将侧滑菜单view的layout_gravity属性指定为start或者end

侧滑菜单view须将layout_width属性设置为以dp为单位的精确值，layout_height属性设置为match_parent，同时宽度最好不要超过320dp，保证当侧滑菜单出现时用户仍然可以看到部分屏幕主内容的view

初始化侧滑菜单内容

侧滑菜单可以用多种形式表现，本例中用的是NavigationView，在布局文件中通过Navigation的app:headerlayout和app:menu来设置了侧滑菜单中的内容。

nav_header_layout.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"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
app:srcCompat="@android:drawable/sym_def_app_icon" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="Android Studio"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio@android.com" />

</LinearLayout>

activity_main_drawer.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/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools" />
</group>

<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>

</menu>

处理侧滑菜单点击事件

根据侧滑菜单实现方式有不同的处理点击事件的方式，本例中用了NavigationView，于是在MainActivity中实现了NavigationView.OnNavigationItemSelectedListener接口，接口中的onNavigationItemSelected(MenuItem item)方法就是用来接受NavigationView的点击事件的，通过判断item的id即可处理相应的点击事件，MainActivity的代码如下：

package com.lius.slidemenudemo;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}

@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();

if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {

} else if (id == R.id.nav_slideshow) {

} else if (id == R.id.nav_manage) {

} else if (id == R.id.nav_share) {

} else if (id == R.id.nav_send) {

}

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
}

监听侧滑菜单开启和关闭事件

监听侧滑菜单的开启和关闭事件，调用DrawLayout的addDrawerListener()方法，并传入一个DrawerLayout.DrawerListener接口的实现，该接口提供侧滑菜单开启和关闭事件的回调方法，例如onDrawerOpened() and onDrawerClosed()方法。

如果你的app包含ActionBar/Toolbar，相比于直接实现DrawerListener接口，你可以通过扩展ActionBarDrawerToggle类来取而代之。ActionBarDrawerToggle实现了DrawerLayout.DrawerListener接口，所以你仍然可以重写那些回调方法。

在官方的侧滑菜单设计指导中，ActionBar/Toolbar的内容最好随着侧滑菜单的开启和关闭而改变，例如当侧滑菜单开启时改变ActionBar/Toolbar的标题并移除其上的菜单按钮，以下代码展示了重写ActionBarDrawerToggle中的回调方法并将其设置为DrawerLayout的监听器（这段代码与本例无关）:

public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
private CharSequence mDrawerTitle;
private CharSequence mTitle;
...

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...

mTitle = mDrawerTitle = getTitle();
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}

/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};

// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
}

/* Called whenever we call invalidateOptionsMenu() */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
// If the nav drawer is open, hide action items related to the content view
boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
return super.onPrepareOptionsMenu(menu);
}
}

配合AppIcon开启和关闭侧滑菜单

大多数app都会使用ActionBar，在使用了ActionBar的app中，除了允许用户通过滑动手势来开闭菜单还应该允许用户通过点击AppIcon来开闭菜单，AppIcon就是ActionBar中左边的图标。ActionBarDrawerToggle完全可以实现这些功能，同时不管是否扩展了ActionBarDrawerToggle类，都需要在activity的生命周期中的几个地方对ActionBarDrawerToggle进行设置。

以下代码就展示了具有点击开闭菜单功能的ActionBarDrawerToggle的基本用法（这段代码同样与本例无关）：

public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
...

public void onCreate(Bundle savedInstanceState) {
...

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this,                  /* host Activity */
mDrawerLayout,         /* DrawerLayout object */
R.drawable.ic_drawer,  /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open,  /* "open drawer" description */
R.string.drawer_close  /* "close drawer" description */
) {

/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
}

/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
}
};

// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);

getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle your other action bar items...

return super.onOptionsItemSelected(item);
}

...
}

本篇文章绝大部分翻译自官方文档，代码也全部来自官方。记录下来仅仅为了日后自己忘了好查阅，所以如果有初学者来到这里看不懂这篇文章，请不要怀疑是自己的问题，大佬们写的东西就算是初学者也能看懂，所以这是笔者的能力问题。加油。