2020.7.28
1.基础知识
- View: 单个的、看得到的、可以和用户交互的控件
-
ViewGroup:一个容器，可以存放多个view/viewGroup(即容器间可以层层嵌套)，并且管理view的布局
图解1.png
界面剖析.png - 根据每个容器的具体功能划分：
FrameLayout： 帧布局
LinearLayout： 线性布局
RelativeLayout： 相对布局->A和B之间有相对对齐关系
onstraintLayout： 约束布局 - xml中引用某个资源：使用@开头
xml中使用id来标识每一个控件 -
控件常用单位是dp
dp图解.png
2.所有布局共有属性
- layout_width/height：
①给定尺寸,单位dp
②match_parent：匹配父容器的尺寸
③wrap_content：内容多大空间就多大 -
layout_margin：
在FrameLayout中：设置和父容器左右上下的外间距，在没有给固定尺寸下最明显
在LinearLayout中：横向布局则以左侧最近的控件的右边界为基准
纵向布局则以顶部最近控件的下边界为基准
以下属性在RelativeLayout比较特殊
- layout_marginLeft/Start：设置和父容器(LinearLayout取决于布局方式)左侧间距
- layout_marginTop：设置和父容器(LinearLayout取决于布局方式)顶部的距离
- layout_marginRight/End：在没有给固定尺寸下，设置与父容器右侧的间距
- start/end：有些文字是从右到左，有些是从左到右
-
padding：视图本身的内容和这个视图之间的距离->内间距
padding演示.gif
3.FrameLayout 帧布局
控件间相互覆盖，类似于PS里面的图层叠加(覆盖)，该布局方式是最简单的布局，当然局限性也很大，不常用
-
layout_gravity：设置控件和父容器的的关系(外部)
start/left：父容器左侧
top/bottom：父容器顶/底部
right/end：父容器右侧
center：居中 - gravity：设置自己的子控件和我的关系(内部)
4.LinearLayout 线性布局
- 只有横向或者纵向的布局
- 必须确定摆放的方式：横向、纵向
orientation：默认横向摆放 -
layout_weight：权重
①给宽度或者高度设为0dp
②设置宽/高的比例 - 注意：容器的嵌套不要太多，效率低：计算容器的尺寸
小Demo实例
结构分析.png
一共三层线性布局：
第一层：纵向
第二层：横向
第三层：纵向
Tip：宽度设为match_parent，gravity设置为水平居中，搭配权重分配可以达到图示的分配效果
5.RelativeLayout 相对布局
子控件和子控件之间、子控件和父控件之间可以添加对齐的关系
但主要还是子控件和子控件之间
- A和B之间有相对对齐关系
常用的几种对齐属性
| 属性名 | 功能效果 |
|---|---|
| layout_alignParentRight/Left/Bottom/Top | 和父容器右/左/顶部/底部靠齐 |
| layout_centerInParent | 在父容器的中央 |
| layout_toLeft/Right/Of | 靠齐指定控件的左/右侧 |
| layout_below | 顶部靠齐指定控件的底部 |
| layout_above | 底部靠齐指定控件的顶部 |
| layout_alignBottom/Top | 底部(顶部)靠齐指定控件的底部(顶部) |
| layout_marginRight/Left/Bottom/Top | 需要看控件所处的相对位置 |
6.ConstraintLayout 约束布局
几乎是通过手动拖拽控件的方式来进行界面布局，很方便，最常用
拖拽演示.gif
设置属性.png
-
引导线的使用：进行分区域操作
引导线的使用.gif -
使用链条添加权重
添加权重.gif -
链条：
spread inside：两边靠边不动，中间的控件进行均分
packed：两边的控件挤压中间的控件，抱团
链条操作.gif
控件间的间距同样通过拖动四周的点进行控制
