iOS - AutoLayout -2 AutoLayout

# 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