Android常见界面 五大布局（超级详细）

Android常见界面 五大布局

常见界面布局

Android系统提供五种常用布局分别为LinearLayout（线性布局）、RelativeLayout（相对布局）、FrameLayout（帧布局）、TableLayout（表格布局）、ConstraintLayout(约束布局)

布局的通用属性

属性名称	功能描述
android:id	设置布局的标识
android：layout_width	设置布局的宽度
android：layout_height	设置布局的高度
android：background	设置布局的背景
android：layout_margin	设置当前布局与屏幕边界或与周围控件的距离
android：padding	设置当前布局与该布局中控件的距离

1. android:id
用于设置当前布局的唯一标识。在XML文件中它的属性值是通过“@+id/属性名称”定义的。为布局指定android:id 属性后，在R.java文件中，会自动生成对应的int值。在Java代码中通过为findViewById()方法传入该int值来获取该布局对象。
2. android：layout_width
用于设置布局的宽度，其值可以是具体的尺寸，如50dp
（1）fill_parent: 表示该布局的宽度与父容器（从根元素讲是屏幕）的宽度相同。
（2）match_parent:与fill_parent的作用相同，从Android 2.2开始推荐使用match_parent。
（3）wrap_content:表示该布局的宽度恰好能包裹他的内容。
3. android：layout_height
用于设置布局的高度，其值可以是具体的尺寸，如50dp
（1）fill_parent: 表示该布局的宽度与父容器的高度相同。
（2）match_parent:与fill_parent的作用相同，从Android 2.2开始推荐使用match_parent。
（3）wrap_content:表示该布局的高度恰好能包裹他的内容。
4. android：background
用于设置布局背景，其值可以引用图片资源，也可以是颜色资源
5. android：layout_margin
用于设置当前布局与屏幕边界、周围布局或控件的距离。
属性值为具体的尺寸，如50dp。
与之相似的还有android：layout_marginTop、android：layout_marginBottom、android：layout_marginLeft、android：layout_marginRight属性，分别用于设置当前布局与屏幕、周围布局或者控件的上下左右边界的距离。
6. android：padding
用于设置当前布局内控件与该布局的距离，其值可以是具体的尺寸，如50dp。与之相似的还有android：paddingTop、android：paddingBottom、android：paddingLeft、android：paddingRight属性，分别用于设置当前布局中控件与该布局上下左右的距离。
需要注意的是，Android系统提供的五种常用布局必须设置android:layout_width和android：layout_height属性指定其宽高，其他的属性可以根据需求进行设置。

RelativeLayout（相对布局）

RelativeLayout（相对布局）通过相对定义的方式指定子控件的位置。XML标签，定义格式如下

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

RelativeLayout中子控件的属性

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

LinearLayout（线性布局）

LinearLayout（线性布局）通过指定布局内的子控件水平或者竖直排列。在XML中定义LinearLayout（线性布局）的基本语法格式如下

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

LinearLayout中子控件的属性

属性名称	功能描述
android: oruentation	设置布局内控件的排列顺序
android: layout_weight	在布局内设置控件权重，属性值可直接写int值

1.属性说明

（1）android: oruentation属性。用于设置LinearLayout布局中控件的排列顺序，其可选值为vertical和horizontal。其中：
①vertical：表示LinearLayout布局内控件依次从上到下竖直排列。
②horizontal：表示LinearLayout布局内控件依次从左到右水平排列。
（2）android: layout_weight属性。该属性被称为权重，通过设置该属性值，可使布局内的控件按照权重比显示大小，在进行屏幕适配时起到关键作用。

TableLayout（表格布局）

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

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

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

TableLayout布局的常用属性

属性名称	功能描述
android:stretchColumns	设置可被拉伸的列。如：android：stretchColumns=“0”,表示第1列可被拉伸
android:shrinkColumns	设置可被收缩的列。如：android：shrinkColumns=“1,2”,表示第2,3列可收缩
android:collapseColumns	设置可被隐藏的列。如：android：collapseColumns=“0”,表示第1列可被隐藏

TableLayout布局中控件的常用属性

属性名称	功能描述
android:layout_column	设置该控件显示的位置，如android:layout_column=“1” 表示在第2个位置显示
android:layout_span	设置该控件占据几行，默认为1行

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

FrameLayout（帧布局）

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

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

帧布局除了2.3.3小节介绍的通用属性外，还有两个特殊属性。

FrameLayout属性

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

讲解如何在布局中使用android: foreground和android: foregroundGravity属性指定控件位置。

ConstraintLayout(约束布局)

ConstraintLayout(约束布局)是Android Studion 2.2新添加的布局。与前介绍的界面布局相比，ConstraintLayout(约束布局)并不太适合使用XML代码的方法编写布局，但是它非常适合使用可视化的方式编写界面布局。
可视化操作的背后仍然是使用XML代码实现的，只不过这些代码是Android Studio根据我们的操作自动生成的。
相对于传统布局，ConstraintLayout(约束布局)在几个方面提供了一些新的特性：

1. 相对定位

相对定位是在ConstraintLayout(约束布局)中创建布局的基本构件方法之一。
ConstraintLayout(约束布局)中的扣减可以在横向和纵向上以添加约束关系的方式进行相对定位，其中，横向边包括left、start、right、end，纵向边包括top、bottom、baseline（文本底部的基准线）。

相对定位关系的属性

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

2. 居中定位和倾向

在ConstraintLayout(约束布局)中，不仅两个控件之间可以通过添加约束的方式确定控件的相对位置，控件也可以通过添加约束的方式确定该控件在父布局【ConstraintLayout(约束布局)】中的相对位置。当相同方向上（横向或纵向），控件两边同时向ConstraintLayout(约束布局)添加剧中显示的控件。

倾向的属性

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

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

3. Chain

Chain（链）是一种特殊的约束，它使我们能够对一组水平或竖直方向互相关的控件进行统一管理。一组控件通过一个双向的约束关系链接起来。
Chain的头控件可以通过layout_constraintHorizontal_bias和layout_constraintVertical_bias属性设置水平链条和竖直链条的样式。其属性值为spread、spread_inside和packed
（1）spread:设置控件在布局内平均分布。其为Chain的默认样式
（2）spread_inside：设置两端的控件与父布局无间距显示，其他的控件将在剩余的空间内采用spread样式进行布局。
（3）packed：设置Chain中的所有控件合并在一起后在布局内居中显示。
ConstraintLayout(约束布局)中，当控件宽或者高的属性设置为0dp时，Chain的3种样式可以搭配layout_constraintHorizontal_weight属性形成Weighted Chain的样式。packed可以搭配layout_constraintVertical_bias属性控制Chain与父容器的间距从而形成Packed Chain With Bias样式。

五种常见的布局及特点

LinearLayout（线性布局）：以水平或垂直方向排列
RelativeLayout（相对布局）：通过相对定位排列
FrameLayout（帧布局）：开辟空白区域，帧里的控件（层）叠加
TableLayout（表格布局）：表格形式排列
ConstraintLayout(约束布局)：可视化的方式编写布局