IOS AutoLayout

<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>
效果：

57d7fdba60b9a35896000002.png

是不是发现其实也简单，只是代码多了些而已

<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>

效果：

57d7ffde60b9a35896000004.png

再来看看水平垂直居中
<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>

57d8007f60b9a35896000005.png

<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 ！ 这才是王道