使用Storybord或Xib 的 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.创建约束

 

使用Storybord或Xib 的 AutoLayout入门晋阶 参考字典

 

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

：视图约束布局按钮

：自动约束布局按钮

 

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

 1 2 3 4 若用过autoresizing的人很容易理解，用法一样，多加自定义固定距离，方便使用扩展性高。

1 2 3 4 5 6 7：用于多视图对齐

8 9：可用于单视图或多视图

1．         垂直左对齐

2．         垂直右对齐

3．         水平上对齐

4．         水平下对齐

5．         多视图垂直居中，以水平固定好的视图为准

6．         多视图水平居中，以垂直固定好的视图为准

7．         基线与6用法一样，本人没发现右那些不同

8．         与屏幕垂直居中

9．         与屏幕水平居中

 

二、视图约束布局按钮：

 

 

1. 上边距固定，垂直上方向最近的视图进行固定
2. 右边距固定，水平右方向最近的视图进行固定
3. 下边距固定，垂直上方向最近的视图进行固定
4. 左边距固定，水平左方向最近的视图进行固定
5. 固定宽度
6. 固定高度
7. 多视图宽度固定
8. 多视图高度固定
9. 选项与多视图校准约束布局按钮相等

 

 

Update frames选项：

 

None：默认，没有frame

Items of new Constraints：多条新约束

All frames in container：全部框架集合进行添加

 

二、自动约束布局按钮：

 

1. 更新当前选中视图的框架，可以自动调整框架大小
2. 更新当前选中视图的约束，可以自动调整约束距离
3. 自动添加选中视图所需要的约束（不太准，有时候会乱加约束）
4. 重新设置当前选中视图的约束
5. 清除当前选中视图所有约束
6. 更新当前选中控制器的所有视图框架，可以自动调整框架大小
7. 更新当前选中控制器的所有视图约束，可以自动调整约束距离
8. 自动添加选中控制器的所有视图所需要的约束（不太准，有时候会乱加约束）
9. 重新设置当前选中控制器的所有视图的约束
10. 清除当前选中控制器的所有视图的所有约束