Masonry的使用

场景1:4个label等宽占满整个屏幕宽
//四个label等宽
{
UILabel *label1 = [[UILabel alloc] init];
label1.backgroundColor = [UIColor redColor];

UILabel *label2 = [[UILabel alloc] init];
label2.backgroundColor = [UIColor yellowColor];

UILabel *label3 = [[UILabel alloc] init];
label3.backgroundColor = [UIColor orangeColor];

UILabel *label4 = [[UILabel alloc] init];
label4.backgroundColor = [UIColor blueColor];

[self.view addSubview:label1];
[self.view addSubview:label2];
[self.view addSubview:label3];
[self.view addSubview:label4];

[label1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view).offset(300);
    make.leading.equalTo(self.view);
    make.height.mas_equalTo(100);

// make.width.mas_equalTo(100);
}];

[label2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(label1.mas_right );
    make.height.equalTo(label1.mas_height);
    make.top.equalTo(label1.mas_top);
    make.width.equalTo(label1.mas_width);

// make.right.equalTo(self.view.mas_right);
}];

[label3 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(label2.mas_right);
    make.height.equalTo(label2.mas_height);
    make.top.equalTo(label2.mas_top);
    make.width.equalTo(label2.mas_width);

// make.right.equalTo(self.view.mas_right);
}];

[label4 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(label3.mas_right);
    make.height.equalTo(label3.mas_height);
    make.top.equalTo(label3.mas_top);
    make.width.equalTo(label3.mas_width);
    make.right.equalTo(self.view.mas_right);
}];

}

效果图: image.png

场景2:3个lable 1.2等宽 3是1.2宽的2倍 2高是1.3的2倍,宽占满整个屏幕
//三个控件,头2个等宽第三个是前面宽的2倍,第二个高是其他2个的2倍

{
UILabel *label1 = [[UILabel alloc] init];
label1.backgroundColor = [UIColor redColor];
UILabel *label2 = [[UILabel alloc] init];
label2.backgroundColor = [UIColor blueColor];
UILabel *label3 = [[UILabel alloc] init];
label3.backgroundColor = [UIColor grayColor];

[self.view addSubview:label1];
[self.view addSubview:label2];
[self.view addSubview:label3];

[label1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view).offset(450);
    make.leading.equalTo(self.view);
    make.height.mas_equalTo(150);
}];

[label2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(label1.mas_top);
    make.left.equalTo(label1.mas_right);
    make.height.equalTo(label1.mas_height).multipliedBy(2);
    make.width.equalTo(label1.mas_width);
}];

[label3 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(label2.mas_top);
    make.left.equalTo(label2.mas_right);
    make.height.equalTo(label2.mas_height).multipliedBy(0.5);
    make.width.equalTo(label2.mas_width).multipliedBy(2);
    make.right.equalTo(self.view.mas_right);
}];

}

Snip20190319_1.png