# iOS - AutoLayout -2 AutoLayout
上篇文章我们了解了AutoLayout 的布局方式，
- 创建约束尽量参考依赖父视图。
- 约束意义明确完整，尽量避免约束冲突
- 代码添加约束，一定要将View的translatesAutoresizingMaskIntoConstraints属性设置为false,否则约束不起效果。
- 先添加到父视图，再添加约束，否则会崩溃。
但是由于布局代码太繁琐，接来下我们了解一下 NSLayoutAnchor，NSLayoutAnchor是对AutoLayout创建约束的补充，核心还是NSLayoutConstraint,可以避免过长创建约束代码。NSLayoutAnchor可以理解为约束描边，通过视图之间的边关系和X、Y轴关系，以及定义自身宽高来创建约束。
锚（Anchor）关系
四边
| Anchor(锚边) | 描述 |
|---|---|
| leadingAnchor | 前边锚（与trailingAnchor成对使用） |
| trailingAnchor | 后边锚 |
| leftAnchor | 左边锚 |
| rightAchor | 右边锚 |
| topAnchor | 上边锚 |
| bottomAnchor | 下边锚 |
大小
- widthAnchor 宽度约束
- heightAnchor 高度约束
中心点
- centerXAnchor X轴对齐关系
- centerYAnchor Y轴对齐关系
基准线
- firstBaseLineAnchor 文本首行基准线
- lastBaeLineAnchor 文本最后一行基准线
例：
self.viewDemo = [UIView new];
self.viewDemo.backgroundColor = [UIColor redColor];
[self.view addSubview:self.viewDemo];
self.viewDemo.translatesAutoresizingMaskIntoConstraints = NO;
[self.viewDemo.leadingAnchor constraintEqualToSystemSpacingAfterAnchor:self.view.leadingAnchor multiplier:0].active = YES;
[self.viewDemo.trailingAnchor constraintEqualToSystemSpacingAfterAnchor:self.view.trailingAnchor multiplier:0].active = YES;
[self.viewDemo.topAnchor constraintEqualToSystemSpacingBelowAnchor:self.view.topAnchor multiplier:0].active = YES;
[self.viewDemo.bottomAnchor constraintEqualToSystemSpacingBelowAnchor:self.view.bottomAnchor multiplier:0].active = YES;
UILayoutGuide
UILayoutGuide用于辅助添加约束，它的作用就像一个透明的View,具备约束参考，但是不会渲染
private var grayView = UIView()
private var orangeView = UIView()
private var redView = UIView()
private var redGuide = UILayoutGuide()
private var orangeGuide = UILayoutGuide()
view.addLayoutGuide(redGuide)
view.addLayoutGuide(orangeGuide)
// 2.设置取消自动转化frame为约束
grayView.translatesAutoresizingMaskIntoConstraints = false
orangeView.translatesAutoresizingMaskIntoConstraints = false
redView.translatesAutoresizingMaskIntoConstraints = false
// 3. 添加约束
// 添加layoutGuide的约束
redGuide.widthAnchor.constraint(equalTo: orangeGuide.widthAnchor, multiplier: 1.0).isActive = true
redGuide.heightAnchor.constraint(equalToConstant: 1).isActive = true
orangeGuide.heightAnchor.constraint(equalToConstant: 1).isActive = true
// 添加view和layouGuide的约束
grayView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 30).isActive = true
grayView.topAnchor.constraint(equalTo: view.topAnchor, constant: 80).isActive = true
grayView.heightAnchor.constraint(equalToConstant: 40).isActive = true
grayView.widthAnchor.constraint(equalToConstant: 40).isActive = true
grayView.rightAnchor.constraint(equalTo: redGuide.leftAnchor).isActive = true
redGuide.rightAnchor.constraint(equalTo: orangeView.leftAnchor).isActive = true
orangeView.widthAnchor.constraint(equalToConstant: 40).isActive = true
orangeView.heightAnchor.constraint(equalToConstant: 40).isActive = true
orangeView.rightAnchor.constraint(equalTo: orangeGuide.leftAnchor).isActive = true
orangeGuide.rightAnchor.constraint(equalTo: redView.leftAnchor).isActive = true
redView.widthAnchor.constraint(equalToConstant: 40).isActive = true
redView.heightAnchor.constraint(equalToConstant: 40).isActive = true
redView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -15).isActive = true
// 灰色、橙色、红色view和redGuide、orangeGuide水平中心对齐
grayView.centerYAnchor.constraint(equalTo: redGuide.centerYAnchor).isActive = true
orangeView.centerYAnchor.constraint(equalTo: grayView.centerYAnchor).isActive = true
orangeView.centerYAnchor.constraint(equalTo: orangeGuide.centerYAnchor).isActive = true
orangeView.centerYAnchor.constraint(equalTo: redView.centerYAnchor).isActive = true
