Android实现侧滑抽屉菜单(DrawerLayout+NavigationView+toolbar)

目录：
1.概述
2.实现过程与代码

1.概述
在android开发中，我们经常会有需求开发抽屉菜单，纵观当下的主流APP，大多首页都会有侧滑抽屉菜单，它的好处就在于，它可以
在有限的空间内显示尽量多的控件。
抽屉菜单的实现方式也有很多种方式，下面我仅仅是通过官方的DrawerLayout+NavigationView+toolbar来实现与导航栏相关联的抽屉
菜单。

2.实现过程与代码
2.1 效果截图


由上面的效果图可以看出，其中的布局包括3部分,(1)主体布局，抽屉菜单未滑出时的显示布局 (2)抽屉菜单的头部布局 (3)抽屉菜单的菜单项布局
ok,下面会依次贴出上面的布局。

2.2 主布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!--导航条toolbar-->    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:minHeight="?attr/actionBarSize"        />    <!--主布局和侧滑菜单-->    <include layout="@layout/drawerlayout_main"/></LinearLayout>

注：可以看出除了toolbar控件外，还导入了其drawerlayout_main布局，看看drawerlayout_main的布局如下

2.3 主布局文件中include包含文件drawerlayout_main.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_height="match_parent"android:layout_width="match_parent"><FrameLayout    android:id="@+id/main_layout"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:src="@drawable/background"        android:layout_width="match_parent"        android:layout_height="match_parent" /></FrameLayout>    <!--    app:menu：设置menu xml布局    app:headerLayout=""：设置侧滑栏顶部布局    android:layout_gravity=""：设置导航栏的位置，left|right    --><android.support.design.widget.NavigationView    android:id="@+id/drawer_navigation"    android:layout_width="480dp"    android:layout_height="match_parent"    android:layout_gravity="left"    app:menu="@menu/drawer_menu"    app:headerLayout="@layout/drawer_header"/></android.support.v4.widget.DrawerLayout>

注：看drawerlayout_main布局以DrawerLayout未根布局，并在里面包含了FrameLayout布局和NavigationView控件，其中FrameLayout布局
就是主体布局内容，而NavigationView则是导航抽屉，细心的朋友可以看见里面的app:menu="@menu/drawer_menu"和
app:headerLayout="@layout/drawer_header"属性，他们分别指定的是侧滑抽屉菜单的menu和header,下面分别是抽屉菜单的头部布局和菜单项

2.4 抽屉菜单header布局drawer_header.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:background="@drawable/navication_header"    android:layout_height="match_parent">    <ImageView        android:layout_marginTop="15dp"        android:id="@+id/header_icon"        android:layout_centerHorizontal="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@mipmap/ic_launcher"/>    <TextView        android:layout_marginTop="10dp"        android:layout_marginLeft="20dp"        android:layout_below="@+id/header_icon"        android:layout_alignParentLeft="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/nick_name"        android:text="Andy Lau"        android:textSize="18sp"/>    <TextView        android:layout_marginLeft="20dp"        android:layout_below="@+id/nick_name"        android:layout_alignParentLeft="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/desc"        android:text="做一稞低头的麦穗，饱满而谦逊！"        android:textSize="18sp"/></RelativeLayout>

2.5 menu布局文件drawer_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/hobby"            android:title="购物爱好">            <menu>                <item android:id="@+id/film"                    android:icon="@drawable/film"                    android:title="电影"/>                <item android:id="@+id/mall"                    android:icon="@drawable/mall"                    android:title="商场"/>            </menu>        </item>    </group>    <group  android:checkableBehavior="single">        <item android:id="@+id/people"            android:title="个人中心">            <menu>                <item android:id="@+id/wallet"                    android:icon="@drawable/wallet"                    android:title="钱包"/>                <item android:id="@+id/collect"                    android:icon="@drawable/collect"                    android:title="收藏"/>                <item android:id="@+id/setting"                    android:icon="@drawable/setting"                    android:title="设置"/>            </menu>        </item>    </group></menu><span style="font-family: Arial, Helvetica, sans-serif;"></span>

注：ok,布局基本贴完，下面是主要类代码

2.6 主布局java类MainActivity,

package com.example.drawerlayout;import android.support.design.widget.NavigationView;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private Toolbar toolbar;    private DrawerLayout drawerLayout;    private NavigationView navigation;    private ActionBarDrawerToggle drawerToggle;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        //设置toolbar标题文本        toolbar.setTitle("首页");        //设置toolbar        setSupportActionBar(toolbar);        //设置左上角图标是否可点击        getSupportActionBar().setHomeButtonEnabled(true);        //左上角加上一个返回图标        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        //初始化ActionBarDrawerToggle(ActionBarDrawerToggle就是一个开关一样用来打开或者关闭drawer)        drawerToggle = new ActionBarDrawerToggle(MainActivity.this,drawerLayout,toolbar,R.string.openString,R.string.closeString){            /*            * 抽屉菜单打开监听            * */            @Override            public void onDrawerOpened(View drawerView) {                Toast.makeText(MainActivity.this,"菜单打开了",Toast.LENGTH_SHORT).show();                super.onDrawerOpened(drawerView);            }            /*            * 抽屉菜单关闭监听            * */            @Override            public void onDrawerClosed(View drawerView) {                Toast.makeText(MainActivity.this,"菜单关闭了",Toast.LENGTH_SHORT).show();                super.onDrawerClosed(drawerView);            }        };        /*        * NavigationView设置点击监听        * */        navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem menuItem) {                Toast.makeText(MainActivity.this,menuItem.getTitle(),Toast.LENGTH_SHORT).show();                menuItem.setChecked(true);                drawerLayout.closeDrawers();                return false;            }        });        drawerToggle.syncState();        //设置DrawerLayout的抽屉开关监听        drawerLayout.setDrawerListener(drawerToggle);    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolbar_menu,menu);        return super.onCreateOptionsMenu(menu);    }    /*        * 初始化布局控件        * */    private void initView() {        toolbar = (Toolbar) findViewById(R.id.toolbar);        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        navigation = (NavigationView) findViewById(R.id.drawer_navigation);    }}

注：最后在附上对theme的自定义style

2.7 Theme风格自定义

    <style name="CustomNoActionBarTheme" parent="Theme.AppCompat.NoActionBar">        <item name="android:windowActionBar">false</item>        <item name="android:textColor">@color/customArrayColor</item>        <item name="drawerArrowStyle">@style/CustomNoActionBarTheme.drawerArrowStyle</item>        <item name="colorPrimary">@color/customColorPrimary</item>        <item name="colorAccent">@color/colorAccent</item>    </style>    <!--设置导航箭头的样式-->    <style name="CustomNoActionBarTheme.drawerArrowStyle" parent="Base.Widget.AppCompat.DrawerArrowToggle">        <item name="android:color">@color/customArrayColor</item>    </style>