# iOS - AutoLayout -2 AutoLayout
上篇文章我們了解了AutoLayout 的布局方式，
- 創(chuàng)建約束盡量參考依賴父視圖。
- 約束意義明確完整揪利，盡量避免約束沖突
- 代碼添加約束，一定要將View的translatesAutoresizingMaskIntoConstraints屬性設(shè)置為false,否則約束不起效果。
- 先添加到父視圖礼烈，再添加約束，否則會(huì)崩潰婆跑。
但是由于布局代碼太繁瑣此熬，接來(lái)下我們了解一下 NSLayoutAnchor，NSLayoutAnchor是對(duì)AutoLayout創(chuàng)建約束的補(bǔ)充滑进，核心還是NSLayoutConstraint,可以避免過(guò)長(zhǎng)創(chuàng)建約束代碼摹迷。NSLayoutAnchor可以理解為約束描邊，通過(guò)視圖之間的邊關(guān)系和X郊供、Y軸關(guān)系峡碉，以及定義自身寬高來(lái)創(chuàng)建約束。
錨（Anchor）關(guān)系
四邊
| Anchor(錨邊) | 描述 |
|---|---|
| leadingAnchor | 前邊錨（與trailingAnchor成對(duì)使用） |
| trailingAnchor | 后邊錨 |
| leftAnchor | 左邊錨 |
| rightAchor | 右邊錨 |
| topAnchor | 上邊錨 |
| bottomAnchor | 下邊錨 |
大小
- widthAnchor 寬度約束
- heightAnchor 高度約束
中心點(diǎn)
- centerXAnchor X軸對(duì)齊關(guān)系
- centerYAnchor Y軸對(duì)齊關(guān)系
基準(zhǔn)線
- firstBaseLineAnchor 文本首行基準(zhǔn)線
- lastBaeLineAnchor 文本最后一行基準(zhǔn)線
例：
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用于輔助添加約束驮审，它的作用就像一個(gè)透明的View,具備約束參考鲫寄，但是不會(huì)渲染
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.設(shè)置取消自動(dòng)轉(zhuǎn)化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水平中心對(duì)齊
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
