文章目录

Ch 2 Android常见界面布局
- 2.1 View视图
- 2.2 界面布局编写方式
- - 2.2.1 在XML文件中编写布局
  - 2.2.2 在Java代码中编写布局
- 2.3 常见界面布局
- - 2.3.1 布局的通用属性
  - 2.3.2 RelativeLayout相对布局
  - - 布局和控件的宽高
  - 2.3.3 LinearLayout线性布局
  - 2.3.4 TableLayout表格布局
  - 2.3.6 ConstraintLayout约束布局

Ch 2 Android常见界面布局

2.1 View视图

ViewGroup 和 View 控件的包含关系

Android应用的每个界面的根元素必须有且只有一个ViewGroup容器。

2.2 界面布局编写方式

2.2.1 在XML文件中编写布局

Android可以使用XML布局文件控制界面布局，从而有效地将界面中布局的代码和Java代码分离，使程序的结构更加清晰。

2.2.2 在Java代码中编写布局

在Android中所有布局和空间的对象都可以通过new关键字创建出来，将创建的View控件添加到ViewGroup布局中，从而实现View控件在布局界面中显示。

不管使用哪种方式编写布局，它们控制Android用户界面行为的本质是完全一样的。

2.3 常见界面布局

#mermaid-svg-Ovfd4K8tK9wph3Ad {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Ovfd4K8tK9wph3Ad .error-icon{fill:#552222;}#mermaid-svg-Ovfd4K8tK9wph3Ad .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Ovfd4K8tK9wph3Ad .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Ovfd4K8tK9wph3Ad .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Ovfd4K8tK9wph3Ad .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Ovfd4K8tK9wph3Ad .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Ovfd4K8tK9wph3Ad .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Ovfd4K8tK9wph3Ad .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Ovfd4K8tK9wph3Ad .marker.cross{stroke:#333333;}#mermaid-svg-Ovfd4K8tK9wph3Ad svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Ovfd4K8tK9wph3Ad .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Ovfd4K8tK9wph3Ad .cluster-label text{fill:#333;}#mermaid-svg-Ovfd4K8tK9wph3Ad .cluster-label span{color:#333;}#mermaid-svg-Ovfd4K8tK9wph3Ad .label text,#mermaid-svg-Ovfd4K8tK9wph3Ad span{fill:#333;color:#333;}#mermaid-svg-Ovfd4K8tK9wph3Ad .node rect,#mermaid-svg-Ovfd4K8tK9wph3Ad .node circle,#mermaid-svg-Ovfd4K8tK9wph3Ad .node ellipse,#mermaid-svg-Ovfd4K8tK9wph3Ad .node polygon,#mermaid-svg-Ovfd4K8tK9wph3Ad .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Ovfd4K8tK9wph3Ad .node .label{text-align:center;}#mermaid-svg-Ovfd4K8tK9wph3Ad .node.clickable{cursor:pointer;}#mermaid-svg-Ovfd4K8tK9wph3Ad .arrowheadPath{fill:#333333;}#mermaid-svg-Ovfd4K8tK9wph3Ad .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Ovfd4K8tK9wph3Ad .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Ovfd4K8tK9wph3Ad .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Ovfd4K8tK9wph3Ad .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Ovfd4K8tK9wph3Ad .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Ovfd4K8tK9wph3Ad .cluster text{fill:#333;}#mermaid-svg-Ovfd4K8tK9wph3Ad .cluster span{color:#333;}#mermaid-svg-Ovfd4K8tK9wph3Ad div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Ovfd4K8tK9wph3Ad :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

五种常见布局

RelativeLayout 相对布局

LinearLayout 线性布局

FrameLayout 帧布局

TableLayout 表格布局

ConstraintLayout 约束布局

2.3.1 布局的通用属性

Android系统提供的五种常用布局直接或间接继承自ViewGroup，因此也常用布局支持在ViewGroup中定义的属性。

android:id
用于设置当前布局的唯一标识。通过"@+id/属性名称"定义。
在R.java文件中会自动生成对应的int值。在Java代码中通过为findViewById()方法传入该int值来获取该布局对象。
android:layout_width
用于设置布局宽度
1. fill_parent: 该布局宽度与父容器宽度相同。
2. match_parent：与fill_parent相同，Android2.2开始推荐使用。match_parent
3. wrap_content：该布局宽度恰好能包裹内容。
android:layout_heigh
用于设置布局高度
1. fill_parent: 该布局宽度与父容器高度相同。
2. match_parent：与fill_parent相同，Android2.2开始推荐使用。match_parent
3. wrap_content：该布局高度恰好能包裹内容。
android:background
用于设置布局背景。
android:layout_margin
用于设置当前布局与屏幕边界、周围布局或控件的距离。
- android:layout_marginTop
- android:layout_marginBottom
- android:layout_marginLeft
- android:layout_marginRight
android:layout_padding
用于设置当前布局内控件与该布局的距离。
- android:layout_paddingTop
- android:layout_paddingBottom
- android:layout_paddingLeft
- android:layout_paddingRight

Android系统提供的五种常用布局必须设置android:layout_width和android:layout_height。

2.3.2 RelativeLayout相对布局

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

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

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

在Relativelayout布局中定义的控件默认与父布局左上角对齐。

布局和控件的宽高

为了让Android程序拥有更好的屏幕适配能力，在设置控件和布局宽高时最好使用match_parent或wrap_content。

2.3.3 LinearLayout线性布局

LinearLayout通常指定布局内的子空间水平或竖直排列。
定义格式：

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

属性说明
1. android:orientation
  用于设置LinearLayout布局中控件的排列顺序，可选vertical和horizontal。
2. android:weight
  通过设置权重使布局内的控件按照权重比显示大小，在进行屏幕适配时起关键作用。
为控件分配权重
略

LinearLayout布局中的android:layout_width不可设为warp_content，因为LinearLayout优先级比Botton高，如果设置warp_content，则Button控件的android:layout_weight会失去作用。设置了Button控件的android:layout_weight属性时，控件的android:layout_width一般设置为0dp才会有权重占比效果。

2.3.4 TableLayout表格布局

TableLayout采用行、列的形式来管理控件。通过在TableLayout布局中添加TableRow布局或控件来控制表格行数，在TableRow布局中添加控件来控制表格列数。
XML布局文件中定义表格布局基本语法格式：

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

TableLayout继承自LinearLayout，因此完全支持LinearLayout所支持的属性。
TableLayout布局常用属性

属性名称	功能描述	例子
android:stretchColumns	设置可被拉伸的列	="0"表示第1列可被拉伸
android:shrinkColumns	设置可被收缩的列	="1,2"表示2，3列可被收缩
android:collapseColumns	设置可被隐藏的列	="0"表示第1列可被隐藏
TableLayout布局中控件常用属性
属性名称	功能描述	例子
---------------------	-----------------------------	------------------------
android:layout_column	设置该控件显示的位置	="1"表示在第二个位置显示
android:layout_span	设置该控件占据几行，默认为1行
###2.3.5 FrameLayout帧布局
FrameLayout用于在屏幕上创建一块空白区域，添加到该区域中的每个子控件占一帧。后加入的控件会叠加在上一个控件上层。默认情况下，帧布局中的所有控件会与左上角对齐。
XML布局文件中定义FrameLayout基本语法格式：

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

FrameLayout属性

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

2.3.6 ConstraintLayout约束布局

ConstraintLayout是Android Studio2.2新添加的布局。ConstrainLayout并不太适合使用XML代码的方式编写布局，但非常适合使用可视化的方式编写界面布局

相对定位
一个空间相对于另一个空间进行定位。ConstrainLayout布局中的控件可以在横向和纵向上以添加约束关系的方式进行相对定位。

横向：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_constraintBaseline_toBaselineOf	控件间的文本内容基准线对齐
layout_constraintStart_toEndOf	控件的起始边与另外一个控件的尾部对齐
layout_constraintStart_toStartOf	控件的起始边与另外一个控件的起始边对齐
layout_constraintEnd_toStartOf	控件的尾部与另外一个控件的起始边对齐
layout_constraintEnd_toEndOf	控件的尾部与另外一个控件的尾部对齐

居中定位和倾向
控件可以通过添加约束的方式确定该控件在父布局中的相对位置。当相同方向上，控件两边同时向ConstraintLayout添加约束，则控件在添加约束的方向上居中显示。
两个约束的力大小不等时，就会产生倾向
倾向的属性

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

如果ConstraintLayout布局中的控件在居中方向上和父布局的尺寸一致，此时该方向的居中约束和倾向没有意义。

Chain
Chain是一种特殊的约束。它使我们能够对一组水平或垂直方向上互相关联的控件进行统一管理。一组控件通过一个双向的约束关系链接起来，就能形成一个Chain。
Chain中第一个控件成为头控件，头控件可以通过layout_constraintHorizontal_chainStyle和 layout_constraintVertical_chainStyle属性设置水平链条和竖直链条的样式
1. spread：设置控件在布局内均匀分布。
2. spread_insid：设置两端的控件与父布局无间距显示，其他的控件将在剩余的空间内采用spread样式进行布局
3. packed：设置Chain中的所有控件合并在一起后在布局内居中显示。
当控件宽或高设置为0dp时，Chain的3种样式可以配合layout_constraintHorizontalweight形成Weighted Chain的样式。
packed可以搭配layoutconstraintHorizontal_bias控制Chain与父容器的间距从而形成packed Chain With Bias样式。

《黑马程序员Android移动应用基础教程》学习笔记（2）相关推荐

PyTorch深度学习实践概论笔记9-SoftMax分类器
上一讲PyTorch深度学习实践概论笔记8-加载数据集中,主要介绍了Dataset 和 DataLoader是加载数据的两个工具类.这一讲介绍多分类问题如何解决,一般会用到SoftMax分类器. 0 ...
深度学习框架Pytorch入门与实践——读书笔记
2 快速入门 2.1 安装和配置 pip install torch pip install torchvision#IPython魔术命令 import torch as t a=t.Tensor( ...
PyTorch——深度神经网络的写作笔记
1 致谢感谢Facebook的开发者的辛苦和努力- (给Google只有两个字"呵呵") 2 深度神经网络的搭建 2.1 Module的添加使用nn.Module.add_mo ...
numpy pytorch 接口对应_拆书分享篇深度学习框架PyTorch入门与实践
<<深度学习框架PyTorch入门与实践>>读书笔记 <深度学习框架PyTorch入门与实践>读后感小作者:马苗苗读完<<深度学习框架PyTorc ...
Pytorch：NLP 迁移学习、NLP中的标准数据集、NLP中的常用预训练模型、加载和使用预训练模型、huggingface的transfomers微调脚本文件
日萌社人工智能AI:Keras PyTorch MXNet TensorFlow PaddlePaddle 深度学习实战(不定时更新) run_glue.py微调脚本代码 python命令执行run ...
【Pytorch深度学习实践】B站up刘二大人课程笔记——目录与索引（已完结）
从有代码的课程开始讨论 [Pytorch深度学习实践]B站up刘二大人之LinearModel -代码理解与实现(1/9) [Pytorch深度学习实践]B站up刘二大人之 Gradient Desc ...
刘二大人 PyTorch深度学习实践笔记 P6 逻辑斯蒂回归
刘二大人 PyTorch深度学习实践笔记 P6 逻辑斯蒂回归 P6 逻辑斯蒂回归 1.torchversion 提供的数据集 2.基本概念 3.代码实现 P6 逻辑斯蒂回归 1.torchversi ...
《PyTorch深度学习实践》学习笔记【2】
<PyTorch深度学习实践>学习笔记 [2] 学习资源: <PyTorch深度学习实践>完结合集二.线性模型 2.1 概念: 2.1.1 数据集和测试集数据集拿到后一 ...
【PyTorch深度学习实践 | 刘二大人】B站视频教程笔记
资料 [参考:<PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili] [参考分类专栏:PyTorch 深度学习实践_错错莫的博客-CSDN博客] 全[参考分类专栏:PyT ...
笔记|（b站）刘二大人：pytorch深度学习实践（代码详细笔记，适合零基础）
pytorch深度学习实践笔记中的代码是根据b站刘二大人的课程所做的笔记,代码每一行都有注释方便理解,可以配套刘二大人视频一同使用. 用PyTorch实现线性回归 # 1.算预测值 # 2.算los ...

《黑马程序员Android移动应用基础教程》学习笔记（2）