DrawerLayout与ToolBar之双宿双飞

最近因为项目需求需要实现侧滑功能，一开始决定使用SlideMenu的，可是研究Material Design时发现了谷歌自身推出了DrawerLayout，所以决定使用谷歌的东西来实现。

一、侧滑菜单在Toolbar下方情况

首先看下效果图是不是你所需要的，如下图：

Paste_Image.png

1、首先需要添加v7包的依赖

dependencies {
    ...//其他代码
    compile 'com.android.support:appcompat-v7:23.3.0'
}

2、创建一个toolbar.xml作为布局文件toolbar继承自View，因此可以像其他标准控件一样直接早主布局文件中添加Toolbar，但是为了提高Toolbar的重用效率，可以在layout中创建一个custom_toolbar.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:orientation="vertical"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>

3、创建DrawerLayout布局文件
在主布局中添加drawerlayout和toolbar,代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
        <include layout="@layout/custom_toolbar"/>   
        <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 内容部分 -->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
        <!-- 左侧侧滑部分 -->
        <ListView
            android:id="@+id/leftListView"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/colorPrimary"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

DrawerLayout标签中有两个子控件，一个是左边侧滑菜单View,一个是主界面。另外需要在左边菜单起始位置设置为android:layout_gravity="start"。如果你设置了右侧侧滑菜单，也需要添加android:layout_gravity="end"。
　　3、你可能对toolbar里面的返回按钮很感兴趣，切换效果特绚。客官、别急，容我来告诉你是个啥。这同样是design里面的一个类ActionBarDrawerToggle。只需要你配置了你就能体验它的炫丽。不了解的直接查看官方文档（请自备梯子）。使用方法我们在代码中为你讲述。这里我们来设置该返回键的样式，谷歌为我们提供了几种样式。

<resources>
    <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="android:textColorPrimary">@android:color/white</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>
</resources>

4、源代码

public class MainActivity extends AppCompatActivity {
    @Bind(R.id.content)
    FrameLayout mContent;
    @Bind(R.id.leftListView)
    ListView mLeftListView;
    @Bind(R.id.drawerLayout)
    DrawerLayout mDrawerLayout; 
   @Bind(R.id.toolbar)
    Toolbar mToolbar;
    private ActionBarDrawerToggle mDrawerToggle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        mToolbar.setTitle("测试");
        setSupportActionBar(mToolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        //设置返回键可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //创建返回键，并实现打开关/闭监听
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerToggle.syncState(); 
       //将DrawerLayout与DrawerToggle绑定
        mDrawerLayout.addDrawerListener(mDrawerToggle);
        mDrawerLayout.setScrimColor(Color.TRANSPARENT);
       //去除侧边阴影
        String[] aee = {"测试1", "测试2"}; 
        ArrayAdapter arrayAdapter = new  ArrayAdapter(this, android.R.layout.simple_list_item_1, aee);
        mLeftListView.setAdapter(arrayAdapter);
    }
}

代码中我添加了setScrimColor方法，这个方法是修改侧滑菜单滑出时背景颜色。

二、侧滑菜单遮盖Toolbar情况

效果图如下：

Paste_Image.png

　　侧滑菜单遮盖toolbar。其实只需要修改主布局文件就可以实现。drawerlayout作为根布局标签就OK，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--内容+toolbar-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/custom_toolbar"/>
        <!-- 内容部分 -->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
    <!-- 左侧侧滑部分 -->
    <ListView
        android:id="@+id/leftListView"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        android:clickable="true"/>
</android.support.v4.widget.DrawerLayout>

注意：在侧滑布局上必须要加上android:clickable="true"，不然侧滑菜单将无法使用。

如有问题欢迎留言。
源码下载

---