一、关于自动布局（Autolayout）

我们知道，一款iOS应用，其主要UI组件是由一个个相对独立的可视单元构成，这些可视单元有的主要负责向用户输出有用的信息，有些则负责信息的输入（交互），交互的过程中往往还伴随有动画的效果，以达到整个信息传递的连贯性以及用户体验的细腻感。可视单元，在实际开发中主要是view、button等，那么这些可视单元的关系由两个基本的关系构成：兄弟关系和父子关系，整个视图单元就是一个树形结构：

20140914191636859.png

对于任何一个UI组件，确定了它的（相对于父view）位置、大小也就确定了它在整个UI视图中的展示效果。

Autolayout（以及iOS8中新增的sizeclass）是为了解决这些UI可视单元或者元素是怎样布局、排列的问题。在过去只有iPhone4的时候，我们可以在代码里将没一个可视单元的位置写死，这样是没问题的，但随着iPhone5、6的发布，屏幕尺寸有了越来越多中可能，未来不排除更多尺寸的iPhone发布出来，这就要求我们的APP的UI元素具有在屏幕尺寸不同的设备上具有一定动态的可调性，已实现较好的UI展示效果。从目前苹果提供的技术来看，有下、中、上三种实现方法：

下策是，代码中判断当前设备的尺寸，对UI元素进行手工的调整，其缺点是显而易见的：代码复杂、容易出错、且维护难度大、灵活性极差；

中策是，通过设置可视单元（UIView UIButton...）的autoresizing属性，预设当该view所在的环境（父view）发生变化时它的尺寸和位置应该如何调整，该方法可以在Xcode的interface builder中（storyboard 或者 xib）设置完成，但其只能针对父子关系进行有限的调整，比如左边距是否固定，尺寸是否可变等，而对于兄弟关系的调整则无法实现，对于UI比较固定的APP这种调节方式也算基本满足需求；

上策就是结合使用autolayout和sizeclass对UI可视单元的父子关系、兄弟关系进行全方位的调整，而且调节精度更高：不仅能确定一个view的位置尺寸的变化依据是什么，还能对这些依据加以不同的优先级，先满足什么条件，再满足什么条件，对于重要的位置尺寸可以优先保证，这样整个APP就具有极强的动态可调性，满足不同设备、不同应用场景下的需求。

在目前苹果手机苹果尺寸多达四种的情况下，显然新的APP必须要采用上策来解决视图组件的布局问题。

Autolayout的作用非常明确：帮我们确定在不同设备、不同（父view）环境下，同一个可视单元所应具有合适的位置和尺寸，因此，当一个UIView上所施加的约束能够唯一确定它的frame（x, y, width, height）的时候我们的自动布局的使用才是正确的。而新手通常犯的两类错误就是约束不足（约束太少）和约束冲突两种（约束太多）。如果你给出的约束只能够确定这个view的大小，或者位置或者位置中的某一个项（比如x）的时候，就会出现约束不足的情况，在xib或者storyboard中，会以黄色的警告出现在左侧提示框内；如果你给出的约束推导出了两个甚至多个互相矛盾的位置尺寸结果的时候，就产生了布局错误，在编译的时候直接就build不过。

二、约束

1.Autolayout的2个核心概念：参照和约束

Autolayout常用面板01-约束处理

image6.png

Autolayout常用面板02-相对

image7.png

Autolayout常用面板03-对齐

image8.png

2.Autolayout的警告和错误

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

3.代码实现Autolayout

代码实现Autolayout的步骤
1.利用NSLayoutConstraint类创建具体的约束对象
2.添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];// 添加宽度约束:100
    
    /************************** 蓝色 **************************/
    // 添加高度约束:40
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:40];
    [blueView addConstraint:heightConstraint];
    
    // 添加左边约束：blueView的左边距离父控件左边有20的间距
    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    [self.view addConstraint:leftConstraint];
    
    // 添加右边约束：blueView的右边距离父控件右边有20的间距
    NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:rightConstraint];
    
    // 添加顶部约束：blueView的顶部距离父控件顶部有20的间距
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    [self.view addConstraint:topConstraint];
    
    /************************** 红色 **************************/
    // 添加高度约束:蓝色等高
    NSLayoutConstraint *heightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
    [self.view addConstraint:heightConstraint2];
    
    // 添加左边约束：redView的左边 == 父控件的中心x
    NSLayoutConstraint *leftConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    [self.view addConstraint:leftConstraint2];
    
    // 添加顶部约束：redView的顶部距离blueView的底部有20的间距
    NSLayoutConstraint *topConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
    [self.view addConstraint:topConstraint2];
    
    // 添加右边约束：redView的右边 == blueView的右边
    NSLayoutConstraint *rightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
    [self.view addConstraint:rightConstraint2];

3.代码实现Autolayout的注意点
(1).要先禁止autoresizing功能，设置view的下面属性为NO

view.translatesAutoresizingMaskIntoConstraints = NO;

(2)添加约束之前，一定要保证相关控件都已经在各自的父控件上
(3)不用再给view设置frame
4.一个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

5.添加约束的规则
1）对于两个同层级view之间的约束关系，添加到它们的父view上

image11.jpg

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

image12.jpg

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

image13.jpg

三、VFL语言。

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

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的边缘）

2.使用VFL来创建约束数组

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
format ：VFL语句
opts ：约束类型
metrics ：VFL语句中用到的具体数值
views ：VFL语句中用到的控件

    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 间距
    NSNumber *margin = @20;
    
    // 添加水平方向的约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
    [self.view addConstraints:constraints];
    
    // 添加竖直方向的间距
    NSNumber *height = @40;
    NSString *vfl2 = @"V:[blueView(height)]-margin-|";
    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
    [self.view addConstraints:constraints2];

Autolayout