Autolayout-NSLayoutConstraint代码添加

作者:Mitchell 

---

一、代码添加约束顺序###

• 创建控件
• 将控件添加到父控件中
• 关闭需要添加约束的控件的Autoresizing属性
• 创建约束

二、注意约束添加到哪里###

• 如果是自身的属性，如宽高，添加到自身
• 如果是关于父视图的约束，添加到父视图
• 如果是两个控件，添加到两个控件共同的父视图。

三、需求案例###

• 案例1：

// 1.创建一个控件
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    // 1.如果是通过代码添加Autolayout, 那么必须在添加约束之前禁用Autoresizing
    // 2.禁用Autoresizing时, 必须是给谁添加就禁用谁的, 也就是说如果禁用了父控件无效
    // 3.添加约束之前, 必须保证被约束的控件已经添加到父控件中了
    //    self.view.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 2.创建约束对象
    /*
     Item == 第一个控件
     attribute == 第一个控件的什么属性
     relatedBy == 等于/小于等于/大于等于
     toItem == 第二个控件
     attribute == 第二个控件的什么属性
     multiplier == 乘以多少
     constant == 加上多少
     */
    // 2.1顶部约束
    NSLayoutConstraint *topCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    [self.view addConstraint:topCos];
    
    // 2.1左边约束
    NSLayoutConstraint *leftCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    [self.view addConstraint:leftCos];
    
    // 2.1底部约束
    NSLayoutConstraint *bottomCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
    [self.view addConstraint:bottomCos];
    
    // 2.1右边约束
    NSLayoutConstraint *rightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:rightCos];
    
    //    写在这里不行, 必须在设置约束之前添加
    //    [self.view addSubview:redView];

• 案例2：

    // 1.创建两个控件
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    
    // 2.将两个控件添加到父控件中
    [self.view addSubview:redView];
    [self.view addSubview:blueView];
    
    // 3.关闭需要添加约束的控件的Autoresizing属性
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 4.创建约束
    // 4.1蓝色约束
    // 4.1.1顶部约束
    NSLayoutConstraint *blueTopCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    [self.view addConstraint:blueTopCos];
    
    // 4.1.2左边约束
    NSLayoutConstraint *blueLeftCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    [self.view addConstraint:blueLeftCos];
    
    // 4.1.3右边约束
    NSLayoutConstraint *blueRightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:blueRightCos];
    
    // 4.1.4高度约束
    NSLayoutConstraint *blueHeightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:50];
    [blueView addConstraint:blueHeightCos];
    
    // 4.2红色约束
    // 4.2.1顶部约束
    NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
    [self.view addConstraint:redTopCos];
    
    // 4.2.2右边约束
    NSLayoutConstraint *redRightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:redRightCos];
    
    // 4.2.3高度约束
    NSLayoutConstraint *redHeightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
    [self.view addConstraint:redHeightCos];
    
    // 4.2.4宽度约束
    NSLayoutConstraint *redWidthCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:redWidthCos];