Masonry学习笔记

作者: mah93 | 来源:发表于2019-10-09 16:30 被阅读0次

Masonry是一个轻量级的布局框架拥有自己的描述语法采用更优雅的链式语法封装自动布局简洁明了并具有高可读性而且同时支持 iOS 和 Max OS X。

Masonry是一个对系统NSLayoutConstraint进行封装的第三方自动布局框架，采用链式编程的方式提供给开发者API。系统AutoLayout支持的操作，Masonry都支持，相比系统API功能来说，Masonry是有过之而无不及。也就是说Masonry就是NSLayoutConstraint，只不过是提供了更加简单的书写方法。如果你对NSLayoutConstraint有所了解，那么Masonry可以说是简单易懂

Masonry属性与NSLayoutAttrubute的对照表如下

Masonry	NSLayoutAttrubute	说明
left	NSLayoutAttrubuteLeft	左侧
top	NSLayoutAttrubuteTop	上侧
right	NSLayoutAttrubuteRight	右侧
bottom	NSLayoutAttrubuteBottom	下侧
leading	NSLayoutAttrubuteLeading	首部
trailing	NSLayoutAttrubuteTrailing	尾部
width	NSLayoutAttrubuteWidth	宽度
height	NSLayoutAttrubuteHeight	高度
centerX	NSLayoutAttrubuteCenterX	水平中心
centerY	NSLayoutAttrubuteCenterY	竖直中心
baseline	NSLayoutAttrubuteBaseline	文本基线

NSLayoutAttrubute

下面是用NSLayoutAttrubute，约束一个子视图，使之每个边与其父视图间距为10

UIView *superview = self.view;

UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[superview addConstraints:@[

    //view1 constraints
    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:padding.top],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeLeft
                                multiplier:1.0
                                  constant:padding.left],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-padding.bottom],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeRight
                                multiplier:1
                                  constant:-padding.right],

 ]];

而使用了Masonry实现相同的约束，仅仅需要几行代码

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];

安装方式

Masonry支持CocoaPods，可以直接通过podfile文件进行集成，要在CocoaPods中添加下面代码：

pod 'Masonry'
pod install

之后直接在项目中引用即可，详情请参考github

使用方式

首先是约束的相关api

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
/*
mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错 
mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
*/

在使用Masonry的约束之前，首先要将view添加到superview上

之后调用mas_makeConstraints添加相应的约束

居中

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(subView.mas_centerX); // 水平
    make.centerY.equalTo(subView.mas_centerY); // 竖直
    make.size.mas_equalTo(CGSizeMake(100, 100));
}];

水平居中	center_v.png
竖直居中	center_h.png
居中	center.png

边距

// 添加一个与父视图上下左右都相距20的view
[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.insets(UIEdgeInsetsMake(20, 20, 20, 20));

    /*  
        make.top.equalTo(subView).with.offset(20);
        make.left.equalTo(subView).with.offset(20);
        make.bottom.equalTo(subView).with.offset(-20);
        make.right.equalTo(subView).with.offset(-20);
    */
}];

insets.png

并列

// 两个子视图水平排列，之间的间距为20
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(subView.mas_centerY);
    make.left.equalTo(subView.mas_left).with.offset(20);
    make.right.equalTo(view2.mas_left).with.offset(-20);
    make.height.mas_equalTo(@150);
    make.width.equalTo(view2);
}];

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(subView.mas_centerY);
    make.left.equalTo(view1.mas_right).with.offset(20);
    make.right.equalTo(subView.mas_right).with.offset(-20);
    make.height.mas_equalTo(@150);
    make.width.equalTo(view1);
}];

apposition.png

// 两个子视图竖直并列，之间间距为20
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(subView.mas_centerX);
    make.top.equalTo(subView.mas_top).with.offset(20);
    make.bottom.equalTo(view2.mas_top).with.offset(-20);
    make.width.mas_equalTo(@150);
    make.height.equalTo(view2);
}];
    
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(subView.mas_centerX);
    make.top.equalTo(view1.mas_bottom).with.offset(20);
    make.bottom.equalTo(subView.mas_bottom).with.offset(-20);
    make.width.mas_equalTo(@150);
    make.height.equalTo(view1);
}];

apposition_v.png

//  上层左右并列，并与下层对其
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(subView.mas_centerX);
        make.top.equalTo(subView.mas_top).with.offset(20);
        make.bottom.equalTo(view2.mas_top).with.offset(-20);
        make.left.equalTo(subView.mas_left).with.offset(20);
        make.right.equalTo(view3.mas_left).with.offset(-20);
        make.width.equalTo(view3.mas_width);
        make.height.equalTo(view2);
    }];
    
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(subView.mas_centerX);
        make.top.equalTo(subView.mas_top).with.offset(20);
        make.bottom.equalTo(view2.mas_top).with.offset(-20);
        make.left.equalTo(view1.mas_right).with.offset(20);
        make.right.equalTo(subView.mas_right).with.offset(-20);
        make.width.mas_equalTo(view1.mas_width);
        make.height.equalTo(view2);
    }];
    
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(subView.mas_centerX);
        make.top.equalTo(view1.mas_bottom).with.offset(20);
        make.bottom.equalTo(subView.mas_bottom).with.offset(-20);
        make.left.equalTo(subView.mas_right).with.offset(20);
        make.right.equalTo(subView.mas_right).with.offset(-20);
        make.height.equalTo(view1);
    }];

apposition_2.png

//  右侧上下并列，并与左侧对其
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(subView.mas_centerY);
        make.left.equalTo(subView.mas_left).with.offset(20);
        make.right.equalTo(view2.mas_left).with.offset(-20);
        make.top.equalTo(subView.mas_top).with.offset(20);
        make.bottom.equalTo(subView.mas_bottom).with.offset(-20);
        make.width.equalTo(view2);
    }];
    
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(view1.mas_right).with.offset(20);
        make.right.equalTo(subView.mas_right).with.offset(-20);
        make.top.equalTo(subView.mas_top).with.offset(20);
        make.bottom.equalTo(view3.mas_top).with.offset(-20);
        make.width.equalTo(view1);
        make.height.equalTo(view3);
    }];
    
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(view1.mas_right).with.offset(20);
        make.right.equalTo(subView.mas_right).with.offset(-20);
        make.top.equalTo(view2.mas_bottom).with.offset(20);
        make.bottom.equalTo(subView.mas_bottom).with.offset(-20);
        make.width.equalTo(view1);
        make.height.equalTo(view2);
    }];

apposition_3.png

小结

以上仅仅是最最基础的布局，在实际的生产过程中要复杂许多。但是Masonry的确简化了NSLayoutConstraint的写法，使之更加语义化。虽然写法更加的复杂，对于团队开发也是一种规范。写下本笔记主要是为了记载自己学习Masonry的过程，暂时不能投入生产中，也无法更加熟练深刻的运用，仅记之以供后日查阅。

网友评论

本文标题：Masonry学习笔记

本文链接：https://www.haomeiwen.com/subject/mkygpctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！