什么是Autolayout?
Autolayout是一种“自动布局”技术,专门用来布局UI界面的。
Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广。
自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升。
苹果官方也推荐开发者尽量使用Autolayout来布局UI界面。

Autolayout能很轻松地解决屏幕适配的问题。

在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成
相比之下,Autolayout的功能比Autoresizing强大很多。
Autolayout的2个核心概念
参照
约束

autolayout在使用过程中会出现两种问题:

1,警告

控件的frame不匹配所添加的约束, 比如
比如约束控件的宽度为100, 而控件现在的宽度是110
2,错误
缺乏必要的约束, 比如
只约束了宽度和高度, 没有约束具体的位置
两个约束冲突, 比如
1个约束控件的宽度为100, 1个约束控件的宽度为110

使用autolayout

第一种方式:interfaceBuilder

通过Xcode的interfaceBuilder界面,直接对xib内的控件进行约束,非常直观也是autolayout使用最普遍的方式。在博客里不能给出太多的练习,只能通过自己亲手操作才能逐渐掌握,可课下多加练习即可,接下来着重介绍用代码实现autolayout。

第二种 方式:代码实现Autolayout的步骤

利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;
代码实现Autolayout的注意点
要先禁止autoresizing功能,设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
添加约束之前,一定要保证相关控件都已经在各自的父控件上
不用再给view设置frame

例子:

Autolayout_iOS适配布局

首先要注意的是在做适配autolayout的时候,要先将view添加到父view上面。

接下来要给大家介绍下密密麻麻代码的具体含义:

一个NSLayoutConstraint对象就代表一个约束
创建约束对象的常用方法
+(id)constraintWithItem:(id)view1

attribute:(NSLayoutAttribute)attr1

relatedBy:(NSLayoutRelation)relation

toItem:(id)view2 attribute:(NSLayoutAttribute)attr2

multiplier:(CGFloat)multiplier 

constant:(CGFloat)c;
view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量
自动布局有个核心公式
obj1.property1 =(obj2.property2 * multiplier)+ constant value

在这里有必要给大家讲一下添加约束的规则:

规则一:

在创建约束之后,需要将其添加到作用的view上在添加时要注意目标view需要遵循以下规则:
1)对于两个同层级view之间的约束关系,添加到它们的父view上,

Autolayout_iOS适配布局_02

2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上

Autolayout_iOS适配布局_03

3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上

Autolayout_VFL语言_04

第三种:VFL语言

什么是VFL语言:
VFL全称是Visual Format Language,翻译过来是“可视化格式语言”
VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

Autolayout_autolayout怎么用_05

VFL实例:

H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton宽72,acceptButton宽50,它们之间间距12
H:[wideView(>=60@700)]
wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)
V:[redBox]-[yellowBox(==redBox)]
竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)

VFL的使用:

使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
format :VFL语句
opts :约束类型
metrics :VFL语句中用到的具体数值
views :VFL语句中用到的控件
创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义
NSDictionaryOfVariableBindings(...)

示例程序1:

Autolayout_控件_06

Autolayout_autolayout_07

示例程序2:

Autolayout_autolayout怎么用_08

Autolayout_VFL语言_09

有了autolayout之后的UILabel

在没有Autolayout之前,UILabel的文字内容总是居中显示,导致顶部和底部会有一大片空缺区域

Autolayout_iOS适配布局_10

有Autolayout之后,UILabel的bounds默认会自动包住所有的文字内容,顶部和底部不再会有空缺区域

Autolayout_autolayout怎么用_11

另外有一个属性可设置填充内容的最大宽度preferredMaxLayoutWidth,记得行数设置为0行。

基于Autolayout的动画

在修改了约束之后,只要执行下面代码,就能做动画效果
[UIView animateWithDuration:1.0 animations:^{
    [添加了约束的view layoutIfNeeded];
}];

示例程序:

Autolayout_autolayout_12

约束的几个方法!!


-layoutSubviews方法:这个方法,默认没有做任何事情,需要子类进行重写

-setNeedsLayout方法: 标记为需要重新布局,异步调用layoutIfNeeded刷新布局,不立即刷新,但layoutSubviews一定会被调用

-layoutIfNeeded方法:如果,有需要刷新的标记,立即调用layoutSubviews进行布局(如果没有标记,不会调用layoutSubviews)

如果要立即刷新,要先调用[view setNeedsLayout],把标记设为需要布局,然后马上调用[view layoutIfNeeded],实现布局

在视图第一次显示之前,标记总是“需要刷新”的,可以直接调用[view layoutIfNeeded]


setNeedsUpdateConstraints : 当一个自定义的View某一个属性的改变可能影响到界面布局,我们应该调用这个方法来告诉布局系统在未来某个时刻需要更新。系统会调用updateConstraints去更新布局。

updateConstraints :自定义View时,我们应该重写这个方法来设置当前view局部的布局约束。重写这个方法时,一定要调用[super updateConstraints]。

needsUpdateConstraints :布局系统使用这个返回值来确定是否调用updateConstraints

updateConstraintsIfNeeded :我们可以调用这个方法触发update Constraints的操作。在needsUpdateConstraints返回YES时,才能成功触发update Constraints的操作。我们不应该重写这个方法。

Auto Layout的布局过程是 update constraints(updateConstraints)-> layout Subviews(layoutSubViews)-> display(drawRect) 这三步不是单向的,如果layout的过程中改变了constrait, 就会触发update constraints,进行新的一轮迭代。我们在实际代码中,应该避免在此造成死循环