Auto Layout

[soapgu]

• 简介

Auto Layout 是 UIKit重要的布局体系，一般我们配合Storyboard及苹果无敌IDE XCode配合使用。动手比较好理解，但是概念有点杂，所以特意写一篇日志来整理下概念和用法。

• 为什么需要Auto Layout ？

用过VB或者winform的同学都知道，它们的布局全部拖拖拖搞定，基本上全是绝对布局。这个可能与windows PC相对固定的桌面分辨率有关系。能固定分辨率干嘛要这么麻烦搞个动态的。
而对移动设备情况不太一样，虽然苹果要适配的设备要比安卓要少一些，但是会有横竖屏切换的情况，这个系列的iPhone或者iPad都拥有不同的分辨率。所以需要有一套布局体系把这些设备都“框”进去

• 开始

无门槛起步。

1. 控件与容器的布局约束

只需在控件 按住Ctrl+拖动到他的容器上，拖出当前控件范围后，松开鼠标（触控板）

会产生一堆选项
e文也提示了，如果要多选按住 Shift 点

主要是针对外部容器点对齐

边距有点类比WPF的Margin
Top Space 、 Bottom Space 、 Leading Space 、 Trailing Space 代表了上下左右边距约束

2. 控件与控件直接的布局约束

操作方式按住Ctrl + 拖动目标控件 到 目标控件 松开

约束选项有点不一样

Vertical Spacing：和目标控件保持纵向距离
Horizontal Spacing：这里没有因为是一字排开的
Center Horizontally：和目标控件中央水平对齐
Equal Height：和目标高度保持一致

3. 控件自身约束
   还有自身约束啊，操作方法按住Ctrl + 控件（开局都一样），不要移出边缘放开

Aspect Ratio ：代表保证宽高比，防止拉伸变形，应用场景在照片展示比较多

设置完成后，可以在右侧的 show size inspector看到

• 弹性布局实现

很多情况下，我们的布局是弹性的所以需要下面两个方法来实现

1. 不等式约束
   比如至少留20多距离空间就要这样实现

2.非强制约束
默认所有约束priority都是1000，代表必须满足，如果没有满足定义，
会产生“Unable to simultaneously satisfy constraints”多报错。
priority的取值范围是[1,1000] 整数 , [1,999]都代表非必要约束，数值越高优先级越高

• 通过代码的方式实现自动布局：通过Visual Format Language (VFL)加约束

view.addConstraints( NSLayoutConstraint.constraints(withVisualFormat: "H:|[label1]|", options: [], metrics: nil, views: viewsDictionary))

这句话代表lable1 水平对齐，其中lable1的控件还需要通过viewsDictionary传入，似乎复杂多了

• 参考

• Designing your layout
• Advanced Auto Layout
• Auto Layout in code: addConstraints with Visual Format Language