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之间有相对对齐关系

常用的几种对齐属性

6.ConstraintLayout 约束布局

几乎是通过手动拖拽控件的方式来进行界面布局，很方便，最常用

拖拽演示.gif

设置属性.png

• 引导线的使用：进行分区域操作

  
  
  引导线的使用.gif

• 使用链条添加权重

  
  
  添加权重.gif

• 链条：
  spread inside：两边靠边不动，中间的控件进行均分
  packed：两边的控件挤压中间的控件，抱团

  
  
  链条操作.gif

控件间的间距同样通过拖动四周的点进行控制