Material Design整理（四）——DrawerLayout

github地址 点击打开

简介

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件；

DrawerLayout分为侧边菜单和主内容两个部分，侧边菜单可以根据手势或点击控制展开与隐藏，主内容区可随菜单点击而切换（自己实现）；

DrawerLayout 提供

• 当界面弹出的时候，主要内容区会自动背景变黑，当点击内容区的时候，抽屉布局会消失
• 在屏幕边缘手势滑动 会拉出抽屉布局
• 注意：当按后退键的时候，如果抽屉布局正在显示，则需要关闭抽屉布局

效果

使用

布局中

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

    .support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.jia.mddemo.MainActivity">

        .support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            .support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        .support.design.widget.AppBarLayout>

        "@layout/content_main" />

        .support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email" />

    .support.design.widget.CoordinatorLayout>

    .support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_drawer"
        app:menu="@menu/activity_drawer_drawer" />
.support.v4.widget.DrawerLayout>

注意：在侧滑菜单区必须设置 android:layout_gravity 这个属性，只要布局中设置了android:layout_gravity ，它就是侧滑菜单，当然，它可以是任一View或ViewGroup

代码中

// 从左侧打开抽屉
drawer.openDrawer(Gravity.LEFT);
// 从左侧打开抽屉，并且有动画效果
drawer.openDrawer(Gravity.LEFT, true);
// 关闭抽屉
drawer.closeDrawer(Gravity.LEFT);
// 关闭抽屉，且有动画效果
drawer.closeDrawer(Gravity.LEFT,true);
// 关闭所有抽屉 
drawer.closeDrawers();

判断打开状态

drawer.isDrawerOpen(Gravity.LEFT);

控制手势

// 禁止手势滑动
drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
// 允许手势滑动
drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);

监听事件

drawer.setDrawerListener(new DrawerLayout.DrawerListener() {

    // 抽屉被滑动时执行
    // slideOffset的值从0到1，表示滑动的幅度
    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {

    }

    // 抽屉完全打开时执行
    @Override
    public void onDrawerOpened(View drawerView) {
        drawer.setClickable(true);
    }

    // 抽屉完全关闭时执行
    @Override
    public void onDrawerClosed(View drawerView) {

    }

    // 状态改变时执行
    // slideOffset为0表示闲置，slideOffset为1表示正在拖拽，slideOffset为2表示固定
    @Override
    public void onDrawerStateChanged(int newState) {

    }
});

点击事件穿透问题

DrawerLayout界面点击事件穿透问题，即点击Drawerlayout上面的区域，会发现该位置DrawerLayout覆盖掉的区域的控件可以被点击

解决方法：在抽屉完全打开时设置drawer.setClickable(true); 注意，在布局中设置没有效果，必须手动设置