zoukankan      html  css  js  c++  java
  • 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
        }];
    
    }

     

  • 相关阅读:
    Kudu vs HBase
    数据分析怎么更直观?十分钟构建数据看板
    The Beam Model:Stream & Tables翻译(上)
    3分钟掌握一个有数小技能:收入贡献分析
    猛犸机器学习开发实践
    SparkSQL大数据实战:揭开Join的神秘面纱
    细说Mammut大数据系统测试环境Docker迁移之路
    python中的闭包与装饰器
    import详解
    python中的with与上下文管理器
  • 原文地址:https://www.cnblogs.com/moxuexiaotong/p/4951287.html
Copyright © 2011-2022 走看看