masonryoc版（snapkitswift版）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›Swift 教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

masonry是一款基于纯代码编写的自动布局第三方框架，他的使用非常方便。对它进行简单的介绍和总结。

demo实例效果：用masonry完成如下效果

使用方法：

1.通过cocopad安装masonry或者直接在github上下载。

2.引入头文件#import "Masonry.h"

3.在效果图中，主要用到了四个label，一个view和一个button,初始化这些控件：

    label1 = [UILabel new];
    label2 = [UILabel new];
    label3 = [UILabel new];
    label4 = [UILabel new];
    
    //初始化label，并设置它的一些参数
    NSArray *arrayLabel = @[label1,label2,label3,label4];
    NSArray *arrayText = @[@"科目一",@"科目二",@"科目三",@"科目四"];
    for (int i = 0; i<4; i++) {
        UILabel *label = arrayLabel[i];
        label.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1.0];
        label.text = arrayText[i];
        label.layer.cornerRadius = 10;
        label.clipsToBounds = YES;
        label.textAlignment = NSTextAlignmentCenter;
        label.textColor = [UIColor whiteColor];
        [self.view addSubview:label];
    }
    
    //初始化uiview
    backView = [UIView new];
    backView.clipsToBounds = YES;
    backView.layer.cornerRadius = 50;
    backView.layer.masksToBounds = YES;
    backView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:backView];
    //初始化button
    btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setTitle:@"汽车类型" forState:UIControlStateNormal];
    btn.backgroundColor = [UIColor redColor];
    btn.layer.cornerRadius = 40;
    [backView addSubview:btn];

4.到了今天的主题了，设置上诉控件的约束条件：

需要注意的是：1.masonry只设置纯代码编写的控件，如果你用ib的话，设置masonry是没有效果的。

2.masonry设置，必须在你把控件添加到父视图之后添加，否则会出现报错。

-(void)creatContrains
{
    [label1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@80);//距顶部距离
        make.left.equalTo(self.view.mas_left).offset(50);//向左偏移50
        make.height.equalTo(@70);//设置它的高度
    }];
    
    [label2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.height.equalTo(label1);//设置label2的顶部，底部和高度和label1一样，这样设置，简洁明了，很方便吧
        make.left.equalTo(label1.mas_right).offset(40);//相对于label1的右间距，偏移40
        make.right.equalTo(self.view.mas_right).offset(-50);//设置它的右侧偏移量为50，注意为－号哦。
        make.width.equalTo(label1.mas_width);//设置与label1等宽，这里设置的是相对约束，根据不同屏幕的大小，改变label1和label2的宽度。
    }];
    
    [label3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.width.height.equalTo(label1);//设置它的左右，宽高和label1一样
        make.top.equalTo(label1.mas_bottom).offset(40);//设置label3顶部距label1底部距离
    }];
    
    [label4 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.equalTo(label3);//设置它的高低和label3一样的约束
        make.left.right.equalTo(label2);//设置它的左右和label2一样
    }];
    
    [backView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);//设置x轴中心对成位置为self.view的x周中心对称
        make.top.equalTo(@125);//顶部距离设置
        make.size.mas_equalTo(CGSizeMake(100, 100));//设置它的size
    }];;
    
    [btn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(backView);//设置它的x轴，y轴的中心对成位置为backView
        make.size.mas_equalTo(CGSizeMake(80, 80));//设置它的size
    }];

}