masonry oc版( snapkit swift版)

          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
    }];

}

 

 

posted @ 2015-11-20 12:44  墨VS雪  阅读(1010)  评论(0编辑  收藏  举报