ToolBar+DrawerLayout使用

最近心血来潮想用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是我即将要自定义的样式，如下：

2. parent="Theme.AppCompat.Light.NoActionBar"看意思就知道继承一个没有ActionBar的父类（不严谨的说法，简单粗暴嘛）。

3. 样式@style/toolTheme定义在res\values\styles.xml文件里面，下图中android:colorPrimaryDark是设置顶部状态栏颜色的；

4. ↓↓↓↓重点 圈起来会考↓↓↓↓
   注意：android:colorPrimary它是设置ActionBar颜色的，在这里我们使用的是ToolBar用这个并没有什么ruan(还是luan)用(咳咳 文明用语)。所以这个可以不要，那应该怎样做才能改变ToolBar的颜色呢？答案是在写ToolBar布局的时候直接设置android:background属性就行了。

image1.png

---

三、布局大法好

↓↓↓↓插个嘴↓↓↓↓

ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，考虑到仍有一部分用户的手机版本号低于5.0，所以，ToolBar也放进了support v7包内，使得低版本的系统也能使用上ToolBar。所以Demo中所用的DrawerLayout与ToolBar都是v7包下面的。

1. 前提先引入所需要的包，在AndroidStudio的Gradle中直接引入：

compile 'com.android.support:appcompat-v7:24.1.0'

2. 创建布局文件activty_drawertool.xml
   布局代码如下：

好了 简单的创建了一个布局，根布局就是今天我们的主角DrawerLayout（也可以不用在跟布局这里，我只是简单粗暴）。

↓↓↓↓重点又来了 往下看↓↓↓↓

1. DrawerLayout最好为界面的根布局，官方文档大概的意思，否则可能会出现触摸事件被屏蔽的问题；
2. 主内容区的布局代码要放在侧滑菜单布局（你想展示在侧滑的部分）的前面, 因为 XML 顺序意味着按层叠顺序排序，并且抽屉式导航栏必须位于内容顶部(我这里没有放在顶部，想放在顶部可将根布局设置为LinearLayout，并将上面的示例代码中的ToolBar布局与DrawerLayout布局分离即可！！由于我没有把ToolBar放在DrawerLayout顶部所以侧滑的时候会把ToolBar给遮住)；
3. 侧滑菜单部分的布局（示例中用的是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