DrawerLayout-侧滑菜单

前言

本篇文章，参考《第一行代码第2版》

正文

1. 简介

DrawerLayout 是谷歌推荐的一种实现侧滑菜单的控件，是 Meterial Design 中非常常见的效果。

2. 简单用法

2.1 创建项目之后，我们修改 xml 布局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout       
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimaryDark"
            android:minHeight="?attr/actionBarSize"
            android:paddingTop="25dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <!--自定义控件-->
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="自定义标题"
                android:textSize="20dp"
                android:textStyle="bold" />
        </android.support.v7.widget.Toolbar>
    </FrameLayout>
    <!--  android:layout_gravity="start"  属性必须指定，left 菜单在左侧，right 菜单在右侧，start
               表示跟随系统-->

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff"
        android:gravity="center"
        android:paddingTop="50dp"
        android:text="我是菜单栏"
        android:textSize="30dp" />

</android.support.v4.widget.DrawerLayout>

最外层是 android.support.v4.widget 包下的 DrawerLayout
接下来是两个子 View ，一个为 FrameLayout ,另一个为 TextView
FrameLayout 中是一个 Toolbar ，注意，FrameLayout 这一层视图不能省，否则 Toolbar 会撑满整个屏幕，就算设置 Toolbar 的高度为固定值也不行。
DrawerLayout 的直接子 View 中的 TextView 就是我们要显示的菜单，当然也可以是其他的布局，因为 DrawerLayout 是继承自 ViewGroup 的，我只是图省事，写了个 Textview，

2.2 Activity 中的代码如下：

package io.github.adsuper.drawerlayouttext;

import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.WindowManager;


public class MainActivity extends AppCompatActivity {

    DrawerLayout drawerlayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //设置透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setNavigationIcon(R.drawable.setting);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

}

注意： Activity 中的代码全都是设置状态栏和 Toolbar 的，与 DrawerLayout 无关，这里贴出来，只是为了美化 Toolbar 而已！

对 Toolbar 不太了解的可以参考我这篇博客：Android 之 Toolbar 汇总

2.3 运行之后 ( API 19 手机 ) ，效果图如下所示：

菜单栏打开前：

image
菜单栏打开后：

image

2.4 优化启动方式

这个菜单栏的启动方式只有一种，只有在贴近屏幕边缘的地方滑动才会出现，为了防止有些用户压根就不知道菜单栏的这种情况，我们增加一种启动方式
看到标题栏左上角的那个导航图标了吧，我们就是要把这个图标和菜单栏联动起来
布局文件不用改变，修改 Activity 中的代码如下：

package io.github.adsuper.drawerlayouttext;

import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.WindowManager;

public class MainActivity extends AppCompatActivity {

    DrawerLayout drawerlayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //设置透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        //查找 drawerlayout 控件
        drawerlayout = (DrawerLayout) findViewById(R.id.drawerlayout);

        toolbar.setNavigationIcon(R.drawable.setting);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

    }
    
    //重写 onOptionsItemSelected 方法
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {
        //这个 id 就是标题栏左侧的导航图标的 id 是固定的！
            case android.R.id.home:
            //使用 openDrawer 打开菜单栏
                drawerlayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;

    }
}

注意： 查找 drawerlayout 控件时，本人使用了 ButterKnife 8.5.1 版本，却无法把效果显示出来。

打开或关闭 DrawerLayout ，执行以下代码：

//关闭
drawerLayout.closeDrawer(GravityCompat.START);
//打开
drawerLayout.openDrawer(GravityCompat.START);

2.5 修改 DrawerLayout 位置

接下来说的是修改 DrawerLayout 上边距的位置，将其放在 Toolbar 的下方
只需要修改布局，改变 DrawerLayout 的布局位置即可，xml 代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:minHeight="?attr/actionBarSize"
        android:paddingTop="25dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <!--自定义控件-->
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="自定义标题"
            android:textSize="20dp"
            android:textStyle="bold" />


    </android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--  android:layout_gravity="start"  属性必须指定，left 菜单在左侧，right 菜单在右侧，start
            表示跟随系统-->
        <TextView
            android:id="@+id/textview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#e98484"
            android:gravity="center"
            android:paddingTop="50dp"
            android:text="我是菜单栏"
            android:textSize="30dp" />

    </android.support.v4.widget.DrawerLayout>


</LinearLayout>

运行效果如下所示：

image

3. DrawerLayout 配合 NavigatianView 使用

实际上 DrawerLayout 可以内置任何布局来完善你的侧滑菜单，但是谷歌推荐使用 NavigationView ， NavigationView 是 Design Support 库中提供的一个控件，此控件会简化侧滑菜单页面的实现，下边开始使用：

3.1 添加 Design Support 依赖包

// 个人认为，包的版本与 V7 包一致
compile 'com.android.support:design:25.3.1'

3.2 xml 布局中，将原来的 TextView 替换为 NavigationView，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimaryDark"
            android:fitsSystemWindows="true"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <!--自定义控件-->
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="自定义标题"
                android:textSize="20dp"
                android:textStyle="bold" />
        </android.support.v7.widget.Toolbar>
    </FrameLayout>
    <!--  android:layout_gravity="start"  属性必须指定，left 菜单在左侧，right 菜单在右侧，start
               表示跟随系统-->

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_head_layout"
        app:menu="@menu/navigation_menu"></android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

效果如下所示：

image

注意 NavigationView 中的两条属性

app:headerLayout="@layout/navigation_head_layout"
app:menu="@menu/navigation_menu"

app:headerLayout 为头布局，即粉色背景部分，navigation_head_layout 的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<!--180dp 是 NavigationView 比较适合的高度-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="@color/colorAccent">
    
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circle_me"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:src="@drawable/navigation_me" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textview1"
        android:layout_alignParentBottom="true"
        android:text="个人博客：https://adsuper.github.io"
        android:textSize="16dp"
        android:textColor="#fff"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textview2"
        android:layout_above="@id/textview1"
        android:text="珞璃之神"
        android:textSize="16dp"
        android:textColor="#fff"
        />
</RelativeLayout>

其中，CircleImageView 是一个第三方的，专门将图片设置为圆形的框架，需要添加依赖：

compile 'de.hdodenhof:circleimageview:2.1.0'

app:menu 为下方具体的菜单选项，navigation_menu 布局如下：(需要在 menu 文件夹下创建)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- group 标签中的 android:checkableBehavior="single 设置为单选-->
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/mingjiao"
            android:icon="@drawable/navigation_icon"
            android:title="明教"></item>
        <item
            android:id="@+id/tianshan"
            android:icon="@drawable/navigation_icon"
            android:title="天山"></item>
        <item
            android:id="@+id/gaibang"
            android:icon="@drawable/navigation_icon"
            android:title="丐帮"></item>
        <item
            android:id="@+id/murong"
            android:icon="@drawable/navigation_icon"
            android:title="慕容"></item>
        <item
            android:id="@+id/xiaoyao"
            android:icon="@drawable/navigation_icon"
            android:title="逍遥"></item>
        <item
            android:id="@+id/tianlong"
            android:icon="@drawable/navigation_icon"
            android:title="天龙"></item>
        <item
            android:id="@+id/wudang"
            android:icon="@drawable/navigation_icon"
            android:title="武当"></item>

    </group>
</menu>

3.3 activity 中的代码如下:

package io.github.adsuper.drawerlayouttext;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.WindowManager;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    DrawerLayout drawerlayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4_2);
        //设置透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);


        }

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerlayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        NavigationView navigationView = (NavigationView) findViewById(R.id.navigationview);


        toolbar.setNavigationIcon(R.drawable.setting);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

        navigationView.setCheckedItem(R.id.mingjiao);//设置默认选择的 item
        //设置 item 的点击事件
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

//                drawerlayout.closeDrawer(GravityCompat.START);

                return true;
            }
        });
    }
    /**
     * 重写 onOptionsItemSelected 方法，实现标题栏左侧导航按钮打开侧滑菜单
     * @param item
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {
            case android.R.id.home:
                drawerlayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;

    }
}

3.4 当然也可以改变侧滑菜单的位置，也就是上边距的位置，放在 Toolbar 下,只需要修改布局即可：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:minHeight="?attr/actionBarSize"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <!--自定义控件-->
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="自定义标题"
            android:textSize="20dp"
            android:textStyle="bold" />


    </android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.NavigationView
            android:id="@+id/navigationview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/navigation_head_layout"
            app:menu="@menu/navigation_menu"
            />

    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

显示效果如下：

image

至此，完结

最后编辑于：2017.12.11 02:12:10

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342

DrawerLayout-侧滑菜单

前言

正文

1. 简介

2. 简单用法

2.1 创建项目之后，我们修改 xml 布局如下：

2.2 Activity 中的代码如下：

2.3 运行之后 ( API 19 手机 ) ，效果图如下所示：

2.4 优化启动方式

2.5 修改 DrawerLayout 位置

3. DrawerLayout 配合 NavigatianView 使用

3.1 添加 Design Support 依赖包

3.2 xml 布局中，将原来的 TextView 替换为 NavigationView，如下所示：

3.3 activity 中的代码如下:

3.4 当然也可以改变侧滑菜单的位置，也就是上边距的位置，放在 Toolbar 下,只需要修改布局即可：

推荐阅读更多精彩内容