Android基础学习笔记8:常用布局 - 线性布局

学习目标

能说出安卓界面元素层次
能说出安卓常用的布局
能说出线性布局常用的属性
能利用线性布局实现简单的界面设计
能利用线性布局嵌套实现比较复杂的界面
在这里插入图片描述

一、界面与布局概述

(一)界面

应用界面包含用户可查看并与之交互的所有内容。安卓提供丰富多样的预置 UI 组件,例如结构化布局对象和 UI 控件,您可以利用这些组件为您的应用构建图形界面。安卓还提供其他界面模块,用于构建特殊界面,例如对话框、通知和菜单。

(二)布局

布局可定义应用中的界面结构(例如 Activity 的界面结构)。布局中的所有元素均使用 View 和 ViewGroup 对象的层次结构进行构建。View 通常绘制用户可查看并进行交互的内容。然而,ViewGroup 是不可见容器,用于定义 View 和其他 ViewGroup 对象的布局结构。

1、视图层次结构图

在这里插入图片描述

2、UI容器 (Container)

UI容器指ViewGroup,也是View的子类,而ViewGroup有几个布局子类:LinearLayout、RelativeLayout、AbsoluteLayout、TableLayout、GridLayout,ConstraintLayout。
在这里插入图片描述

3、UI控件 (Control)

UI控件指Widget(微件),不能再包含其它元素的控件,例如标签(TextView)、文本框(EditText)、按钮(Button)、 活动栏(Action Bar)、对话框(Dialogs)、状态栏(Status)、通知(Notifications)。

4、两种方式声明布局

在 XML 中声明界面元素:Android 提供对应 View 类及其子类的简明 XML 词汇,如用于微件和布局的词汇。也可使用 Android Studio 的 Layout Editor,并采用拖放界面来构建 XML 布局。
在运行时实例化布局元素:应用可通过编程创建 View 对象和 ViewGroup 对象(并操纵其属性)。
在这里插入图片描述

二、线性布局概述

线性布局(LinearLayout)是一种比较常用且简单的布局方式。在这种布局中,所有的子元素都是按照垂直或水平的顺序排列在界面上。如果是垂直排列,每个子元素占一行,如果是水平排列,则每个子元素占一列。线性布局可以支持布局样式嵌套实现复杂的布局样式。

(一)继承关系图

在这里插入图片描述

(二)常用属性

layout_width:布局宽度(match_parent,wrap_conent)
layout_height:布局高度(match_parent,wrap_conent)
orietation:方向(vertical,horizontal)
gravity:对齐方式(left, right, center, top, bottom…)
background:背景(颜色、图片、选择器)
weight:比重(用于瓜分手机屏幕)
padding:内边距 (paddingLeft, paddingRight, paddingTop, paddingBottom)
margin:外边距 (marginLeft, marginRight, marginTop, marginBottom)

三、案例演示 —— 线性布局属性

1、创建安卓应用【LinearLayoutDemo】

2、主布局资源文件activity_main.xml

在这里插入图片描述

将约束布局改成线性布局
在这里插入图片描述

添加两个按钮
在这里插入图片描述

3、启动应用,查看效果

在这里插入图片描述

设置线性布局的方向 - orientation
在这里插入图片描述

启动应用,查看效果

在这里插入图片描述

设置内边距 - padding

在这里插入图片描述

启动应用,查看效果
在这里插入图片描述

设置线性布局的对齐方式 - gravity

left、right、center搭配,共有九种对齐方式

线性布局gravity的默认值是left|top——左上

右上对齐 - right|top
在这里插入图片描述

启动应用,查看效果
在这里插入图片描述

右中对齐 - right|center
在这里插入图片描述

右下对齐 - right|bottom
在这里插入图片描述

水平居中 - center_horizontal,相当于center|top
在这里插入图片描述

垂直居中 - center_vertical,相当于left|center
在这里插入图片描述

居中对齐 - center
在这里插入图片描述

背景属性(背景色、背景图片、背景配置文件)

设置背景色
在这里插入图片描述

启动应用,查看效果
在这里插入图片描述

设置背景图片
在这里插入图片描述

启动应用,查看效果
在这里插入图片描述

在第二个按钮下添加一个线性布局
在这里插入图片描述

在drawable目录里创建自定义边框配置文件customer_border.xml
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>

<corners android:radius="10dp" />
<solid android:color="#04be02" />
<stroke
    android:width="1dp"
    android:color="#555555" />

启动应用,查看效果
在这里插入图片描述

设置过渡色效果
在这里插入图片描述

四、案例演示 —— 线性布局嵌套

1、创建安卓应用【NestedLinearLayout】

2、将三张小图片拷贝到res/drawable目录

3、布局资源文件activity_main.xml

在这里插入图片描述

将约束布局改成线性布局,设置方向属性
在这里插入图片描述

添加第一个线性布局
在这里插入图片描述

添加第二个线性布局
在这里插入图片描述

添加第三个线性布局
在这里插入图片描述

运行程序,查看结果(三个子布局按照1:2:3垂直瓜分手机屏幕)
在这里插入图片描述

在第一个布局里添加三个图像控件
在这里插入图片描述

第二个线性布局里再嵌套一个横向的线性布局,里面添加三个按钮
在这里插入图片描述

在第二个线性布局里再添加一个编辑框
在这里插入图片描述

启动应用,查看效果
在这里插入图片描述

本来三个子布局按照1:2:3比例垂直瓜分手机屏幕,但是在第二个子布局里添加子控件之后,瓜分比例就发生变化了,第二个子布局瓜分比例超过了第三个子布局,怎么才能保持原先的瓜分比例呢?
将三个子布局的layout_height属性值统统设置为0dp
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

启动应用,查看效果
在这里插入图片描述

第三个线性布局再添加三个线性布局
在这里插入图片描述

启动应用,查看效果
在这里插入图片描述

在第三个线性布局嵌套的第一个子布局里添加三个按钮
在这里插入图片描述

在第三个线性布局嵌套的第二个子布局里添加两个按钮
在这里插入图片描述

在第三个线性布局嵌套的第二个子布局里添加三个按钮
在这里插入图片描述

4、启动应用,查看效果

紫色部分太窄,按钮显示不好看
在这里插入图片描述

将紫色部分与蓝色部分的瓜分比例交换
在这里插入图片描述

查看布局资源文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="#ffff00"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imgSun"
        android:layout_width="45dp"
        android:layout_height="46dp"
        android:src="@drawable/img01" />

    <ImageView
        android:id="@+id/imgMoon"
        android:layout_width="30dp"
        android:layout_height="47dp"
        android:src="@drawable/img02" />

    <ImageView
        android:id="@+id/imgStar"
        android:layout_width="38dp"
        android:layout_height="50dp"
        android:src="@drawable/img03" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:background="#00ff00"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <Button
            android:id="@+id/btnSunInvisbile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" />

        <Button
            android:id="@+id/btnSunGone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2" />

        <Button
            android:id="@+id/btnSunVisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3" />

        <Button
            android:id="@+id/btnSunToFlower"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4" />
    </LinearLayout>

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#aaaaaa"
        android:ems="10"
        android:inputType="textMultiLine"
        android:lines="5"
        android:padding="10dp"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbars="vertical"
        android:text="演示线性布局的嵌套:横向的、纵向的布局可以相互嵌套,形成比较复杂的布局。" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:background="#0000ff"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#ffff00"
        android:gravity="center"
        android:orientation="vertical">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:background="#ff00ff"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" />

        <Button
            android:id="@+id/button12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:gravity="center"
        android:orientation="vertical">

        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" />

        <Button
            android:id="@+id/button8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2" />

        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3" />
    </LinearLayout>
</LinearLayout>

五、案例演示 - 用户登录界面

(一)运行效果

在这里插入图片描述

(二)实现步骤

1、创建安卓应用【UserLogin】

2、将图片素材拷贝到drawable目录

3、主布局资源文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1.56"
    android:background="#0a0943"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="90dp"
        android:layout_weight="1.4"
        android:background="@drawable/login_txt_icon" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        android:layout_weight="1"
        android:background="@drawable/login_title_bg" />
</LinearLayout>

<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginTop="-20dp"
    android:layout_marginBottom="20dp"
    android:background="@drawable/login_icon" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:background="@drawable/input_bg"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/username_icon" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@null"
            android:hint="@string/input_username" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/input_border"
        android:gravity="center_vertical">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/password_icon" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@null"
            android:hint="请输入您的密码 | password" />
    </LinearLayout>

    <Button
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/button_border"
        android:text="登录"
        android:textColor="#ffffff"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/copyright" />
</LinearLayout>

4、字符串资源文件strings.xml

用户登录 请输入您的用户名 | username COPYRIGHT 20200107 JIANGWEI TEC.CO.LTD. V1.10 ### 5、创建输入边框配置文件 input_border.xml <?xml version="1.0" encoding="utf-8"?> ### 6、创建按钮背景边框配置文件 button_border.xml <?xml version="1.0" encoding="utf-8"?>

7、修改样式文件,不显示活动栏

在这里插入图片描述

8、启动应用,查看效果

在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

土豆_wk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值