手把手教你AutoLayout适配复杂界面《一》

基础篇，大神请绕道！！！
AutoLayout是什么？
使用一句Apple的官方定义的话 AutoLayout是一种基于约束的，描述性的布局系统。 Auto Layout Is a Constraint-Based, Descriptive Layout System.
关键词：

基于约束 － 和以往定义frame的位置和尺寸不同，AutoLayout的位置确定是以所谓相对位置的约束来定义的，比如x坐标为superView的中心，y坐标为屏幕底部上方10像素等
描述性 － 约束的定义和各个view的关系使用接近自然语言或者可视化语言（稍后会提到）的方法来进行描述
布局系统 － 即字面意思，用来负责界面的各个元素的位置。

总而言之，AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题，另外也简化了旋转时view的位置的定义，原来在底部之上10像素居中的view，不论在旋转屏幕或是更换设备（iPad或者iPhone5或者以后可能出现的mini iPad）的时候，始终还在底部之上10像素居中的位置，不会发生变化。
总结：使用约束条件来描述布局，view的frame会依据这些约束来进行计算 Describe the layout with constraints, and frames are calculated automatically.

在AutoLayout适配上自己还是新手，图省劲一直使用Autoresizing真正要做复杂界面的时候或者要求支持横屏的时候就有点不尽人意了。试着约束了几个界面，感觉熟练起来要比Autoresizing还要快！但是我觉得还是有一个缺点，如果要求删除一个控件就需要从新约束了！

最后效果.gif

Autolayout教程1.0.gif

Autolayout教程2.0.gif

Autolayout教程2.3.gif

Autolayout教程2.4.gif

Autolayout教程2.5.gif

Autolayout教程2.6.gif

还有一个效果是要求四个按钮在屏幕中均匀堆成分布

autolayout示例.gif

一定要理解的关键词：

Width：对视图宽度的约束
Height：对视图高度的约束
Horizontal Spacing：对视图间水平距离的约束
Vertical Spacing：对视图间垂直距离的约束
Leading Space to Superview：与父视图左边界的约束
Trailing Space to Superview：与父视图右边界的约束
Top Space to Superview：与父视图上边界的约束
Bottom Space to Superview：与父视图下边界的约束
Widehs Equally：视图等宽约束
Heights Equally：视图等高约束
Left Edges：控件左对齐
Right Edges：控件右对齐
Top Edges：控件上对齐
Bottom Edges：控件下对齐
Horizontal Centers：控件水平中心对齐
Vertical Centers：控件垂直水平对齐
Horizontal Center in Container：控件与其父视图水平中心对齐
Vertical Center in Container：控件与其父视图垂直中心对齐

到此为止，基本上已经可以使用autolayout自动布局解决复杂的布局需求了，但是切记，正式因为aotulayout的强大使它会隐藏更多的坑，下面是我的几点感悟，再次分享：

1、autolayout的精髓在于足够多的约束，autolayout之所以比autoresizing强大，就在于其布局的精确性，而精确性正是由约束来提供的。
2、autolayout运用于复杂的cell的时候可能会引起卡顿，记住是复杂的cell这就需要你自己权衡了，因为每一次的复用都要从新计算布局！！
3、使用心得就是约束布局的时候，先父视图后子视图，从上到下，从左到右。

结尾附上我的Demo，如果对你有帮助给个喜欢给个Star！