Android 常见界面布局详解

一、引言

为适配不同界面风格，Android系统提供了多种界面布局。其中常用的有LinearLayout（线性布局）、TableLayout（表格布局）、FrameLayout（帧布局）、ConstraintLayout（约束布局），此外，RelativeLayout（相对布局）虽已过时，但因使用范围广仍需掌握。本文将对这些常见界面布局进行详细讲解。

二、常见界面布局详解

（一）LinearLayout（线性布局）

1. 基本概念

LinearLayout（线性布局）通常指定布局内的子控件水平或垂直排列。

2. XML基本语法格式

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

3. 关键属性

• android:orientation ：可选值为vertical和horizontal。
  • vertical：表示LinearLayout布局内控件依次从上到下垂直排列。
  • horizontal：表示LinearLayout布局内控件依次从左到右水平排列。
• android:layout_weight：该属性被称为权重，通过设置该属性值，可使布局内的控件按照权重比显示大小，在进行屏幕适配时起到关键作用。
• android:gravity：设置布局内控件的对齐方式，常见可选值如下表所示：

|-------------------|----------------------------------|
| 属性名称 | 功能描述 |
| top | 将内容放在视图的顶部，不改变其大小。 |
| bottom | 将内容放在视图的底部，不改变其大小。 |
| left | 将内容放在视图的左侧，不改变其大小。 |
| right | 将内容放在视图的右侧，不改变其大小。 |
| center_vertical | 将内容在垂直方向上居中对齐，不改变其大小。 |
| center_horizontal | 将内容在水平方向上居中对齐，不改变其大小。 |
| center | 将内容在水平和垂直方向上都居中对齐，不改变其大小。 |
| fill_vertical | 必要的时候增加对象的纵向大小，以完全充满其容器（垂直方向填充）。 |
| fill_horizontal | 必要的时候增加对象的横向大小，以完全充满其容器（水平方向填充）。 |
| fill | 必要的时候增加对象的横纵向大小，以完全充满其容器。 |

（二）TableLayout（表格布局）

1. 基本概念

TableLayout（表格布局）采用行、列的形式来管理控件，它不需要明确声明包含多少行、多少列，而是通过在TableLayout布局中添加TableRow布局或控件来控制表格的行数，在TableRow布局中添加控件来控制表格的列数。

2. XML基本语法格式

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

3. 关键属性

TableLayout继承自LinearLayout，完全支持LinearLayout所支持的属性，此外还有其他常用属性：

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

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

|-----------------------|-----------------|
| 属性名称 | 功能描述 |
| android:layout_column | 设置该控件显示的位置 |
| android:layout_span | 设置该控件占据几列，默认为1列 |

需要注意的是，在TableLayout布局中，列的宽度由该列中最宽的那个单元格（控件）决定，整个表格布局的宽度则取决于父容器的宽度。

（三）FrameLayout（帧布局）

1. 基本概念

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

2. XML基本语法格式

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

3. 特殊属性

除通用属性外，帧布局还有两个特殊属性：

|---------------------------|--------------------------|
| 属性名称 | 功能描述 |
| android:foreground | 设置帧布局容器的前景图像（始终在所有子控件之上） |
| android:foregroundGravity | 设置前景图像显示的位置 |

（四）ConstraintLayout（约束布局）

1. 基本概念

ConstraintLayout（约束布局）是Android Studio2.2新添加的布局。与其他界面布局相比，它不太适合使用XML代码的方式编写布局，但非常适合使用可视化的方式编写界面布局。可视化操作的背后仍是使用XML代码实现，这些代码由Android Studio根据操作自动生成。

2. 新特性

• 相对定位：相对定位是在ConstraintLayout中创建布局的基本构建方法之一。相对定位即一个控件相对于另一个控件进行定位，ConstraintLayout布局中的控件可以在横向和纵向上以添加约束关系的方式进行相对定位，其中，横向边包括left、start、right、end，纵向边包括top、bottom、baseline（文本底部的基准线）。每一条边（top、bottom、baseline、left、start、right、end）都可以与其他控件形成约束，形成相对定位关系的属性如下表所示：

|----------------------------------------|----------------------------|
| 属性名称 | 功能描述 |
| layout_constraintLeft_toLeftOf | 控件的左边与另外一个控件的左边对齐 |
| layout_constraintLeft_toRightOf | 控件的左边与另外一个控件的右边对齐 |
| layout_constraintRight_toLeftOf | 控件的右边与另外一个控件的左边对齐 |
| layout_constraintRight_toRightOf | 控件的右边与另外一个控件的右边对齐 |
| layout_constraintTop_toTopOf | 控件的上边与另外一个控件的上边对齐 |
| layout_constraintTop_toBottomOf | 控件的上边与另外一个控件的底部对齐 |
| layout_constraintBaseline_toBaselineOf | 控件间的文本内容基准线对齐 |
| layout_constraintStart_toEndOf | 控件的起始边（左边）与另外一个控件的尾部（右边）对齐 |
| layout_constraintStart_toStartOf | 控件的起始边与另外一个控件的起始边对齐 |
| layout_constraintEnd_toStartOf | 控件的尾部与另外一个控件的起始边对齐 |
| layout_constraintEnd_toEndOf | 控件的尾部与另外一个控件的尾部对齐 |

例如，将控件B左侧的边约束到控件A右侧的边，可将控件B定位到控件A的右侧，这里的约束可理解为边的对齐。

• 居中定位和倾向：在ConstraintLayout布局中，两个控件之间通过添加约束的方式不仅可以确定控件的相对位置，还可以确定控件在父布局（ConstraintLayout）中的相对位置。在相同方向上（横向或纵向），控件的左右两边或上下两边同时在ConstraintLayout中添加约束，则控件在添加约束的方向上居中显示。例如，设置控件在父布局中与父布局左边对齐，与父布局右边也对齐，此时控件在父布局中横向居中显示。

在横向或纵向方向上，添加的约束相反时，默认控件是居中的，当添加的两个约束的力大小不等时，就会产生倾向，设置倾向的属性如下表所示：

|----------------------------------|-------|
| 属性名称 | 功能描述 |
| layout_constraintHorizontal_bias | 横向的倾向 |
| layout_constraintVertical_bias | 纵向的倾向 |

需要注意的是，如果ConstraintLayout布局中的控件在居中方向（横向或者纵向）上和父布局（ConstraintLayout）的尺寸一致，此时该方向的居中约束和倾向没有意义。

• Chain（链）：Chain（链）是一种特殊的约束，能对一组水平或竖直方向互相关联的控件进行统一管理。一组控件通过一个双向的约束关系链接起来，就能形成一个Chain。

Chain中的第一个控件称为头控件，头控件可以通过layout_constraintHorizontal_chainStyle和layout_constraintVertical_chainStyle属性设置水平链条和竖直链条的样式，其属性值及功能如下：

• spread：设置控件在布局内平均分布，为Chain的默认样式。

• spread_inside：设置两端的控件与父布局无间距显示，其他的控件将在剩余的空间内采用spread样式进行布局。

• packed：设置Chain中的所有控件合并在一起后在布局内居中显示。

ConstraintLayout布局中，当控件宽或者高的属性设置为0dp时，Chain的三种样式可以搭配layout_constraintHorizontal_weight属性形成Weighted Chain的样式。packed可以搭配layout_constraintHorizontal_bias属性控制Chain与父容器的间距，从而形成Packed Chain With Bias样式，即Chain共有五种样式。

3. 约束条件相关

如需在ConstraintLayout中定义某个视图的位置，需要为该视图添加至少一个水平约束条件和一个垂直约束条件。每个约束条件均表示与其他视图、父布局或隐形引导线之间连接或对齐方式，定义了视图在竖轴或者横轴上的位置。每个视图在每个轴上都必须至少有一个约束条件，但通常情况下会需要更多约束条件。

当将视图拖放到布局编辑器中时，即使没有任何约束条件，它也会停留在放置的位置，这仅为方便编辑。当在设备上运行布局时，如果视图没有任何约束条件，则会在位置[0,0]（左上角）处进行绘制。例如，布局在编辑器中看起来完美，但视图C上没有垂直约束条件，在设备上绘制此布局时，虽然视图C与视图A的左右边缘水平对齐，但由于没有垂直约束条件，它会显示在屏幕顶部。

尽管缺少约束条件不会导致出现编译错误，但布局编辑器会将缺少约束条件作为错误显示在工具栏中。如需查看错误和其他警告，可点击Show Warnings and Errors。为帮助避免出现缺少约束条件这一问题，布局编辑器会使用Autoconnect和Infer Constraints功能自动添加约束条件。

4. 调整视图尺寸

可使用角手柄来调整视图的尺寸，但这会对尺寸进行硬编码，从而使视图不会针对不同的内容或屏幕尺寸进行调整。如需选择其他尺寸模式，可点击视图，然后打开编辑器右侧的Attributes窗口。

Attributes窗口顶部附近的视图检查器中包括若干布局属性的控件，此属性仅适用于ConstraintLayout中的View。可通过点击相关符号来更改高度和宽度的计算方式，这些符号代表的尺寸模式及功能如下：

• Fixed：可在下方的文本框中指定具体维度，也可在编辑器中调整视图尺寸。
• Wrap Content：视图仅在需要时扩展以适应其内容。
• Match Constraints：视图会尽可能扩展，以满足每侧的约束条件（在考虑视图的外边距之后）。

将layout_constrainedWidth设置为true可让水平尺寸发生更改，以遵循约束条件。默认情况下，设置为WRAP_CONTENT的widget不受约束条件的限制。

5. 对齐方式

可将一个视图的边缘与另一视图的同一边对齐，例如，B的左侧与A的左侧对齐。如果要与视图中心对齐，请对两侧创建约束条件。

还可以通过从约束布局向内拖动视图来偏移对齐量，例如，B的偏移对齐为24dp，偏移量由受约束视图的外边距定义。也可以选择要对齐的所有视图，然后点击工具栏中的Align图标以选择对齐类型。

6. 引导线约束

可添加垂直或水平的引导线来约束视图，应用用户看不到该引导线。可根据相对于布局边缘的dp单位或百分比在布局中定位引导线。

如需创建引导线，可点击工具栏中的Guidelines图标，然后点击Add Vertical Guideline或Add Horizontal Guideline。拖动虚线可将其重新定位，然后点击引导线边缘的圆圈以切换测量模式。

7. 屏障约束

与引导线类似，屏障是一条隐藏的线，可用来约束视图，但屏障不会定义自己的位置，相反，屏障的位置会随着其中所含视图的位置而移动。如果希望将视图限制到一组视图而不是某个特定视图，这非常有用。例如，视图C被约束在屏障的右侧，该屏障设置为视图A和视图B的"end"侧（或从左至右布局中的右侧），屏障会根据视图A或视图B的右侧是否为最右侧来移动。

如需创建屏障，可按以下步骤操作：

1. 点击工具栏中的Guidelines图标，然后点击Add Vertical Barrier或Add Horizontal Barrier。
2. 在Component Tree窗口中，选择要放入屏障内的视图，然后将其拖动到屏障组件中。
3. 在Component Tree中选择障碍，打开Attributes窗口，然后设置barrierDirection。

现在，就可以从另一个视图创建屏障约束。还可以将屏障内的视图约束到屏障，这样，可使屏障中的所有视图相互对齐，即使不知道哪个视图最长或最高。也可以在屏障内添加引导线，以确保屏障的位置"最小"。

8. 圆形定位

可以相对于另一个小部件中心以一定角度和距离约束小部件中心，这允许将小部件定位在圆上。可使用以下属性：

• layout_constraintCircle：引用另一个小部件ID
• layout_constraintCircleRadius：到其他小部件中心的距离
• layout_constraintCircleAngle：小部件应该处于哪个角度（以度为单位，从0到360）

示例代码：

<Button android:id="@+id/buttonA".../>
<Button android:id="@+id/buttonB".
app:layout_constraintCircle="@+id /buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45"/>

（五）RelativeLayout（相对布局）

1. 基本概念

RelativeLayout通过相对定位的方式指定子控件的位置。

2. XML基本语法格式

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

3. 子控件属性

在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 | 设置当前控件的右边界与某控件的右边界对齐 |

三、按钮相关属性

|--------------------|-----------------------------------------|
| 属性名 | 简要描述 |
| style | 指定按钮的样式，可引用定义好的样式资源来设置外观等整体风格 |
| stateListAnimator | 用于定义按钮在不同状态（如按下、选中）时的动画效果 |
| onClick | 指定按钮点击时调用的方法名，在Activity等中需定义对应的方法处理点击事件 |
| elevation | 设置按钮的z轴高度，以产生阴影效果，模拟立体层次感 |
| insetLeft | 按钮内容左侧的内边距，控制内容与按钮左侧边界的距离 |
| insetRight | 按钮内容右侧的内边距，控制内容与按钮右侧边界的距离 |
| insetTop | 按钮内容顶部的内边距，控制内容与按钮顶部边界的距离 |
| insetBottom | 按钮内容底部的内边距，控制内容与按钮底部边界的距离 |
| background | 设置按钮的背景，可以是颜色、Drawable资源等 |
| backgroundTint | 对背景进行色调染色，改变背景颜色的色调 |
| backgroundTintMode | 背景色调染色的模式，如叠加、混合等模式 |
| icon | 设置按钮上显示的图标，可以引用Drawable资源 |
| iconPadding | 图标与按钮内容之间的内边距 |
| iconTint | 对图标进行色调染色，改变图标颜色的色调 |
| iconTintMode | 图标色调染色的模式 |
| strokeColor | 设置按钮边框的颜色 |
| strokeWidth | 设置按钮边框的宽度 |
| cornerRadius | 设置按钮的圆角半径，使按钮边缘呈圆角 |
| rippleColor | 设置按钮点击时的水波纹效果颜色 |
| text | 按钮上显示的文本内容 |
| contentDescription | 为视力障碍用户提供的按钮内容描述，用于辅助功能 |
| textAppearance | 指定按钮文本的外观样式，如字体、大小、颜色等 |
| alpha | 设置按钮的透明度，取值范围0 - 1，0为完全透明，1为完全不透明 |

总结

本文档梳理了 Android 五种核心界面布局及按钮属性。常用布局中，LinearLayout 按水平 / 垂直排列控件，借权重适配屏幕；TableLayout 以行列管理控件，列宽由列内最宽控件定；FrameLayout 为帧叠加模式，子控件默认左上角对齐。

ConstraintLayout 适配可视化编写，有相对定位、居中定位与倾向、Chain 约束等特性，还含引导线、屏障等辅助工具。RelativeLayout 虽过时，但可通过属性实现相对定位仍需了解。文档还补充了按钮样式、交互等多维度属性，为 Android 界面开发提供参考。