<h2>前言</h2>
我们知道做前端开发最常打交道就是布局，为了适应不同尺寸屏幕 ，AutoLayout 重要性就不必强调了吧，这时标题党，一定会喊出Masonry。对对，无可厚非，绝对是敏捷开发必备利器。但是，但是要说不是Masonry。这时给客官估计要砸鸡蛋，甩一脸唾沫了。AutoLayout 除了Masonry 框架还有其它？ 答案显而易见，肯定没有了，本小哥要说的是官方提供的NSLayoutConstraint 约束布局。 呵呵？ 放着好好的Masonry 不用，干嘛要用那鬼玩意，繁琐，不说，还表意不太明确。 看过Masonry 源码的都知道，是对官方API 进行封装，才让码猿们告别又长又臭的NSLayoutConstraint 是臭，但不是我们不学习理由 起码对大多数初学者，跟着大项目估计最先见到的就是第三方的框架来说，还是有学习的必要 或许那天 碰到不准使用第三方布局框架的APP 咱也能不慌不乱
<h2>什么是NSLayoutConstraint</h2>
要学NSLayoutConstraint 就少不了要知道VFL(Visual format language) 可视化格式语法知道下大概意思就行。记住下面表达式，你就会写一半了。剩下一半，琢磨琢磨，理解下，就可迎娶高富美，走向人生巅峰了。……_
| 功能 | 表达式 |
|---|---|
| 水平方向 | H： |
| 垂直 | V： |
| views | [view] |
| superView | ｜ |
| 关系 | >=,==,<= |
| 垂直方向 | V: |
| 空间，间隙 | - |
| 优先级 | @value |
<h2>VFL 表达式</h2>
<pre>H:|-(50)-[view1(100)]-(20)-[view2(==view1)-|</pre>
对初学者来说，咱一看，什么鬼，有点蒙圈。 但少侠莫急，对着上面的武功表格，包你练成乳来伸展
字面理解 水平方向距左边缘父类View 50px view1自己宽100px view2距view1 20px view2宽＝＝view宽 (-)默认不给定值是距边界父类视图20px； 是不是感觉，也很直观
<pre>V:|-(50)-[view1(100)]-(20)-[view2(==view1)-|</pre>
同理把上面的解释的话宽换成高
说了这么多，只会招式，不能上战场，如何出来装....
先来个简单的 就宽高约束吧
<pre>
UIView *topView =[UIView new];
topView.backgroundColor=[UIColor redColor];
UIView *bottomView =[UIView new];
bottomView.backgroundColor=[UIColor blueColor];
[self.view addSubview:topView];
[self.view addSubview:bottomView];
topView.translatesAutoresizingMaskIntoConstraints=NO;
bottomView.translatesAutoresizingMaskIntoConstraints=NO;
NSDictionary *views =NSDictionaryOfVariableBindings(topView,bottomView);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[topVie(100)]" options:NSLayoutFormatAlignAllTop metrics:0 views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[topView(100)]" options:NSLayoutFormatAlignAllTop metrics:0 views:views]];</pre>
效果：
是不是发现其实也简单，只是代码多了些而已
<pre> topView.translatesAutoresizingMaskIntoConstraints=NO; </pre>将Autoresize 可以转换AutoLayout 关闭
上面代码会发现有两个view 还有一个bottomView 呢 ？？
<pre>
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[topView]-[bottomView(==topView)]" options:0 metrics:0 views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(20)-[bottomView(==topView)]" options:0 metrics:0 views:views]];</pre>
效果：
再来看看水平垂直居中
<pre>
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[topView(100)]" options:NSLayoutFormatAlignAllTop metrics:0 views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[topView(100)]" options:NSLayoutFormatAlignAllTop metrics:0 views:views]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:topView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:topView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];</pre>
<h2>NSLayoutConstraint 参数用法</h2>
[NSLayoutConstraint constraintsWithVisualFormat: ① options:② metrics:③ views: ④]];
① VFL 表达式
② 约束枚举 如 NSLayoutFormatAlignAllTop 等等 views 全部顶部齐平以此类推。
③ 表达式中可以放置占位符 用来动态替换值
<pre>
[NSLayoutConstraint constraintsWithVisualFormat:@"V:[topView]-[topView(==height)]"
options:0
metrics:@{@"height":@30}
views:views];</pre>
④子类集合，或约束view集合
动态改变布局加速这句，就可以嗨皮的写写AutoLayout 的动画
<pre>[UIView animateWithDuration:0.3 animations:^{
[self.view layoutIfNeeded];
}];</pre>
<h2>结尾</h2>
有了框架让我们开发无往不利，但我们也该学其根本，I can write with frame, no I can write ！ 这才是王道
