ToolBar+DrawerLayout使用

2017-08-23 本文已影响284人 Leogh

最近心血来潮想用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

ToolBar+DrawerLayout使用

简单流程

二、Manifest.xml中Activity的样式

三、布局大法好

四、无bug不代码

效果图

侧滑关闭.png

猜你喜欢

热点阅读