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="[e-mail]" /></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);    }    ...}

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