Masonry-使用纯代码进行iOS的自动布局

背景：现在项目里除了用xib就是纯代码了，纯代码布局的三方框架Masonry很方便，所以今天就学习它。

首先我们要下载Masonry源码。源码地址如下：
https://github.com/Masonry/Masonry

首先在Masonry中能够添加autolayout约束有三个函数

//第一次加约束
- (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
//更新约束
- (NSArray *)mas_updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
//重新加约束
- (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

用mas_equalTo还是用equalTo，请看下面的宏定义，mas_equalTo传入的值都会用 MASBoxValue包装下 ，为了方便不用考虑什么时候包装，就可以直接用mas_equalTo，省脑子😄。

#define mas_equalTo(...)     equalTo(MASBoxValue((__VA_ARGS__)))

demo1

 UIView *redview = [[UIView alloc]init];
    redview.backgroundColor = [UIColor redColor];
    [self.view addSubview:redview];
    
//    [redview mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.left.mas_equalTo(100);
//        make.top.mas_equalTo(100);
//        make.right.mas_equalTo(-100);
//        make.bottom.mas_equalTo(-100);
//    }];
//    [redview mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.left.mas_equalTo(self.view).offset(100);
//        make.right.mas_equalTo(self.view).offset(-100);
//        make.top.mas_equalTo(self.view).offset(100);
//        make.bottom.mas_equalTo(self.view).offset(-100);
//    }];
    
    [redview mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.edges.mas_equalTo(UIEdgeInsetsMake(100, 100, 100, 100));
        
    }];

QQ20170218-221955@2x.png

demo2

   UIView *redview = [[UIView alloc]init];
    redview.backgroundColor = [UIColor redColor];
    [self.view addSubview:redview];
    
    [redview mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(100, 100));
    }];

QQ20170218-223522@2x.png

demo3

 UIView *redView = [UIView new];
    
    redView.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:redView];
    
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.size.mas_equalTo(CGSizeMake(200, 200));
        make.center.mas_equalTo(self.view);
        
    }];
    
    
    
    UIView *greenView = [UIView new];
    greenView.backgroundColor = [UIColor greenColor];
    [redView addSubview:greenView];
    
    UIView *blueView = [UIView new];
    blueView.backgroundColor = [UIColor blueColor];
    [redView addSubview:blueView];
    
    
    [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.left.mas_equalTo(10);
        make.top.mas_equalTo(20);
        make.bottom.mas_equalTo(-20);
        make.right.mas_equalTo(blueView.mas_left).offset(-10);
        make.width.mas_equalTo(blueView.mas_width);
        
    }];
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.mas_equalTo(20);
        make.right.mas_equalTo(-10);
        make.bottom.mas_equalTo(-20);
        make.width.mas_equalTo(greenView.mas_width);
        
        
    }];

QQ20170218-230713@2x.png

不止可以表达相等关系

mas_greaterThanOrEqualTo  == 大于或者等于

mas_lessThanOrEqualTo   == 小于或者等于

demo4

    
    UILabel *lab = [UILabel new];
    lab.text = @"呵呵呵呵呵呵呵呵呵呵呵呵";
    [self.view addSubview:lab];
    
    [lab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(10);
        make.top.mas_equalTo(200);
//        make.width.mas_lessThanOrEqualTo(200);
        //multipliedBy是倍数关系，宽度为父视图的一半。
        make.width.mas_equalTo(self.view).multipliedBy(0.5);
    }];

QQ20170218-233825@2x.png

edges 边界

//使 top, left, bottom, right等于 view2
make.edges.equalTo(view2);

//使 top = superview.top + 5, left = superview.left + 10,
//      bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size 尺寸

// 使宽度和高度大于或等于 titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

//使 width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

center 中心

//使 centerX和 centerY = button1
make.center.equalTo(button1)

//使 centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

mas_updateConstraints更新约束,如改变某根约束或者是添加新的约束（不会移除已经存在的约束即使新旧约束间相互冲突 )，如果改变了某根约束后要实现动画效果，看下面代码，调用layoutIfNeeded方法即可。

- (void)viewDidLoad {
    [super viewDidLoad];
    
    
    
    UIView *redView = [UIView new];
    
    redView.backgroundColor = [UIColor redColor];
    self.redview = redView;
    [self.view addSubview:redView];
    
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.size.mas_equalTo(CGSizeMake(200, 200));
        make.left.mas_equalTo(10);
        make.top.mas_equalTo(100);
        
    }];


    
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    
    
    
    [self.redview mas_updateConstraints:^(MASConstraintMaker *make) {
       
        make.left.mas_equalTo(100);
    }];
    
    [UIView animateWithDuration:1 animations:^{
        
        [self.view layoutIfNeeded];
    }];
    
}

mas_remakeConstraints 的意思是将之前的约束清除，然后重新加约束。很简单的。