Android中的布局资源本文介绍布局资源的通用配置与四种常用布局——表格布局、相对布局、帧布局、线性布局的实现。与前文

该文章建议先看前文再来看这篇：Android中的资源类型

View与ViewGroup

所有的UI元素都是通过View与ViewGroup构建的，对于一个Android应用的用户界面来说，ViewGroup作为容器盛装界面中的控件，它可以包含普通的View控件，也可以包含ViewGroup。

graph TD
ViewGroup --> ViewGroup1
ViewGroup --> View-a1 
ViewGroup --> View-a2
ViewGroup1 --> View-b1 
ViewGroup1 --> View-b2
ViewGroup1 --> View-b3

上面的尾号字母数字仅用于区分

界面布局编写方式

界面布局的编写方式有2种，第1种是在XML文件中编写布局，第2种是在Java代码中编写布局。
1. 在XML文件中编写布局（推荐此种方式编写布局）：有效的将界面中的布局代码与Java代码隔离，使程序的结构更加清晰。
2. 在Java代码中编写布局：在Android中所有布局和控件的对象都可以通过new关键字创建出来，将创建的View控件添加到ViewGroup布局中，从而实现View控件在布局界面中显示。
3. 在XML布局文件中定义xx布局时使用<XxxLayout>标签。

界面布局的通用属性

android:id：设置布局的标识。
1. 用于设置当前布局的唯一标识。
2. 在XML文件中它的属性值是通过“@+id/属性名称”定义。
android:layout_width：设置布局的宽度。
1. 用于设置布局的宽度，其值可以是具体的尺寸，如50dp，也可以是系统定义的值。
2. 系统定义的值有fill_parent、match_parent和wrap_content。
android: layout_height：设置布局的高度。
1. 用于设置布局的高度，其值可以是具体的尺寸，如50dp，也可以是系统定义的值。
2. 系统定义的值有fill_parent、match_parent和wrap_content。
  1. 例如，一个 TextView 设置为 wrap_content，它的宽度和高度会根据文本内容自动调整，以确保文本完全显示。
  2. 总结来说，fill_parent和match_parent实际上是等价的，都表示视图填充父容器；而wrap_content表示视图根据内容自动调整大小。在开发时，建议优先使用match_parent以保持代码的现代性和可读性。
android:background：设置布局的背景。
android:layout_margin：设置当前布局与屏幕边界或与周围控件的距离。
- 属性值为具体的尺寸，如45dp。
android:padding：设置当前布局与该布局中控件的距离。
- 其值可以是具体的尺寸，如45dp。

四种常见的布局资源类型

表格布局TableLayout

通过在TableLayout布局中添加TableRow布局来控制表格的行数，可以在TableRow布局中添加控件来控制表格的列数。
特点：表格形式排列。
基本语法格式：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
属性 = "属性值">  
<TableRow>  
UI控件  
</TableRow>

TableLayout继承自LinearLayout，因此它完全支持LinearLayout所支持的属性。
表格布局属性：

属性名称	功能描述
android:stretchColumns	设置该列被拉伸
android:shrinkColumns	设置该列被收缩
android:collapseColumns	设置该列被隐藏

表格布局中控件的常用属性：

属性名称	功能描述
android:layout_column	设置该单元显示位置
android:layout_span	设置该单元格占据几行，默认为1行

案例：设置3行3列的表格

描述：在activity_main.xml文件的TableLayout布局中放置3个TableRow布局，在TableRow布局中添加不同数量的按钮。
相关代码实现：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="2" >
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="按钮1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮2" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮3" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮4" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮5" />
    </TableRow>
</TableLayout>

效果图：

相对布局RelativeLayout

RelativeLayout（相对布局）通过相对定位的方式指定子控件的位置。
特点：通过相对定位排列。
基本语法格式：

<RelativeLayout  
xmlns:android="http://schemas.android.com/apk/res/android"  
属性 = "属性值"  
......>

在RelativeLayout中的子控件具备一些属性，用于指定子控件的位置，这些子控件的属性如下表：

属性名称	功能描述
android:layout_centerInParent	设置当前控件位于父布局的中央位置
android:layout_centerVertical	设置当前控件位于父布局的垂直居中位置
android:layout_centerHorizontal	设置当前控件位于父控件的水平居中位置
android:layout_above	设置当前控件位于某控件上方
android:layout_below	设置当前控件位于某控件下方
android:layout_toLeftOf	设置当前控件位于某控件左侧
android:layout_toRightOf	设置当前控件位于某控件右侧
android:layout_alignParentTop	设置当前控件是否与父控件顶端对齐
android:layout_alignParentLeft	设置当前控件是否与父控件左对齐
android:layout_alignParentRight	设置当前控件是否与父控件右对齐
android:layout_alignParentBottom	设置当前控件是否与父控件底端对齐
android:layout_alignTop	设置当前控件的上边界与某控件的上边界对齐
android:layout_alignBottom	设置当前控件的下边界与某控件的下边界对齐
android:layout_alignLeft	设置当前控件的左边界与某控件的左边界对齐
android:layout_alignRight	设置当前控件的右边界与某控件的右边界对齐

案例：在相对布局中指定3个按钮的位置

描述：在activity_main.xml文件的RelativeLayout布局中放置3个Button控件，分别表示“按钮1”、“按钮2”和“按钮3”。
代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/AppTheme"
    android:id="@+id/mainRelativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="1dp"

    >
    <Button
        android:id="@+id/btn_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"/>
    <Button
        android:id="@+id/btn_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="260dp"/>

    <Button
        android:id="@+id/btn_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/btn_two"
        android:layout_marginLeft="-5dp"
        android:layout_marginBottom="151dp"
        android:layout_toRightOf="@id/btn_two"
        android:text="按钮3" />
</RelativeLayout>

效果图：

帧布局FrameLayout

FrameLayout（帧布局）用于在屏幕上创建一块空白区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层。默认情况下，帧布局中的所有控件会与左上角对齐。
特点：开辟空白区域，帧里的控件(层)叠加。
代码：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
属性 ="属性值">

案例：通过帧布局FrameLayout来搭建一个霓虹灯界面

描述：帧布局FrameLayout中放置5个Button控件。
代码：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="2" >
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="按钮1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮2" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮3" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮4" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮5" />
    </TableRow>
</TableLayout>

效果图

线性布局LinearLayout

特点：以水平或垂直方向排列。
代码：

<LinearLayout  
xmlns:android="http://schemas.android.com/apk/res/android"  
属性 = "属性值"  
......>

属性说明：
1. android:orientation：设置布局内控件的排列顺序；
  1. vertical：表示LinearLayout布局内控件依次从上到下竖直排列。
  2. horizontal：表示LinearLayout布局内控件依次从左到右水平排列。
2. android:layout_weight：在布局内设置控件权重，属性值可直接写int值。
  1. 该属性被称为权重，通过设置该属性值，可使布局内的控件按照权重比显示大小。
  2. 在进行屏幕适配时起到关键作用。

案例：放置3个Button控件，分别用于显示按钮1、按钮2和按钮3。

说明：在activity_main.xml文件的LinearLayout布局中放置3个Button控件，分别用于显示按钮1、按钮2和按钮3。
注意：当控件使用权重属性 android: layout_weight时，布局宽度属性值android:layout_width通常设置为0dp。
代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮1"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮2"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="按钮3"/>
</LinearLayout>

效果图：