Masonry自动布局使用

1、效果1

1.png

/**
 红色view在父控件中心，宽高都是100
 */
- (void)redviewCenter{
    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.width.mas_equalTo(100);
        make.height.mas_equalTo(100);
    }];
}

1、效果2

2.png

/**
 在控制器view底部添加2个view，1个蓝色，1个红色
 2个view宽度、高度永远相等,高度等于50
 距离父控件左边、右边、下边间距和2个view之间的间距相等,等于30
 */
- (void)redBlueView {
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.view.mas_left).offset(20);
        make.bottom.mas_equalTo(self.view.mas_bottom).offset(-20);
        make.right.mas_equalTo(blueView.mas_left).offset(-20);
        //        make.width.mas_equalTo(blueView);
        //        make.height.mas_equalTo(blueView);
        make.height.with.width.mas_equalTo(blueView);
        make.height.mas_equalTo(50);
    }];
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.mas_equalTo(self.view.mas_right).offset(-20);
        make.bottom.mas_equalTo(redView.mas_bottom);
    }];
}

3、效果3

3.png

/**
 在控制器view顶部添加2个view，1个蓝色，1个红色
 2个view高度永远相等,为50
 红色view和蓝色view右边对齐
 蓝色view距离父控件左边、右边、上边间距相等,为30
 蓝色view距离红色view间距固定,30
 红色view的宽度等于蓝色view的一半
 
 */
- (void)viewTest{
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.view.mas_left).offset(30);
        make.top.mas_equalTo(self.view.mas_top).offset(30);
        make.right.mas_equalTo(self.view.mas_right).offset(-30);
        make.height.mas_equalTo(redView.mas_height);
        make.height.mas_equalTo(50);
    }];
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.mas_equalTo(blueView.mas_right);
        make.width.mas_equalTo(blueView.mas_width).multipliedBy(0.5).offset(0); // 红色view宽度是蓝色view宽度的一半
        make.top.mas_equalTo(blueView.mas_bottom).offset(30);
    }];
}