AutoLayout&Masonry&约束的底层实现原理

核心总结: 自动布局是使用了更贴近自然语言的方式去描述位置的方式, 因此, 其本身具有固定元素以及计算公式, 最后, 得到的数据结果和绝对布局相同, 但是因为, 自动布局需要一个特殊的根节点并且形成节点树之后才能布局, 因此, 可以读取数据的时机不同

自动布局的底层实现原理

自动布局的底层原理

• 概括: 自动布局就是使用更贴近自然语言的方式描述一个控件的位置信息, 大大降低了计算难度

• 相对位置最终会被布局引擎换算成绝对位置

• 思想: 用贴近自然语言的 autolayout 方式描述具体的位置信息, 使用的时候, 根据每句命令将具体的约束信息转化为 frame 以渲染.

• 公式&要素 7个
  公式: view1.attr1 = view2.attr2 * multiplier + constant

被约束的对象 (item) 以及属性 (attribute)
约束源的对象 (item) 以及属性 (attribute)
二者之间的关系 (=/>/<) 系数 (值得比例) 以及 常数 (constant)

iOS中自动布局的属性元素: 上下左右前后 宽高 中心点 基线 ( 各种边距 ), 本质上就是 frame 的描述, 但是可以通过设置上下形成宽高.

• 原理:
  组织: 最顶层的视图一定是有具体的坐标信息, 内部的子控件布局时读取对应的约束, 例如 距父视图上偏移100pt, 就会被转化为 frame.orginal.y = 100; 最终形成GPU可以读取的坐标信息, 并且, 在存在多个控件的情况下, 所有的约束会被分解成 链状+树状 进行组织, 根视图就是拥有具体坐标信息的最顶层父视图, 下面的同等级控件以及更下级控件的排列顺序, 应该是按照添加顺序从左至右组织, 形成树组织
  转化: 按照以上原理将所有的布局约束转化 树状节点组织, 读取的顺序类似于 BFS 的读取方式,先将横向的同级控件的约束转化为坐标点进行布局, 之后, 在布局深度的子叶节点.

• 总论: 因为GPU在形成光栅化渲染的时候, 一定是要获取到每个坐标点的颜色值, 因此, 无论是设置控件的 frame 或者是 autolayout, 在渲染之前, 实际上都会被转化为具体的坐标点, 因此, autolayout 相对frame来讲, 在GPU阶段是一样的, 主要的区别在于同样的效果在代码阶段表现是不同的, autolayout 使用了较为贴近自然语言的方式去描述位置信息, 所以在最终阶段, 相对 frame就多了一个转化阶段, 就是将自然语言描述的位置信息转化为具体的坐标信息

Masonry的使用

• 主要函数
  创建: mas_makeConstraints
  更新: mas_updateConstraints
  重设: mas_remakeConstraints

动态更新布局:

// 告诉self.view约束需要更新
[self.view setNeedsUpdateConstraints];
// 调用此方法告诉self.view检测是否需要更新约束，若需要则更新，下面添加动画效果才起作用
[self.view updateConstraintsIfNeeded];
[UIView animateWithDuration:0.3 animations:^{
[self.view layoutIfNeeded];
}];

部分问题

• 使用了autolayout之后, 控件的frame将会一直为空
• leading(前) 和 training(后) 的实际使用与 left 和 right 相同, 主要是区别与 阿拉伯 世界布局习惯为 从右至左, 也就是, 如果使用 leading 和 training布局, 根据当前使用位置会进行对应的镜面翻转, 如果使用 left 和 right 进行布局, 则切换为 希伯来语 之后, 界面会发生镜像转换.

其他问题

相关网站
leading 与 left 区别