安卓常见界面布局-第二章

2.1view视图

安卓应用用户界面，view group作为容器盛装界面中的控件

安卓每个界面的根元素有且只有一个viewgroup容器

2.2界面布局编写方式

2.2.1在xml文件中编写布局

app–src–main–res–layout–.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    <TextView
        android:layout_width="@dimen/width"
        android:layout_height="@dimen/height"
        android:textSize="@dimen/font"
        android:text="使用XML布局文件控制UI界面"
        style="@style/textViewStyle"
        android:textColor="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.2.2在Java代码中编写布局

建议在xml布局文件中布局，可以将布局代码与Java代码隔离，使程序结构更加清晰

2.3常见布局界面

• 五种常用布局：

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

2.3.1布局通用属性

五种布局直接或间接继承自viewgroup，因此五种布局支持在viewgroup中定义的属性，即通用属性

1. android：id当前布局的唯一标识
2. android：layout_width设置布局的宽度：

---

• 可以为具体尺寸：50dp
• 也可以是系统定义的值：

1. fill_parent:该布局的宽度与父容器(从根元素讲屏幕)的宽度相同
2. match_parent:与fill_parent作用相同，推荐使用
3. wrap_content:该布局宽度恰好能包裹它的内容

---

1. android:layout_height设置布局的高度：

---

• 可以为具体尺寸：50dp
• 也可以是系统定义的值：

1. fill_parent:该布局的宽度与父容器(从根元素讲屏幕)的高度相同
2. match_parent:与fill_parent作用相同，推荐使用
3. wrap_content:该布局高度恰好能包裹它的内容

---

1. android：background设置布局背景：图片或颜色
2. android：layout_margin设置当前布局与屏幕边界、周围布局或控件的距离：

---

• 属性值为具体尺寸：50dp
• 不同方向

1. android:layout_marginTop上
2. android:layout_marginBottom下
3. android:layout_marginLeft左
4. android:layout_marginRight右

---

1. android:padding设置当前布局控件与该布局的距离：

---

• 属性值为具体尺寸：50dp
• 不同方向

1. android:paddingTop上
2. android:paddingBottom下
3. android:paddingLeft左
4. android:paddingRight右

---

2.3.2RelativeLayout相对布局

以父容器或其他子控件作为参照物–实际开发中最长用之一

在xml定义：

<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_alignParentBottom	设置当前控件是否与父控件底端对齐
android：layout_alignParentRight	设置当前控件是否与父控件右对齐
android：layout_alignParentLeft	设置当前控件是否与父控件左对齐
android：layout_alignTop	设置当前控件的上边界与某控件的上边界对齐
android：layout_alignBottom	设置当前控件的下边界与某控件的下边界对齐
android：layout_alignLeft	设置当前控件的左边界与某控件的左边界对齐
android：layout_alignRight	设置当前控件的右边界与某控件的右边界对齐

例：

1. 相对布局的子组件必须有唯一的id属性
2. 注意循环规则，发生在两个组件具有相互指向时
3. 保持相对布局规则最小化，能减小出现循环规则的几率并且使得布局更加可维护和灵活
4. 使用相对布局代替嵌套线性布局可以改进程序性能和响应能力

为了使安卓程序拥有更好的屏幕适配能力，设置布局和控件宽高时，最好使用match_parent或wrap_parent；避免将空间的宽高设置为固定值，因为控件很多的情况下会相互挤压导致控件变形

2.3.3LinearLayout线性布局

指定布局内的子控件水平或竖直排列

在xml文件中定义：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
	…………
LinearLayout>

该布局常用属性：

属性名称	功能描述
andorid:orientation	设置线性布局的方向：horizontal-水平；vertical-垂直
android:layout_weight	权重：使布局内控件按照权重比显示大小，屏幕适配时起到关键作用
android:gravity	设置内部组件的布局对齐方式：top、bottom、left、right、fill、center_vertical、center_horizontal、center、fill_vertical、fill_horizontal

例1：

例2:

例3：

当控件水平排列时，如果控件未占满一行，会留有空白区域，不美观又浪费空间。可以利用layout_weight属性解决这个问题，该属性被称为权重，通过比例调整布局中所有控件的大小。当控件使用权重属性时，布局宽度属性值通常设置为0才会有权重占比的效果–因为LinearLayout的优先级比button高，如果设置为wrap_content，权重属性将失去其效果

1. latout_width设置为wrap_content

1. latout_width设置为0dp

2.3.4TableLayout表格布局

采用行、列形式来管理控件

不需要明确声明包含多少行多少列，通过在TableLayout布局中添加TableRow布局或控件来控制表格的行数；在TableRow布局中添加布局或控件来控制表格的列数。

在xml文件中定义：

	
		UI控件
	

TableLayout继承自LinearLayout，完全支持LinearLayout中的属性
表格布局常用属性：

布局属性	功能描述
android：stretchColumns	设置该列被拉伸，列号cong0开始，多个列号用，分隔
android：shrinkColumns	设置该列被收缩，列号cong0开始，多个列号用，分隔
android：collapseColumns	设置可以被隐藏的列

表格布局控件属性：

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

例：

2.3.5FrameLayout帧布局

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

在xml文件中定义：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
	…………
FrameLayout>

常用属性：

xml属性	说明
android:foreground	设置该帧布局容器的前景图像(始终在所有子控件之上)
android:foregroundGravity	设置前景图像的显示位置

• 帧布局中没有android:gravity属性
• 帧布局中的组件如果没有设置对齐方式，组件会重叠在一起。因此，如果要改变组件对齐方式，需要给组件添加layout_gravity属性设置自己在帧布局中的位置

例：

练习：

2.3.6ConstraintLayout约束布局

• 不太适合使用xml布局，适合使用可视化的方式布局–可视化的背后仍然是xml，只不过代码时studio根据我们的操作自动生成的；
• 通过约束关系指定各个组件的位置&关系–类似与相对布局，但比其更强大，通过拖拽方式布局

添加按钮只需要从左侧palette区域拖拽到预览屏幕即可。

因为未给button添加任何约束，因此button并不知道自己应该出现在什么位置。预览界面button的位置并不是最终运行后的实际位置，默认自动位于左上角。

相对定位：

属性名称	功能描述
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	控件的尾部与另外一个控件的尾部对齐

居中定位和倾向

属性名称	功能描述
layout_constraintHorizontal_bias	横向的倾向，取值0-1
layout_constraintVertical_bias	纵向的倾向，取值0-1