Toolbar+DrawerLayout+material-me

引言

本文记录用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);

            }
        };
        ...
    }

到此结束。