Toolbar+DrawerLayout+material-menu实现菜单侧滑

引言

本文记录用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修改为如下所示：

    
    
    
    
    

        
        >

        
    

通过将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);

            }
        };
        ...
    }

到此结束。