使用Storybord或Xib 的 AutoLayout入门晋阶

AutoLayout晋阶

AutoLayout是一种基于约束的，描述性的布局系统。是一种相对性布局，区别之前的Autoresizing 来说，它的扩张性更大。在iOS6中发布的一种布局方法，在iOS7中官方热烈推崇使用AutoLayout进行布局。

想使用AutoLayout需要打开一个开关：（在Xcode4.6以上版本默认选中）

 

1. 打开storybord或xib

                       

点击后，会在中间的编辑区域就会显示。

 

在下方的几个按钮是Xcode4.6以上版本才出现的。

 

以上按钮是用Autolayout可视化布局按键

 ：多视图校准约束布局按钮

：单视图约束布局按钮

：自动约束布局按钮

在iOS7里控制器根视图的两条布局线

 

开发过iOS7的人都知道，在iOS7的状态栏是没有那20点，都是视图状态条一体化，所以官方提供了两条参考线，为了解决iOS6&7屏幕适配问题。

可以点击它，观看他们在视图中是在那里布线，如下：

 

Top Layout Guide

这个是用具在iOS7中没有状态的20px中使用的一条约束线用法，按紧ctrl键，鼠标点击Top Layout Guide 链接对于视图如下操作

 

 

horizontal spacing：水平间距

vertical spacing：垂直间距

因为Top的参考线在上面，选中垂直间距。

 

操作后，在iOS7会空出状态栏的20px高度。在iOS6中则约束不变。

在视图中出现对应的垂直参考线，可以双击或在右侧属性栏中进行设置。

 

或者

 

1选中约束

2点击右侧属性栏中第4个选项卡

3进行对约束的设置

约束属性

Relation: 约束模式

     Equal:相等（常用）

     Less Tran or Equal: 小于等于 <=

     Greater Tran or Equal: 大于等于 >=

Constant:约束距离，也可以说是间距（常用）

     Standard:标准

Priority:约束优先级（常用）

假设有两条相同的类型的约束，一条约束优先级1000的，另一条是800的，它会优先执行1000的那条约束。

Placeholder: 占位符

 

在这里可以看得到约束不完整，

1. 点击上方剪头可以查看错误信息
2. 可以查看在此视图中有多少约束

约束成立规则：

1. 宽高要需要固定
2. 在垂直和水平中，最少有一条间距约束

例子：假设我有一种需求：

1. Button于根视图左侧要有10px
2. Button于根视图上方要有20px
3. 宽高不拉伸
4. 在iOS6&7适配

那么已经垂直上方有一条约束，双击那一条约束，将约束间距设置成20，如下图：

 

 

1.选中Button

2.点击

3.点击水平左侧添加一条约束（约束的添加于Autoresizing,用法一样，固定你需要想固定的位置，比Autoresizing，更好的地方是可以约束固定的位置大小尺寸）

4.创建约束

 

那么就成功创建了一条约束。约束线的颜色问题，橘色：代表约束有问题，蓝色：代表约束已成立。

如上垂直约束线设置，将约束间距设置成20，如下

 

固定尺寸宽高

 

1.选中Button

2.点击

3. 固定尺寸宽高，防止iPhone4,5尺寸不拉伸或压缩

4.创建约束