备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Android下DrawerLayout的使用

2015-11-12 967
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Android下DrawerLayout的使用 DrawerLayout见名知意，就是一个具有抽屉效果的布局，看看这个效果图，是不是感觉很炫酷 这么炫的效果其实不一定非要用类似一些SlidingMenu这样的框架才能实现，原生库就有对这种效果的支持，今天我们就一起来学习一下DrawerLayout的使用。

Android下DrawerLayout的使用

DrawerLayout见名知意，就是一个具有抽屉效果的布局，看看这个效果图，是不是感觉很炫酷

P1

这么炫的效果其实不一定非要用类似一些SlidingMenu这样的框架才能实现，原生库就有对这种效果的支持，今天我们就一起来学习一下DrawerLayout的使用。

其实使用起来非常简单。

步骤

添加容器

显示抽屉效果需要一个容器，不过当然不能用RelativeLayout或者LinearLayout这样的容器了，我们需要使用「android.support.v4.widget.DrawerLayout」这个布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


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

我想说到此，我们已经完成快一半了，是不是不太相信，这么简单？

我们再添加一个抽屉的布局，效果就实现了，就是这么简单。

添加抽屉

添加抽屉布局也很简单，任然需要一个抽屉的容器，这个容器叫做「android.support.design.widget.NavigationView」，我要需要导入Library以后才可以使用，可以在gradle文件里添加依赖

dependencies {
    ……
    compile 'com.android.support:design:23.0.1'
}

也可以通过Studio搜索添加

P2

导入依赖以后，添加布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是主界面的内容"
        android:textSize="40dp" />

    <android.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">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000000"
            android:gravity="center"
            android:text="我是侧拉栏的内容"
            android:textColor="#FFFFFF"
            android:textSize="20dp" />

    </android.support.design.widget.NavigationView>

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

到此为止，我们已经完成了抽屉的效果，看一下效果图

P3

接下来，我们再研究一下如何使用（控制），就大功告成了。

使用

说到使用，无非就是控制抽屉的开关，锁定、宽度，这些内容

监听抽屉的开关和展开状态

package com.example.kongqw.myapplication;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements DrawerLayout.DrawerListener {

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

        // 获取装抽屉的容器
        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        // 添加对抽屉的监听
        drawerLayout.setDrawerListener(this);
    }

    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
        ToastUtil.show(this, "slideOffset = " + slideOffset);
    }

    @Override
    public void onDrawerOpened(View drawerView) {
        ToastUtil.show(this, "抽屉开");
    }

    @Override
    public void onDrawerClosed(View drawerView) {
        ToastUtil.show(this, "抽屉关");
    }

    @Override
    public void onDrawerStateChanged(int newState) {
        // ToastUtil.show(this, "抽屉状态改变");
    }
}
  • 效果图
    P4

控制打开抽屉

/**
 * 抽屉开
 *
 * @param view
 */
public void drawerOpen(View view) {
    mDrawerLayout.openDrawer(mDrawer);
}
  • 效果图
    P5

控制关闭抽屉

默认效果，点击任何位置都会关闭

/**
 * 抽屉关
 *
 * @param view
 */
public void drawerClose(View view) {
    mDrawerLayout.closeDrawer(mDrawer);
}

获取抽屉状态（打开还是关闭）

/**
 * 获取抽屉状态
 *
 * @param view
 */
public void isDrawerOpen(View view) {
    boolean isOpen = mDrawerLayout.isDrawerOpen(mDrawer);
    ToastUtil.show(this, "抽屉状态:" + (isOpen ? "开" : "关"));
}
  • 效果图
    P6

让抽屉以开的状态锁住

/**
 * 让抽屉以开的状态锁住
 *
 * @param view
 */
public void lockModeLockedOpen(View view) {
    // 将抽屉以开的状态锁住
    mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_OPEN);
}
  • 效果图
    P7

让抽屉以关的状态锁住

/**
 * 让抽屉以关的状态锁住
 *
 * @param view
 */
public void lockModeLockedClose(View view) {
    // 将抽屉以关的状态锁住
    mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
}
  • 效果图
    P8

让抽屉从右边滑出

只要将抽屉容器里的layout_gravity改为end就可以了

<android.support.design.widget.NavigationView
    ……
    android:layout_gravity="end">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        ……
    </RelativeLayout>
</android.support.design.widget.NavigationView>
  • 效果图
    P9

修改抽屉宽度

直接修改抽屉容器里的layout_width调整宽度属性即可

源码

下面是讲解例子源码

XML布局

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="right"
        android:orientation="vertical">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="drawerOpen"
            android:text="抽屉开" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="drawerClose"
            android:text="抽屉关" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="isDrawerOpen"
            android:text="获取抽屉状态" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="lockModeLockedOpen"
            android:text="让抽屉以开的状态锁住" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="lockModeLockedClose"
            android:text="让抽屉以关的状态锁住" />
    </LinearLayout>

    <android.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">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000000"
            android:gravity="center"
            android:text="我是侧拉栏的内容"
            android:textColor="#FFFFFF"
            android:textSize="20dp" />

    </android.support.design.widget.NavigationView>

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

测试类

package com.example.kongqw.myapplication;

import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity implements DrawerLayout.DrawerListener {

    private DrawerLayout mDrawerLayout;
    private NavigationView mDrawer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 获取装抽屉的容器
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        // 获取抽屉
        mDrawer = (NavigationView) findViewById(R.id.nav_view);
        // 添加对抽屉的监听
        mDrawerLayout.setDrawerListener(this);
    }


    /**
     * 抽屉开
     *
     * @param view
     */
    public void drawerOpen(View view) {
        mDrawerLayout.openDrawer(mDrawer);
    }

    /**
     * 抽屉关
     *
     * @param view
     */
    public void drawerClose(View view) {
        mDrawerLayout.closeDrawer(mDrawer);
    }

    /**
     * 获取抽屉状态
     *
     * @param view
     */
    public void isDrawerOpen(View view) {
        boolean isOpen = mDrawerLayout.isDrawerOpen(mDrawer);
        ToastUtil.show(this, "抽屉状态:" + (isOpen ? "开" : "关"));
    }

    /**
     * 让抽屉以开的状态锁住
     *
     * @param view
     */
    public void lockModeLockedOpen(View view) {
        // 将抽屉以开的状态锁住
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_OPEN);
    }

    /**
     * 让抽屉以关的状态锁住
     *
     * @param view
     */
    public void lockModeLockedClose(View view) {
        // 将抽屉以关的状态锁住
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
    }

    /*
    * 下面监听抽屉开关的回调方法
    * ********************************************************************/
    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
        ToastUtil.show(this, "slideOffset = " + slideOffset);
    }

    @Override
    public void onDrawerOpened(View drawerView) {
        ToastUtil.show(this, "抽屉开");
    }

    @Override
    public void onDrawerClosed(View drawerView) {
        ToastUtil.show(this, "抽屉关");
    }

    @Override
    public void onDrawerStateChanged(int newState) {
        // ToastUtil.show(this, "抽屉状态改变");
    }
}

Toast工具类

相关博客：http://blog.csdn.net/q4878802/article/details/48782705

package com.example.kongqw.myapplication;

import android.content.Context;
import android.widget.Toast;

/**
 * Created by kongqw on 2015/11/12.
 */
public class ToastUtil {

    private ToastUtil() {
    }

    private static Toast mToast;

    public static void show(Context context, String string) {
        if (null == mToast) {
            mToast = Toast.makeText(context, "", Toast.LENGTH_SHORT);
        }
        mToast.setText(string);
        mToast.show();
    }
}
文章标签：
Android开发
容器
数据格式
XML
啊啊啊88jdk
目录
相关文章
路宇
|
8月前
|
缓存 Android开发
Android TabLayout的使用详解
Android TabLayout的使用详解
路宇
76 0
岁月不待人-祥
|
11月前
|
XML Android开发 数据格式
Android TabLayout的使用与总结
最近的新项目里老是会用到tablayout，便想着自己也总结下，加深印象，于是他来啦！
岁月不待人-祥
546 0
技术小阿哥
|
数据安全/隐私保护 Android开发 Java
android EditText inputType 及 android:imeOptions=”actionDone”
技术小阿哥
2455 0
余二五
|
Android开发 Java 数据格式
Android：TextSwitcher、imageSwitcher
余二五
1123 0
zting科技
|
Android开发 数据格式 XML
Android 中PopupWindow使用
zting科技
844 0
技术小胖子
|
Android开发 Java
Android ActionBarDrawerToggle、DrawerLayout、ActionBar 结合
技术小胖子
1080 0
科技小能手
|
Android开发
android的ViewFlipper
科技小能手
908 0
科技小能手
|
Android开发 索引
android的ImageSwitcher和TextSwitcher
科技小能手
793 0
zting科技
|
Android开发
Android ImageButton android:scaleType
zting科技
951 0
老朱教授
|
Android开发
Android -- DrawerLayout
老朱教授
745 0