使用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.创建约束

 

 

posted @ 2013-12-30 20:40  WhoJun  阅读(3581)  评论(0编辑  收藏  举报