Android使用DrawerLayout和ToolBar实现仿知乎侧滑菜单

侧滑菜单现在在很多app上都可以看到，以下文章主要讲如何实现实现Android的侧滑菜单。可以先看一个简单的侧滑菜单设计。
示例图：

从屏幕左端向右滑动或点击左上角按钮可打开侧滑栏菜单。

具体实现

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout    android:layout_height="fill_parent"    android:layout_width="fill_parent"    android:id="@+id/myDrawer"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:id="@+id/hideLayout"        >        <!-- 顶部栏 -->        <android.support.v7.widget.Toolbar            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/colorPrimary"            android:minHeight="?attr/actionBarSize"            android:fitsSystemWindows="true"            android:id="@+id/mToolBar"            android:popupTheme="@style/Widget.AppCompat.ActionBar"            app:theme="@style/Widget.AppCompat.Light.ActionBar"            >        </android.support.v7.widget.Toolbar>        <!-- 用于加载导航栏的容器 -->        <FrameLayout            android:layout_width="match_parent"            android:id="@+id/frame"            android:layout_height="match_parent">        </FrameLayout>    </LinearLayout>    <!-- 导航栏的设置 此处可设置导航栏头部布局及菜单布局-->    <android.support.design.widget.NavigationView        android:id="@+id/nav"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="#ffffff"        app:headerLayout="@layout/header"         app:menu="@menu/nav_menu"        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"        >    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

紧接着要添加菜单，在menu文件夹下新建xml文件
nav_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/item1"            android:icon="@drawable/smile"            android:title="item1"            >        </item>        <item android:id="@+id/item2"            android:icon="@drawable/sorry"            android:title="item2"            >        </item>        <item android:id="@+id/item3"            android:icon="@drawable/oh_boy"            android:title="item3"            >        </item>        <item android:id="@+id/item4"            android:icon="@drawable/joy"            android:title="item4"            >        </item>        <item android:id="@+id/item5"            android:icon="@drawable/now_what"            android:title="item5"            >        </item>    </group></menu>

还有头部的布局，即上图哆啦A梦处
header.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:background="#c40606"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:layout_marginLeft="10dp"        android:layout_marginTop="10dp"        >        <ImageView            android:layout_width="150dp"            android:layout_height="150dp"            android:src="@drawable/doraemon"            android:layout_marginBottom="20dp"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="10dp"            android:layout_paddingLeft="20dp"            android:text="乐观的蓝胖子"            android:textSize="20sp"            />    </LinearLayout></LinearLayout>

此外需要注意的是，使用toolbar时需要把系统的ActionBar去掉，方法是修改style.xml文件中的主题设置
style.xml

<resources>    <!-- 改为没有ActionBar的主题 Theme.AppCompat.Light.NoActionBar -->    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>        <!-- 这里设置左上角可点击展开的小图标 -->        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>    </style>    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">        <item name="color">@android:color/white</item>    </style>    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /></resources>

完成上述步骤后即可设置其操作，在MainActivity中写入如下代码：

        mToolBar = (Toolbar) findViewById(R.id.mToolBar); //ToolBar        mDrawer = (DrawerLayout) findViewById(R.id.myDrawer); //DrawerLayout        navigationView = (NavigationView) findViewById(R.id.nav); //NavigationView导航栏        mToolBar.setTitle("首页");        mToolBar.setTitleTextColor(Color.parseColor("#FFFFFF"));        setSupportActionBar(mToolBar);        //设置左上角的图标响应        getSupportActionBar().setHomeButtonEnabled(true);         getSupportActionBar().setDisplayHomeAsUpEnabled(true);        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawer, mToolBar, 0, 0) {            @Override            public void onDrawerClosed(View drawerView) {                super.onDrawerClosed(drawerView);            }            @Override            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(drawerView);            }        };        mDrawerToggle.syncState();        mDrawer.setDrawerListener(mDrawerToggle); //设置侧滑监听

问题总结

1.为什么会出现侧滑菜单无法覆盖ToolBar?
当需要侧滑菜单覆盖ToolBar时，必须把DrawerLayout作为根布局。而不是LinearLayout或其他。
2.为什么没有在编写导航栏时没有android.support.design.widget.NavigationView？
右键项目==>open module setting==>Dependencies==>添加库com.android.support:design:23.1.1