nAutolayout
niOS学院
n李明杰
n简介
n在以前的iOS程序中，是如何设置布局UI界面的？
p经常编写大量的坐标计算代码
p为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果，有时还需要分别为2种屏幕编写不同的坐标计算代码（即传说中的“屏幕适配”）
p
n什么是Autolayout
pAutolayout是一种“自动布局”技术，专门用来布局UI界面的
pAutolayout自iOS 6开始引入，由于Xcode 4的不给力，当时并没有得到很大推广
p自iOS 7（Xcode 5）开始，Autolayout的开发效率得到很大的提升
p苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
pAutolayout能很轻松地解决屏幕适配的问题
n简介
nAutoresizing
p在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性较大，有些任务根本无法完成
p相比之下，Autolayout的功能比Autoresizing强大很多
p
nAutolayout的2个核心概念
p参照
p约束
nAutolayout的警告和错误
n警告
p控件的frame不匹配所添加的约束, 比如
ü比如约束控件的宽度为100, 而控件现在的宽度是110
n错误
p缺乏必要的约束, 比如
ü只约束了宽度和高度, 没有约束具体的位置
ü
p两个约束冲突, 比如
ü1个约束控件的宽度为100, 1个约束控件的宽度为110
n代码实现Autolayout
n代码实现Autolayout的步骤
p利用NSLayoutConstraint类创建具体的约束对象
p添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;
n代码实现Autolayout的注意点
p要先禁止autoresizing功能，设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
p添加约束之前，一定要保证相关控件都已经在各自的父控件上
p不用再给view设置frame
-
nNSLayoutConstraint
n一个NSLayoutConstraint对象就代表一个约束
p
n创建约束对象的常用方法
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
pview1 ：要约束的控件
pattr1 ：约束的类型（做怎样的约束）
prelation ：与参照控件之间的关系
pview2 ：参照的控件
pattr2 ：约束的类型（做怎样的约束）
pmultiplier ：乘数
pc ：常量
n自动布局有个核心公式
obj1.property1 =（obj2.property2 * multiplier）+ constant value
n添加约束的规则（1）
n在创建约束之后，需要将其添加到作用的view上
n在添加时要注意目标view需要遵循以下规则：
p1）对于两个同层级view之间的约束关系，添加到它们的父view上
n
n
n添加约束的规则（2）
n2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
n
n添加约束的规则（3）
n3）对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
nVFL语言
n什么是VFL语言
pVFL全称是Visual Format Language，翻译过来是“可视化格式语言”
pVFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
nVFL示例
nH:[cancelButton(72)]-12-[acceptButton(50)]
pcanelButton宽72，acceptButton宽50，它们之间间距12
n
nH:[wideView(>=60@700)]
pwideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
n
nV:[redBox]-[yellowBox(==redBox)]
p竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox
n
nH:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
p水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）
nVFL的使用
n使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
pformat ：VFL语句
popts ：约束类型
pmetrics ：VFL语句中用到的具体数值
pviews ：VFL语句中用到的控件
p
n创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义
NSDictionaryOfVariableBindings(...)
p
n有了Autolayout的UILabel
n在没有Autolayout之前，UILabel的文字内容总是居中显示，导致顶部和底部会有一大片空缺区域
n
n
n
n
n
n
n有Autolayout之后，UILabel的bounds默认会自动包住所有的文字内容，顶部和底部不再会有空缺区域
n基于Autolayout的动画
n在修改了约束之后，只要执行下面代码，就能做动画效果
[UIView animateWithDuration:1.0 animations:^{
[添加了约束的view layoutIfNeeded];
}];
n练习1
n在控制器view底部添加2个view，1个蓝色，1个红色
p2个view宽度、高度永远相等
p距离父控件左边、右边、下边间距和2个view之间的间距相等
n练习2
n完成“史上最牛的游戏”首页
p添加对应的6个button和背景图片，适配3.5 inch、4.0 inch
n练习3
n在控制器view顶部添加2个view，1个蓝色，1个红色
p2个view高度永远相等
p红色view和蓝色view右边对齐
p蓝色view距离父控件左边、右边、上边间距相等
p蓝色view距离红色view间距固定
p红色view的左边和父控件的中点对齐
n练习4
n横竖屏效果如图所示
n