引言
本文记录用Toolbar，DrawerLayout，material-menu实现菜单侧滑效果。
本文将以我的上两篇博文为基础，算是对DrawerLayout和Toolbar学习的一个融合，本文中将会使用之前的代码，如果不会使用DrawerLayout和Toolbar，请移步：
DrawerLayout的简单使用
Toolbar
使用DrawerLayout + Toolbar
以上一篇DrawerLayout的简单使用为基础，添加Toolbar（参照Toolbar的简单使用），如果仅仅是合并后运行程序，只能通过手势打开导航抽屉，标题栏上只有标题。这里实现能够通过标题栏打开导航抽屉，修改MainActivity.java如下：
...
// 在Toolbar做最左边加上导航按钮
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// 为导航按钮设置图片
getSupportActionBar().setHomeAsUpIndicator(R.mipmap.ic_launcher);
// 设置导航按钮可用
getSupportActionBar().setHomeButtonEnabled(true);
...
添加这两行代码后运行程序，能简单实现DrawerLayout和Toolbar,但是看看界面，发现相当的丑陋，于是需要做些优化。
修改布局activity_main.xml
从上图可以看到，当打开侧栏菜单时，会覆盖Toolbar，因此需要调整下布局来解决这个问题，将activity_main.xml修改为如下所示：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!--Toolbar-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!--DrawerLayout-->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>>
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
通过将Toolbar控件变成DrawerLayout的兄弟，就解决了这一个问题。接下来要引入动画特效，就是当打开和关闭侧栏时左上角变换形状，而不是一个简单的图标，因此要引入material-menu。
引入material-menu
material-menu是一个开源的组件，这个组件是使用了Android5.0推出的Material Design设计语言做出来的，另外该组件中使用了JackWharton的NineOldAndroids动画效果。可以点击下列链接访问它们的主页，material-menu、NineOldAndroids。
由于material-menu使用了NineOldAndroids，因此在引入之前我们应该先将NineOldAndroids的jar包下下来并导入项目里，到其主页就能下载到。
为material-menu添加依赖
dependencies {
compile 'com.balysv.materialmenu:material-menu:2.0.0'
}
监听导航抽屉的打开和关闭事件
上一步的程序运行时，细心的话会发现，点击标题栏的图标可以打开导航抽屉，但是打开时在点击却关闭不了，现在就来解决这个问题。监听导航抽屉的打开和关闭事件，需要调用DrawerLayout的setDrawerListener()，并且传入一个DrawerLayout.DrawerListener监听器，这个借口提供了导航抽屉的回调函数如onDrawerOpened()，onDrawerClosed()。这里参考DrawerLayout的官方例子，使用ActionBarDrawerToggle，由于它实现了DrawerLayout.DrawerListener，因此可以覆盖它的回调函数。修改MainActivity.java文件如下：
private ActionBarDrawerToggle mDrawerToggle;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
...
}
这就实现了通过Toolbar的导航按钮来控制导航抽屉的打开和关闭了。接下来实现导航抽屉的特效，这就要用到material-munu。
引入material-menu
至于material-menu的具体使用请参考material-menu的主页，将其引入项目，如下所示：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
isDrawerOpened = false;
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
isDrawerOpened = true;
}
public void onDrawerStateChanged(int newState) {
if(newState == DrawerLayout.STATE_IDLE){
if (isDrawerOpened){
mMaterialMenuDrawable.setIconState(MaterialMenuDrawable.IconState.ARROW);
}else{
mMaterialMenuDrawable.setIconState(MaterialMenuDrawable.IconState.BURGER);
}
}
}
public void onDrawerSlide(View drawerView, float slideOffset) {
mMaterialMenuDrawable.setTransformationOffset(
MaterialMenuDrawable.AnimationState.BURGER_ARROW,
isDrawerOpened ? 2 - slideOffset : slideOffset);
}
};
...
}
到此结束。
