IOS AutoLayout 详解

在iphone5出现之后，也就是ios6的时候。约束(autolayout)出现了，其实最开始的时候，ios dever们都还是坚持手写代码，毕竟自己用了好几年了，你说换就换，现在的需求你帮我写啊？所以导致当时使用约束的少之又少，直至后来出现了横屏和竖屏之类适配，而且屏幕更多繁多的时候，手写代码已经越来越不太能担任这个任务的时候，才开始慢慢的进入了这个大潮

而我比较幸运，在iphone5的时候第一次拥有了iphone手机，在我学习ios的时候，iphone6和swift这两个东西出现了。所以我最开始学习的时候就是使用 storyboard和约束一起学习的
好了废话不多说了。约束到底是什么东西呢？
其实说白了他是一种描述性的布局方式。什么是描述？比如说。“咳咳，这个图片距离这个按钮的右边10像素，距离屏幕上方10像素！图片的大小是80x80”。这就叫做描述，这样我们的前辈们(apple的开发人员们)，就会把我们的描述解析成相对应的布局方式，完成图片位置的放置。
其实说到布局，无论手写代码还是xib,sb(storyboard)都可以进行约束的编码的。

我们教程首先学习 sb,xib这一类的布局，因为这样咱们可以很直观的看到约束对于view的布局影响。当我们足够熟悉布局的时候，再转入手写布局会方便很多
这篇教程将以这几个方面进行讲解

1. XIB StoryBoard 约束设置
2. NSLayoutConstraint 约束设置
3. VFL 约束设置
4. NSLayoutAnchor 约束设置
5. 第三方约束设置
6. 例子总结 － 实例
7. 总结

XIB StoryBoard 约束设置

在我们学习之前，请你们自己建立一个项目。打开storyboard的预览界面，咱们在界面的最下方

 

image

下方有三个button，分别是 align pin resole auto layout issues

align:

英文解释的意思为排序，那么我们即可以理解为，排序…点击展开选项，我会挨个解释一下。

[图片上传失败...(image-b692d9-1530003441629)]

ps选项一共有4个类别。第一类和第二类是需要选中两个或者多个的view的时候，才可以操作

1. Leading Edges 选中的views们 左 对齐
2. Trailing Edges 选中的views们 右 对齐
3. Top Edges 选中的views们 上 对齐
4. Bottom Edges 选中的views们 下 对齐
5. Horizontal Centers 选中的views们 水平方向 中心对齐
6. Vertical Centers 选中的views们 垂直方向 中心对齐
7. Baselines 选中的views们基于 基线 对齐
8. Horizontally in Container 选中的视图 相对于 父视图 进行 水平方向 对齐
9. Vertical in Container 选中的视图 相对于 父视图 进行 垂直方向 对齐
10. Update Frames None 再设置了这些约束之后不进行Frame的更改
11. Update Frames Items of New Constraints 设置了这些约束之后 只更改选中的这些views的Frame
12. Update Frames All Frames in Container 更改该 vc 里所有View的约束 (慎用!!!!!!)

pin:

英文解释为 大头针，其实我们就可以为，这个展开项内的所有的现象都是为了将视图订在某一个位置的。那么我们再次展开选项

 

image

1. 上方的输入框 这个输入框时表示当前选中的views或者view距离父视图的上方距离为多少，左右下同理，不一一赘述了
2. 而点击这个倒三角开启的选项中
   1. User Standard Value 是说使用标准的的值，而且这个值只有在是设置上下方向的时候才有用。默认的值其实就是距离 Bottom Layout Guide，也就是上下基线。下基线就是距离视图最底部。上基线就是距离StatusView下方的位置。而这里的默认值其实是8
   2. User Current Canvas Value 使用当前位置设置。默认为当前设置方向最近的一个VIew，且没有覆盖遮挡的视图
   3. 剩下的选项，会根据当前视图的布置情况有所不同，但是道理相当，这个选项是让你设置你要根据那个视图进行当前位置距离的设置的
3. Width 和 Height 这个不需要我赘述了吧。分别是 宽度和高度 的设置
4. Constarain to Margins. 这个是否需要外边距 默认为 8 。一般没啥卵用，都会去掉
5. Equal Widths 和 Equal Heights 这两个选项需要选择两个视图。比如选中View1和View2，那么可以分别设置这个两个视图宽度和高度相等
6. Aspect Ratio 这个属性是设置选中View的比例。当你点击设置的时候，默认他会设置当前视图的比例。比如你的View高度为40宽度为30。那么你的比例就将设置为3:4. 如果你希望修改这个比例的属性，咱们在讲完这三个东西之后，我会讲解
7. Align 这个东西你不得不承认这个东西和咱们学习的第一个Align重复的… 在这里就不赘述了
8. Update Frames 这个查看上面 Align选项的这个属性就好了

resole auto layout issues

他的这个解释已经很好理解了，自动布局问题的解决。就是如果你在布局的
时候出现了一些问题。比如，咱们再设置约束之后，出现黄色或者红色的的颜色的时候。就需要使用以下方式修改。红色说明咱们设置的约束有缺失或者有冲突的问题，黄色则说明，约束正确，但是当前View的Frame和约束描述的Frame不一致

 

image

看到以上视图咱们可以看出它分为两个而且这两种除了名字不一样，选项是一摸一样的额。Selected Views 这个说的就是你要处理的约束问题是当前你选中的View，而All Views in View Controller，则是说明要解决的约束问题是这个ViewController所有的VIew的(这个可得慎重的)。

1. Update Frames 修改Frame，当你的约束设置正确但是Frame不对的时候使用者选项可以讲View的Frame展示成为约束所描述的样子
2. Update Constaints 而这个选项，说实话我没用过。他的意思咱们也可以知道他是通过Frame 去修改 约束……
3. Add Missing Constraints 添加缺失的约束，这个选项我也没使用过，因为这个方法添加的缺失的约束不一定就是正确的约束，在实际运行中肯定会出现问题所以尽量自己把缺失的约束自己添加了。
4. Reset to Suggested Constaints 重新设置建议的约束？没使用过，不知道什么意思
5. Clear Constraints 清除约束，会删除选中的视图的所有的约束。在All Views in View Controller 你要是做这个选项的时候可得慎重，使用了就说明你要删除当前VC所有的约束。当然你可以 ctrl-z

后面的话

在说了这些之后，其实咱们应该已经可以进行约束的设置了，但是还有很多问题，其中我现在说一下快速设置的问题。当你在这个层次view选择器中（图1）。

作者：Lecturer
链接：https://www.jianshu.com/p/4ef0277e9c5e
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。