首页 > 其他分享> > 安卓使用DrawerLayout实现左右划效果（抽屉动画）以及简单布局

安卓使用DrawerLayout实现左右划效果（抽屉动画）以及简单布局

2019-06-02 15:00:14 作者：互联网

安卓使用DrawerLayout实现左右划效果（抽屉动画）以及简单布局

开发环境为Android 3.3.1 模拟设备：3.7 WVGA (Nexus One) API 28

在android 5.0 中新增了 DrawerLayout控件，此控件可以实现抽屉动画，展现侧滑效果。侧滑包括了左侧滑和右侧滑。在qq，酷狗音乐等都可以看到抽屉动画的应用

在这里插入图片描述

创建程序

首先我们可以创建一个名为DrawerLayout的程序。在界面布局文件activity_main.xml中引入DrawerLayout控件。DrawLayout控件需要使用全路径名称

 <android.support.v4.widget.DrawerLayout

以下是activity_main.xml完整代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="主界面"
                android:layout_gravity="center"
                android:textSize="20sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="200sp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="#aaaaaa"
            android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="左侧滑界面"
            android:layout_gravity="center"
            android:textSize="20sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="200sp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:background="#bbbbbb"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="右侧滑界面"
                android:layout_gravity="center"
                android:textSize="20sp"/>
        </LinearLayout>

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

</android.support.constraint.ConstraintLayout>

从以上代码可以发现，在DrawerLayout标签中创建3个LinearLayout线性布局，分别为主界面布局，左侧侧滑界面，右侧侧滑界面。其中比较重要的是后两个LinearLayout布局的第一行的layout_width属性，可以用来设置界面划出的宽度。layout_gravity属性可以设置该布局的方位，left为左侧滑界面，right为右侧滑界面

运行程序

DrawerLayout控件在布局文件中引入就可以了，不用写其他的用户交互代码就可以有侧滑效果。修改完activity_main.xml文件后运行程序就可出现文章开头的效果。

功能拓展

我们可以利用抽屉动画模拟QQ界面，效果如下：

在这里插入图片描述

主界面使用ImageView插入图片，图片放在app-res-drawable中，可直接从剪贴板粘贴添加图片，注意图片命名。接下来两个LinearLayout线性布局实现账号密码输入，每个LinearLayout包含TextView文本控件和EditText文本编辑控件，下方添加一个Button按钮提交登录信息。
左侧界面线性布局和表格布局结合。每一行是一个LinearLayout，每个LinearLayout包含一个TableLayout，每个TableLayout包含3个文本框，文本框的宽度由每个文本框的layout_weight按比例控制。
右侧界面插入一张图片，方法同上。使用ImageView，background属性会根据ImageView的大小进行伸缩。若把background改成src则会以原图大小显示

以下是activity_main.xml完整代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#E6E6E6"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="40dp"
                android:background="@drawable/head"/>
            <LinearLayout
                android:id="@+id/ll_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/iv"
                android:layout_centerVertical="true"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="15dp"
                android:background="#ffffff">
                <TextView
                    android:id="@+id/tv_number"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="10dp"
                    android:text="账号:"
                    android:textColor="#000"
                    android:textSize="15sp"/>
                <EditText
                    android:id="@+id/et_number"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:background="@null"
                    android:padding="10dp"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/ll_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/ll_number"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="#ffffff">
                <TextView
                    android:id="@+id/tv_password"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="10dp"
                    android:text="密码:"
                    android:textColor="#000"
                    android:textSize="15sp"/>
                <EditText
                    android:id="@+id/et_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_toRightOf="@id/tv_password"
                    android:background="@null"
                    android:inputType="textPassword"
                    android:padding="10dp"/>
            </LinearLayout>
            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/ll_password"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="50dp"
                android:background="#3C8DC4"
                android:text="登录"
                android:textColor="#ffffff"
                android:textSize="20sp"/>
        </RelativeLayout>

        <LinearLayout
            android:layout_width="200sp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="#aaaaaa"
            android:orientation="vertical">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="30dp">

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:text="了解会员特权" />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:text="         " />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:hint=">" />
            </TableRow>
            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="30dp">

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:text="QQ钱包" />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:text="         " />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:hint=">" />
            </TableRow>
            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="30dp">

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:text="个性装扮" />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:text="         " />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:hint=">" />
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="30dp">

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:text="我的收藏" />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:text="         " />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:hint=">" />
            </TableRow>
            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="30dp">

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:text="我的相册" />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:text="         " />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:hint=">" />
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="30dp">

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:text="我的文件" />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="3"
                    android:text="         " />

                <TextView
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:hint=">" />
            </TableRow>

        </LinearLayout>
        <LinearLayout
            android:layout_width="200sp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:background="#bbbbbb"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background ="@drawable/p1"/>
        </LinearLayout>

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

</android.support.constraint.ConstraintLayout>

作者：苏洋龙原文地址

标签：控件,界面,侧滑,动画,安卓,布局,DrawerLayout,LinearLayout
来源： https://blog.csdn.net/fjnu_se/article/details/90738702