iOS-代码实现AutoLayout布局

​ 在代码中添加Autolayout约束的方法就如下的整个demo介绍。下面demo中还介绍到了怎么在Autolayout下做动画，以及约束的优先级。

1. 在约束添加中要注意以下几个地方：
2. 两个相同一层级的视图的约束要添加到共同的父视图上
3. 两个不同层级的视图的约束要添加到他们最近的共有的父视图上
4. 子视图与父视图之间的约束添加到父视图上

#import "ViewController.h"

@interface ViewController ()
{
    UIView *blueView;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self addRedView];
}

- (void)addRedView
{
    //首先创建这个View
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    //给每个视图代码添加NSLayoutConstraint约束的时候要关闭这个属性
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    //在给视图添加约束的时候要先将视图添加到父视图，不然会报错
    [self.view addSubview:redView];

    //相对于父控件的左边距
    NSLayoutConstraint *redViewLeft = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20.0];
    [self.view addConstraint:redViewLeft];

    //相对于父控件的下边距
    NSLayoutConstraint *redViewBottom = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20.0];
    [self.view addConstraint:redViewBottom];

    //自身宽度约束（这里是直接添加宽度约束）
    NSLayoutConstraint *redViewWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:50];
    [redView addConstraint:redViewWidth];


    //自身高度约束（这里是直接添加高度约束）
    NSLayoutConstraint *redViewHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:50];
    [redView addConstraint:redViewHeight];

    //蓝色的小方块
    blueView = [[UIView alloc]init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];

    //相对于红色视图的顶部约束
    NSLayoutConstraint *blueViewTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    [self.view addConstraint:blueViewTop];

    //视图左边的边距（相对于红色视图的右边的边距）
    NSLayoutConstraint *blueViewLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeRight multiplier:1.0 constant:20];
    [self.view addConstraint:blueViewLeft];

    //等于红色视图的宽
    NSLayoutConstraint *blueViewWidth = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];
    [self.view addConstraint:blueViewWidth];

    //等于红色视图的高
    NSLayoutConstraint *blueViewHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
    [self.view addConstraint:blueViewHeight];

    //黑色的视图
    UIView *blackView = [[UIView alloc]init];
    blackView.backgroundColor = [UIColor blackColor];
    blackView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blackView];

    //相对于红色视图的顶部约束
    NSLayoutConstraint *blackViewTop = [NSLayoutConstraint constraintWithItem:blackView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    [self.view addConstraint:blackViewTop];

    //视图左边的边距（相对于红色视图的右边的边距）
    NSLayoutConstraint *blackViewLeft = [NSLayoutConstraint constraintWithItem:blackView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:20];
    [self.view addConstraint:blackViewLeft];

    //直接添加黑色视图的宽度约束
    NSLayoutConstraint *blackViewWidth = [NSLayoutConstraint constraintWithItem:blackView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:50];
    [self.view addConstraint:blackViewWidth];

    //直接添加黑色视图的高度约束
    NSLayoutConstraint *blackViewHeight = [NSLayoutConstraint constraintWithItem:blackView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:50];
    [self.view addConstraint:blackViewHeight];

    //这里介绍了在AutoLayout中做动画的方法。当蓝色视图消失后，这个视图的左边距要设置为相对于红色视图的右边距
    NSLayoutConstraint *blackViewWithredViewLeft = [NSLayoutConstraint constraintWithItem:blackView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeRight multiplier:1.0 constant:20];

    //重复添加约束是回报错的，不正确的做法。但是这里如果蓝色视图消失不改变约束的话就达不到想要的约束效果
    //解决方法就是设置约束的优先级 优先级范围为：0 - 1000 数值越大优先级越高  默认为1000
    UILayoutPriority left = 200;
    blackViewWithredViewLeft.priority = left;
    [self.view addConstraint:blackViewWithredViewLeft];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [blueView removeFromSuperview];
    [UIView animateWithDuration:2 animations:^{
        //当视图发生改变需要更新约束
        [self.view layoutIfNeeded];
    }];
}

最终效果图

个人博客地址：Aaronzjp.cn