Auto Layout

Auto Layout 概念

在Auto Layout中组成的基本元件就是约束(constraint)，约束就相当于给你的界面定制了一些规则，让其遵守这个你所给的原则。约束中就可以创建视图的宽度、高度，或者说到另一个视图的距离。你也可以添加或者删除约束，你甚至可以在视图出现后修改约束。

约束基础

比如有时候我们希望一个button距离父视图左侧20像素，如果用数学表达式来表示，则有button.left = (container.left+ 20)，有了这一点基本概念，我们来进行代码编写

Auto Layout 编码

你将会使用到这样的一个类NSLayoutConstraint来创建约束。那么为了创建该类，你可能会使用到一下方法。

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
                             options:(NSLayoutFormatOptions)opts
                             metrics:(NSDictionary *)metrics
                               views:(NSDictionary *)views

先来说说该方法的四个参数以及返回值

1. 格式化字符串，推荐大家看苹果的官方讲解，下面我也会讲解部分
2. 在格式化字符串中描述对象的属性和方向布局。
3. 在约束中展示的字典，
4. 在约束的使用的对象，一般使用 NSDictionaryOfVariableBindings(...)这个宏来进行字典的创建。
5. 其实就是一个约束的集合，其中包括了一些当前视图和父视图的一些格式化字符串

下面来讲解一个例子

UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
// 这一句代码是不能省略掉的，在自动布局中，如果没有设置该属性，系统会自动设置
button.translatesAutoresizingMaskIntoConstraints = NO;
[button setTitle:@"click me" forState:UIControlStateNormal];
[self.view addSubview:button];
[button setBackgroundColor:[UIColor redColor]];

其次，约束设置是在添加视图之后，而不是之前,否则进行系统运行崩溃
NSArray *vLayoutArray = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[button]-|"
                                                                options:NSLayoutFormatAlignAllBaseline
                                                                metrics:nil
                                                                  views:NSDictionaryOfVariableBindings(button)];

[self.view addConstraints:vLayoutArray];

NSArray *hLayoutArray = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-left-[button]-right-|"
                                        options:NSLayoutFormatAlignAllBaseline
                                        metrics:@{@"left":@100, @"right":@100}
                                          views:@{@"button":button}];

// 等价于hLayoutArray
NSArray *hLayoutArraySame = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[button]-100-|"
                                                                    options:NSLayoutFormatAlignAllBaseline
                                                                    metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(button)];

[self.view addConstraints:hLayoutArray];

大家可能已经注意到上面hLayoutArray和hLayoutArraySame等价，注意下，当格式化字符串中使用的明确的数字的时候，那么metrics就可以直接写上nil。而下面格式化字符串使用的是@"H:|-left-[button]-right-|"这种方式，其中出现了left和right两个关键字，所以必须对应相应的metrics，也就是字典，主要其中的key就是前面出现的字符串，而对应的value必须是NSNumber类型，所以两种方式你任选其一。

其次NSDictionaryOfVariableBindings(button)也就等价于@{@"button":button}，只是说用前者创建更加方便，当然你也可以任选其一。

下面我们来讲解另外一个方法

+ constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:
参数1：左侧约束的视图
参数2：左侧约束的属性
参数3：两个视图之间的关系
参数4：右侧约束的视图
参数5：右侧约束的属性
参数6：
参数7：
view1.attr1 = view2.attr2 * multiplier + constant
参数6和参数7可以参考上面的这个等式


比如说上面创建的vLayoutArray这种约束是等价于下面这种方式
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:button attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
[self.view addConstraint:constraint];

下面我们来看另外一个demo，当你想创建多个视图拥有一样的高度和宽度的时候，你可能会多次设置约束，那么我们现在来看看怎么在其他视图基于创建好的视图创建一些约束。

// 创建3个按钮
UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeSystem];
leftButton.translatesAutoresizingMaskIntoConstraints = NO;
[leftButton setTitle:@"leftButton" forState:UIControlStateNormal];
[self.view addSubview:leftButton];
leftButton.backgroundColor = [UIColor redColor];

UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeSystem];
rightButton.translatesAutoresizingMaskIntoConstraints = NO;
[rightButton setTitle:@"rightButton" forState:UIControlStateNormal];
[self.view addSubview:rightButton];
rightButton.backgroundColor = [UIColor redColor];

UIButton *centerButton = [UIButton buttonWithType:UIButtonTypeSystem];
centerButton.translatesAutoresizingMaskIntoConstraints = NO;
[centerButton setTitle:@"centerButton" forState:UIControlStateNormal];
[self.view addSubview:centerButton];
centerButton.backgroundColor = [UIColor redColor];

// 让leftButotn以及rightButotn、centerButton宽度一致
NSArray *constriants = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5-[leftButton(100)]->=5-[centerButton(==leftButton)]->=5-[rightButton(==leftButton)]-5-|" options:NSLayoutFormatAlignAllBaseline metrics:nil views:NSDictionaryOfVariableBindings(leftButton, centerButton, rightButton)];
[self.view addConstraints:constriants];

// 创建leftbutton离父视图多少
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[leftButton(100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton)]];

// 现在让centerButton的高度 = leftButton.height * 1 + 0;
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:leftButton attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:centerButton attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:leftButton attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:rightButton attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];