Masonry的基本使用方法

来源:互联网 发布:b超数据看胎儿性别 编辑:程序博客网 时间:2024/05/16 17:10

项目中需要使用到masonry进行适配,简单记录一下学习中的问题。
使用masonry首先需要导入masonry,masonry github地址如下:

masonry下载地址:

Swift 版:https://github.com/SnapKit/SnapKit
OC 版 : https://github.com/SnapKit/Masonry

首先需要了解一些参数和方法:

 //    mas_equalTo  会对参数进行包 //    equalTo  不会对参数进行包装 //    mas_equalTo功能更强大** 注意:**若想使equalTo和 equalTo有等同的效果,可以导入这两个宏//加上这个宏,mas_equalto,equalto相同#define MAS_SHORTHAND//该宏会自动包装#define MAS_SHORTHAND_GLOBALS
    //这个方法只会添加新的约束    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {    }];    //这个将会将以前的约束删掉,添加新的    [blueView mas_remakeConstraints:^(MASConstraintMaker *make) {    }];    //这个方法将会覆盖以前的某些特定的约束    [blueView mas_updateConstraints:^(MASConstraintMaker *make) {    }];

效果图1:

这里写图片描述

做出这样的效果图可以使用这些方法进行实现,相同的效果不同表现形式。可以有很多表现形式,只列出以下几种。

//   ################ Method1############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.width.equalTo(@100);        make.height.equalTo(@100);        make.right.equalTo(self.view.mas_right).offset(-20);        make.bottom .equalTo(self.view.mas_bottom).offset(-20);    }];    //   ################ Method2############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.width.mas_equalTo(100);  // mas_equalTo 自动包装        make.height.mas_equalTo(100);        make.right.equalTo(self.view).offset(-20);        make.bottom .equalTo(self.view).offset(-20);    }];    //   ################ Method3############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.width.height.mas_equalTo(100);  // mas_equalTo        make.right.equalTo(self.view).offset(-20);        make.bottom .equalTo(self.view).offset(-20);    }];    //   ################ Method4############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.size.mas_equalTo(CGSizeMake(100, 100));         make.right.equalTo(self.view).offset(-20);        make.bottom .equalTo(self.view).offset(-20);    }];    //   ################ Method5############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.size.mas_equalTo(CGSizeMake(100, 100));         make.right.offset(-20); //默认是父控件        make.bottom.offset(-20);    }];    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.size.mas_equalTo(self.view).multipliedBy(0.5).offset(-50);//按比例计算        make.right.offset(-20); //默认是父控件        make.bottom.offset(-20);    }];

效果图2:

这里写图片描述

实现方法例子:

UIView *blueView = [[UIView alloc]init];    blueView.backgroundColor = [UIColor blueColor];    [self.view addSubview:blueView];    //居中,尺寸是父控件一半    //   ################ Method1############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.mas_equalTo(self.view.mas_left).offset(50);        make.right.mas_equalTo(self.view.mas_right).offset(-50);        make.top.mas_equalTo(self.view.mas_top).offset(50);        make.bottom.mas_equalTo(self.view.mas_bottom).offset(-50);    }];    //   ################ Method2############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.mas_equalTo(self.view).offset(50);        make.right.mas_equalTo(self.view).offset(-50);        make.top.mas_equalTo(self.view).offset(50);        make.bottom.mas_equalTo(self.view).offset(-50);    }];    //   ################ Method3############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.offset(50);        make.right.offset(-50);        make.top.offset(50);        make.bottom.offset(-50);    }];    // ################ Method4############################        [blueView mas_makeConstraints:^(MASConstraintMaker *make) {            make.left.and.top.offset(50);            make.right.and.bottom.offset(-50);        }];    //   ################ Method5############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.top.offset(50);        make.right.bottom.offset(-50);    }];    //设置边距    //   ################ Method6############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));    }];

效果图3:

这里写图片描述

实现方法例子:

    //蓝色    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];    CGFloat margin = 20;    CGFloat height = 40;    //   ################ Method1############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.equalTo(self.view.left).offset(margin);        make.right.equalTo(redView.left).offset(-margin);        make.bottom.equalTo(self.view.bottom).offset(-margin);        make.height.equalTo(height);        make.width.equalTo(blueView.width);    }];    [redView mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.equalTo(blueView.right).offset(margin);        make.right.equalTo(self.view.right).offset(-margin);        make.bottom.equalTo(self.view.bottom).offset(-margin);        make.height.equalTo(height);        make.width.equalTo(blueView.width);    }];    //   ################ Method2############################    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.equalTo(self.view.left).offset(margin);        make.right.equalTo(redView.left).offset(-margin);        make.bottom.equalTo(self.view.bottom).offset(-margin);        make.height.equalTo(height);        make.top.equalTo(redView.top);        make.bottom.equalTo(redView.bottom);        make.width .equalTo(redView.width);    }];    [redView mas_makeConstraints:^(MASConstraintMaker *make) {        make.right.equalTo(self.view.right).offset(-margin);    }];
1 0