autolayout自动布局技术在iOS6就已经推出了,但是因为很多人一开始不习惯使用xib编程,而是坚持使用代码布局控件,所以autolayout并没有普及的太快。但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决的问题,好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决。

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

 

想使用AutoLayout需要打开一个开关:(在Xcode4.6以上版本默认选中)


ios autolayout 布局原理 ios auto tune_ios autolayout 布局原理

 

  1. 打开storybord或xib

                       

ios autolayout 布局原理 ios auto tune_ci_02

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

 

ios autolayout 布局原理 ios auto tune_宽高_03

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

 

ios autolayout 布局原理 ios auto tune_宽高_04

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

 

 

ios autolayout 布局原理 ios auto tune_ios autolayout 布局原理_05

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

ios autolayout 布局原理 ios auto tune_ci_06

:单视图约束布局按钮

ios autolayout 布局原理 ios auto tune_宽高_07

:自动约束布局按钮

 

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

 

ios autolayout 布局原理 ios auto tune_优先级_08

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

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


ios autolayout 布局原理 ios auto tune_宽高_09

 

Top Layout Guide

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

 

ios autolayout 布局原理 ios auto tune_宽高_10

 

 

ios autolayout 布局原理 ios auto tune_ci_11

horizontal spacing:水平间距

vertical spacing:垂直间距

 

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

 

ios autolayout 布局原理 ios auto tune_宽高_12

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

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

 

ios autolayout 布局原理 ios auto tune_宽高_13

 

或者

 

ios autolayout 布局原理 ios auto tune_优先级_14

1选中约束

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

3进行对约束的设置

约束属性

Relation: 约束模式

常用)

     Less Tran or Equal: 小于等于 <=

     Greater Tran or Equal: 大于等于 >=

常用)

     Standard:标准

常用)

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

Placeholder: 占位符

 

ios autolayout 布局原理 ios auto tune_优先级_15

 

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

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

约束成立规则:

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

 

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

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

 

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

 


ios autolayout 布局原理 ios auto tune_优先级_16

 

 


ios autolayout 布局原理 ios auto tune_优先级_17

ios autolayout 布局原理 ios auto tune_优先级_18

 

ios autolayout 布局原理 ios auto tune_ios autolayout 布局原理_19

1.选中Button

2.点击

ios autolayout 布局原理 ios auto tune_优先级_20

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

4.创建约束

 

ios autolayout 布局原理 ios auto tune_ci_21

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

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

 

ios autolayout 布局原理 ios auto tune_优先级_22

 

固定尺寸宽高

 

ios autolayout 布局原理 ios auto tune_ios autolayout 布局原理_23

 

1.选中Button

2.点击

ios autolayout 布局原理 ios auto tune_ios autolayout 布局原理_24

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

4.创建约束

 

ios autolayout 布局原理 ios auto tune_优先级_25