Masonry整理-白红宇

Masonry整理

阅读量：7034 次

发布时间：2019-06-28

本文共 11412 字，大约阅读时间需要 38 分钟。

Masonry整理

Masonry是以AutoLayout为基础的轻量级布局框架更加简化了整个约束系统

本文参考：

*Masonry有哪些属性

@property (nonatomic, strong, readonly) MASConstraint left;
@property (nonatomic, strong, readonly) MASConstraint top;
@property (nonatomic, strong, readonly) MASConstraint right;
@property (nonatomic, strong, readonly) MASConstraint bottom;
@property (nonatomic, strong, readonly) MASConstraint leading;
@property (nonatomic, strong, readonly) MASConstraint trailing;
@property (nonatomic, strong, readonly) MASConstraint width;
@property (nonatomic, strong, readonly) MASConstraint height;
@property (nonatomic, strong, readonly) MASConstraint centerX;
@property (nonatomic, strong, readonly) MASConstraint centerY;
@property (nonatomic, strong, readonly) MASConstraint *baseline;

Masonry

(NSArray )mas_makeConstraints:(void(^)(MASConstraintMaker ))block;

(NSArray )mas_updateConstraints:(void(^)(MASConstraintMaker ))block;

(NSArray )mas_remakeConstraints:(void(^)(MASConstraintMaker make))block;

 /**     *  mas_makeConstraints  只负责添加约束 AutoLayout不能同时存在两条针对同一对象的约束否则会报错     *  mas_updateConstraints  针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况     *  mas_remakeConstraints  清除之前所有的约束只保留新的约束     *     *  三种函数要配合使用     */

重点：

使用mas_makeConstrains方法的元素必须事先添加到父视图中

mas_equalTo和equalTo区别：前者比后者多了类型转换操作，支持CGSize CGPoint NSNumber UIEdgeinsets。mas_equalTo是equalTo的封装，equalTo适用于基本数据类型，而mas_equaalTo适用于类似UIEdgeInsetsMake 等复杂类型，基本上它可以替换equalTo。

上左为正下右为负 是因为坐标而来的视图坐标左上为原点 X向右为正 Y向下为正

举例比较：
Make.left.equalTo(@64) 可以这么写才可以字面量
make.left.mas_equalTo(64); 而mas_equalTo可以不用字面量

先试一下：一个View居中

 // 防止block循环引用    __weak typeof (self)weakSelf = self;    UIView *yellow = [UIView new];    yellow.backgroundColor = [UIColor yellowColor];// 切记添加到父视图中    [self.view addSubview:yellow];    [yellow showPlaceHolder];    /**     *  设置约束     *  使用mas_MakeConstraints:添加约束     */    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {        // 1.make就是添加约束的控件        // make.left.equalTo 的意思是左侧和谁相同 .offset则是偏移量 上左[为正]下右[为负]         make.top.equalTo(self.view.mas_top).offset(30);// 和父视图顶部间距30        make.left.equalTo(self.view.mas_left).offset(30);// 和父视图左边间距30        make.bottom.equalTo(self.view.mas_bottom).offset(-30);// 和父视图底部间距30        make.right.equalTo(self.view.mas_right).offset(-30);// 和父视图右边间距30        // 2. 2等价于1 edges边缘的意思         make.edges.equalTo(self.view).width.insets(UIEdgeInsetsMake(30, 30, 30, 30));        // 3. 还等价于        make.top.left.bottom.and.right.equalTo(self.view).width.insets(UIEdgeInsetsMake(30, 30, 30, 30));      // 4.此处给yellow一个size 且让其居中make.size.mas_equalTo(CGSizeMake(300, 300));make.center.equalTo(self.view);    }];

size还可以这么写两者也相同

make.size.mas_equalTo(self.view).offset(-20);make.size.equalTo(self.view).offset(-20);

居中：

 make.centerX.equalTo(self.view.mas_centerX); make.centerY.equalTo(self.view.mas_centerY);

等同于：

make.center.mas_equalTo(self.view);

两个view

例1

1240

如图

1240

如图

  [green mas_makeConstraints:^(MASConstraintMaker *make) {        make.size.mas_equalTo(CGSizeMake(200, 120));// green大小        make.top.mas_equalTo(green.superview).offset(100);// green顶部到它父视图的偏移量        make.bottom.mas_equalTo(yellow.mas_top).offset(-50);// 50如果为正就是green底部到yellow顶部距离为50 为负就是green下边到yellow上边为50        make.centerX.equalTo(green.superview.mas_centerX);// 中心点的X坐标和父视图中心点的X相同 说人话就是在中间    }];    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {        make.size.mas_equalTo(CGSizeMake(250, 30)); // 给个size        make.centerX.equalTo(green.mas_centerX);// centerX和green一样    }];

make.size.equalTo(green);两个view就相同大小

等同于

make.width.equalTo(green.mas_width);make.height.equalTo(green.mas_height);

例2：

1240

两个view

    [green mas_makeConstraints:^(MASConstraintMaker *make) {        // 添加大小约束        make.size.mas_equalTo(CGSizeMake(100, 100));        // 添加左上边距约束        make.left.and.top.mas_equalTo(20);    }];    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {        // 大小和上边距约束与green相同        make.size.and.top.equalTo(green);        // 添加右边距约束 上左为正下右为负        make.right.mas_equalTo(-20);    }];

这里的and和with都没有具体操作只是拿来增加程序可读性

例3：

1240

例3

[green mas_makeConstraints:^(MASConstraintMaker *make) {      // 左上约束20 右侧约束-20      make.left.and.top.mas_equalTo(20);      // 右边约束为-20      make.right.mas_equalTo(-20);  }];  [yellow mas_makeConstraints:^(MASConstraintMaker *make) {      // 下右约束-20      make.bottom.and.right.mas_equalTo(-20);      // 高度和green相同      make.height.equalTo(green);      // 顶部到green底部距离为20      make.top.equalTo(green.mas_bottom).offset(20);      // 左侧到视图中心的距离为20      make.left.equalTo(weakSelf.view.mas_centerX).offset(20);  }];

make.right.equalTo(weakSelf.view).offset(-20);

等同于

make.right.mas_equalTo(-20);

例4:

1240

屏幕快照 2015-12-07 上午9.42.41.png

    UIView *gray = [UIView new];    gray.backgroundColor = [UIColor grayColor];    [self.view addSubview:gray];    [gray showPlaceHolder];    [gray mas_makeConstraints:^(MASConstraintMaker *make) {        // 左上下距离父视图都为0        make.left.and.top.and.bottom.mas_equalTo(0);        // 宽度为200        make.width.mas_equalTo(200);    }];    UIView *w = [UIView new];    w.backgroundColor = [UIColor colorWithWhite:0.228 alpha:1.000];    [w showPlaceHolder];    [self.view addSubview:w];    UIView *light = [UIView new];    light.backgroundColor = [UIColor lightGrayColor];    [light showPlaceHolder];    [self.view  addSubview:light];    [w mas_makeConstraints:^(MASConstraintMaker *make) {        // w底部距离父视图centerY的距离为10        make.bottom.equalTo(weakSelf.view.mas_centerY).mas_equalTo(-10);        // 左侧距离gray距离为20        make.left.equalTo(gray).offset(20);        // 右侧距离gray距离20        make.right.equalTo(gray).offset(-20);        make.height.mas_equalTo(100);    }];    [light mas_makeConstraints:^(MASConstraintMaker *make) {        // 顶部距离父视图centerY为10        make.top.equalTo(weakSelf.view.mas_centerY).mas_equalTo(10);        // 左右和高度与w相同        make.left.and.right.and.height.equalTo(w);    }];

上下左右边距

make.top.left.bottom.right.equalTo(weakSelf.view).width.insets(UIEdgeInsetsMake(20, 20, 100, 20));

等价

make.edges.equalTo(weakSelf.view).width.insets(UIEdgeInsetsMake(20, 20, 100, 20));

例5：
屏幕快照 2015-12-07 下午3.04.56.png

     [green mas_makeConstraints:^(MASConstraintMaker *make) {        make.centerY.mas_equalTo(weakSelf.view.mas_centerY);        make.left.equalTo(weakSelf.view.mas_left).offset(10);        make.right.equalTo(yellow.mas_left).offset(-10);        make.height.mas_equalTo(150);        make.width.equalTo(yellow);    }];    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {        make.centerY.mas_equalTo(weakSelf.view.mas_centerY);        make.left.equalTo(green.mas_right).offset(10);        make.right.equalTo(weakSelf.view.mas_right).offset(-10);        make.height.mas_equalTo(@150);        make.width.equalTo(green);    }];

例6：

1240

竖屏

1240

横屏

    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {        //make.edges.equalTo(self.view).width.insets(UIEdgeInsetsMake(30, 10, 300, 10));        make.top.left.equalTo(@20);        make.right.mas_equalTo(-10);    }];    [w mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.mas_equalTo(20);        make.bottom.mas_equalTo(weakSelf.view).offset(-20);        make.height.mas_equalTo(yellow);        make.top.mas_equalTo(yellow.mas_bottom).offset(20);        make.width.mas_equalTo(green);        make.right.mas_equalTo(green.mas_left).offset(-20);    }];    [green mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.mas_equalTo(yellow.mas_bottom).offset(20);        make.left.equalTo(w.mas_right).offset(20);        make.right.equalTo(yellow.mas_right);        make.height.mas_equalTo(or.mas_height);    }];    [or mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.mas_equalTo(yellow.mas_top).offset(20);        make.left.mas_equalTo(yellow.mas_left).offset(30);        make.width.mas_equalTo(bl.mas_width);    }];    [cy mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.mas_equalTo(or.mas_bottom).offset(30);        make.left.mas_equalTo(or.mas_left);        make.height.mas_equalTo(or.mas_height);        make.width.mas_equalTo(or.mas_width);        make.bottom.mas_equalTo(yellow).offset(-20);    }];    [bl mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.mas_equalTo(or.mas_top);        make.left.mas_equalTo(or.mas_right).offset(20);        make.bottom.mas_equalTo(cy.mas_bottom);        make.right.mas_equalTo(weakSelf.view.mas_right).offset(-20);    }];

ScrollView

1240

屏幕快照 2015-12-07 下午7.33.20.png

UIScrollView *scr = [UIScrollView new];    scr.backgroundColor = [UIColor whiteColor];    [self.view addSubview:scr];    [scr mas_makeConstraints:^(MASConstraintMaker *make) {        make.edges.equalTo(self.view).width.insets(UIEdgeInsetsMake(10, 10, 10, 10));    }];    UIView *container = [UIView new];    [scr addSubview:container];    [container mas_makeConstraints:^(MASConstraintMaker *make) {        make.edges.equalTo(scr);        make.width.equalTo(scr);    }];    int count = 20;    UIView *lastView = nil;    for (int i = 0; i <= count; i++) {        UIView *subView = [UIView new];        [container addSubview:subView];        subView.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )saturation:( arc4random() % 128 / 256.0 ) + 0.5 brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:1];        [subView mas_makeConstraints:^(MASConstraintMaker *make) {            make.left.and.right.equalTo(container);            make.height.mas_equalTo(@(20 * i));            if (lastView) {               // lastView存在时 以其底部为下一个view的顶部                make.top.mas_equalTo(lastView.mas_bottom);            } else {                // lastView不存在时 以父视图的顶部为基准                make.top.mas_equalTo(container.mas_top);            }        }];        lastView = subView;    }    [container mas_makeConstraints:^(MASConstraintMaker *make) {        make.bottom.equalTo(lastView.mas_bottom);    }];

键盘监听

如图：

1240

屏幕快照 2015-12-07 下午8.55.10.png

1240

屏幕快照 2015-12-07 下午8.55.22.png

mas_updateConstraints 利用它来更新约束

初始时约束：

  [_textField mas_makeConstraints:^(MASConstraintMaker *make) {        make.size.mas_equalTo(CGSizeMake(200, 30));        make.bottom.mas_equalTo(-40);        make.centerX.equalTo(weakSelf.view.mas_centerX);    }];

键盘弹出在消息方法里更新约束：

-(void)keyBoardWillShow:(NSNotification*)noti {    // 获取键盘基本信息（动画时长与键盘高度）    NSDictionary *userInfo = [noti userInfo];    CGRect rect =    [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];    CGFloat keyboardHeight = CGRectGetHeight(rect);    CGFloat keyboardDuration =    [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];    // 修改下边距约束    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {        make.bottom.mas_equalTo(-keyboardHeight);    }];    // 更新约束    [UIView animateWithDuration:keyboardDuration animations:^{        [self.view layoutIfNeeded];    }];}

键盘收起时在textField代理方法中再次更新约束

-(void)keyboardWillDisappear:(NSNotification *)noti {    // 获取键盘基本信息（动画时长与键盘高度）    NSDictionary *userInfo = [noti userInfo];    CGRect rect =    [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];//    CGFloat keyboardHeight = CGRectGetHeight(rect);    CGFloat keyboardDuration =[userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {        make.bottom.mas_equalTo(-40);    }];    [UIView animateWithDuration:keyboardDuration animations:^{        [self.view layoutIfNeeded];    }];}

转载于:https://blog.51cto.com/9951038/1862750

你可能感兴趣的文章

HTTP Status 404(The requested resource is not available)

查看>>

iOS开发如何快速成长?

查看>>

Selenium学习（13） unittest断言方法