最近心血来潮想用Android官方提供的DrawerLayout结合ToolBar实现抽屉式效果（侧滑），翻看一些博客都比较杂乱（可能有些好的文章我没有搜到），写篇文章整理记录一下。
为更好的贴代码（展示的更直观）很多东西都写一块去了，命名也是简单粗暴（我这暴脾气），封装之类的之后可以自己东东手指头。啦啦啦啦啦啦啦啦啦啦啦啦啦！
简单流程
- 在Manifest.xml文件中设置Activity样式。
- 写布局，布局中包含了ToolBar与DrawerLayout。
- 好了，其实没有多少步骤，具体往下深入看看。
二、Manifest.xml中Activity的样式
为什么要搞样式：
Android3.0(API level 11)之后，所有使用默认主题的activity都自带一个ActionBar，样式要做的事情就是把它隐藏，然后在布局中使用我们自己想要的ToolBar。（既然你打算是使用ToolBar了，在这里相信也不会问什么是ToolBar、ActionBar！^_^）
1、新建一个Activity命名为DrawerLayoutToolBarAct，并在Manifest.xml下进行配置，其中android:theme是我即将要自定义的样式，如下：
<activityandroid:name=".drawerlayouttoolbar.DrawerLayoutToolBarAct"
android:theme="@style/toolTheme"/>
parent="Theme.AppCompat.Light.NoActionBar"看意思就知道继承一个没有ActionBar的父类（不严谨的说法，简单粗暴嘛）。样式
@style/toolTheme定义在res\values\styles.xml文件里面，下图中android:colorPrimaryDark是设置顶部状态栏颜色的；↓↓↓↓重点 圈起来会考↓↓↓↓
注意：android:colorPrimary它是设置ActionBar颜色的，在这里我们使用的是ToolBar用这个并没有什么ruan(还是luan)用(咳咳 文明用语)。所以这个可以不要，那应该怎样做才能改变ToolBar的颜色呢？答案是在写ToolBar布局的时候直接设置android:background属性就行了。
<style name="toolTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#2e8abb</item>
<item name="android:colorPrimaryDark">#fff000</item>
</style>
image1.png
三、布局大法好
↓↓↓↓插个嘴↓↓↓↓
ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，考虑到仍有一部分用户的手机版本号低于5.0，所以，ToolBar也放进了support v7包内，使得低版本的系统也能使用上ToolBar。所以Demo中所用的
DrawerLayout与ToolBar都是v7包下面的。
- 前提先引入所需要的包，在AndroidStudio的Gradle中直接引入：
compile 'com.android.support:appcompat-v7:24.1.0'
- 创建布局文件activty_drawertool.xml
布局代码如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/dl_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--由于activity的Theme中的colorPrimary设置ActionBar的颜色，并不能设置ToolBar的颜色
所以这里手动设置background-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#2e8abb"
android:minHeight="60dp">
<TextView
android:id="@+id/tv_temp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="自定义"/>
</android.support.v7.widget.Toolbar>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="主界面"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@android:color/holo_green_dark">
<ListView
android:id="@+id/lv_data"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="@android:color/transparent"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
好了 简单的创建了一个布局，根布局就是今天我们的主角DrawerLayout（也可以不用在跟布局这里，我只是简单粗暴）。
↓↓↓↓重点又来了 往下看↓↓↓↓
- DrawerLayout最好为界面的根布局，官方文档大概的意思，否则可能会出现触摸事件被屏蔽的问题；
- 主内容区的布局代码要放在侧滑菜单布局（你想展示在侧滑的部分）的前面, 因为 XML 顺序意味着按层叠顺序排序，并且抽屉式导航栏必须位于内容顶部(我这里没有放在顶部，想放在顶部可将根布局设置为
LinearLayout，并将上面的示例代码中的ToolBar布局与DrawerLayout布局分离即可！！由于我没有把ToolBar放在DrawerLayout顶部所以侧滑的时候会把ToolBar给遮住)；- 侧滑菜单部分的布局（示例中用的是ListView）必须设置
layout_gravity属性，他表示侧滑菜单是在左边还是右边，而且如果不设置在打开关闭抽屉的时候会报错，设置了android:layout_gravity="start/left"的视图才会被认为是侧滑菜单。
四、无bug不代码
以下就是新建的DrawerLayoutToolBarAct，继承于AppCompatActivity，不继承Activity说一下：直接继承Activity，它的很多功能都不能向低版本兼容（只是其中一个原因，还是那句话 ↓简单粗暴↓ 重点圈起来要考）。
/**
* Created by Leogh on 2017/8/23.
*/
public class DrawerLayoutToolBarAct extends AppCompatActivity {
private Toolbar toolbar;
private DrawerLayout drawerlayout;
private ListView lv_data;
private String[] lvs = {"List Item 01", "List Item 02", "List Item 03", "List Item 04"};
private ArrayAdapter arrayAdapter;
private ActionBarDrawerToggle drawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawertool);
initView();
}
private void initView() {
drawerlayout = (DrawerLayout) findViewById(R.id.dl_left);
lv_data = (ListView) findViewById(R.id.lv_data);
toolbar = (Toolbar) findViewById(R.id.toolbar);
//标题+颜色
toolbar.setTitle("Title");
toolbar.setTitleTextColor(Color.YELLOW);
//子标题+颜色
toolbar.setSubtitle("subTitle");
toolbar.setSubtitleTextColor(Color.GREEN);
drawerToggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar, R.string.app_name, R.string.app_name) {
@Override
public void onDrawerOpened(View drawerView) {//完全打开时触发
super.onDrawerOpened(drawerView);
Toast.makeText(DrawerLayoutToolBarAct.this,"onDrawerOpened",Toast.LENGTH_SHORT).show();
}
@Override
public void onDrawerClosed(View drawerView) {//完全关闭时触发
super.onDrawerClosed(drawerView);
Toast.makeText(DrawerLayoutToolBarAct.this,"onDrawerClosed",Toast.LENGTH_SHORT).show();
}
/**
* 当抽屉被滑动的时候调用此方法
* slideOffset表示 滑动的幅度（0-1）
*/
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
}
/**
* 当抽屉滑动状态改变的时候被调用
* 状态值是STATE_IDLE（闲置--0）, STATE_DRAGGING（拖拽的--1）, STATE_SETTLING（固定--2）中之一。
*具体状态可以慢慢调试
*/
@Override
public void onDrawerStateChanged(int newState) {
super.onDrawerStateChanged(newState);
}
};
//通过下面这句实现toolbar和Drawer的联动：如果没有这行代码，箭头是不会随着侧滑菜单的开关而变换的（或者没有箭头），
// 可以尝试一下，不影响正常侧滑
drawerToggle.syncState();
drawerlayout.setDrawerListener(drawerToggle);
//去掉侧滑的默认图标（动画箭头图标），也可以选择不去，
//不去的话把这一行注释掉或者改成true，然后把toolbar.setNavigationIcon注释掉就行了
drawerToggle.setDrawerIndicatorEnabled(false);
//可在toolbar上设置图标来作为侧滑的默认图标
toolbar.setNavigationIcon(R.mipmap.ic_launcher);
setSupportActionBar(toolbar);
//toolbar设置的图标控制drawerlayout的侧滑
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (drawerlayout.isDrawerOpen(GravityCompat.START)){
drawerlayout.closeDrawer(GravityCompat.START);
} else {
drawerlayout.openDrawer(GravityCompat.START);
}
}
});
//侧滑区域的列表
arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvs);
lv_data.setAdapter(arrayAdapter);
toolbar.findViewById(R.id.tv_temp).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(DrawerLayoutToolBarAct.this, "自定义", Toast.LENGTH_SHORT).show();
}
});
}
}
以上代码片段里面一大堆注释，应该很直观了，就是乱乱的，用的时候整理一下就OK了。
效果图
侧滑打开.png
![]()
侧滑关闭.png
侧滑关闭.png
