Masonry是一个基于AutoLayout封装的轻量级的框架,它提供简洁易读的链式自动布局语法.并且支持macOS和iOS两个平台.

安装

使用CocoaPods安装.

在podfile中导入Masonry

pod 'Masonry'

如果你不想使用mas_前缀
把#define MAS_SHORTHAND 添加到你的prefix.pch文件中

#define MAS_SHORTHAND

在需要用到Masonry的文件前导入

#import "Masonry.h"

NSLayoutConstraints使用中出现的问题

NSLayoutConstraints是一个非常强大且灵活的组织布局的框架.但是它的布局代码过于冗长且不易读.举个例子,使用NSLayoutConstraints语法创建一个view,并且在该view和它的父view周边有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的约束
    [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],

 ]];

即使有这样一个简单的例子，所需的代码也是非常冗长的，并且当你有超过2或3个视图时，很快就变得不可读.另一个选择是使用Visual Format Language（VFL），代码会相对少一点。然而，ASCII类型的语法有其自己的陷阱.

使用Masonry

上述代码使用Masonry的MASConstraintMaker来创建会是这样的

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

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];

甚至更短

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

注意,在添加约束前要保证子视图已经添加到了父视图中了,也就是[superView addSubview:subView],并且父视图已经添加了约束.
Masonry会自动添加view1.translatesAutoresizingMaskIntoConstraints = NO;语句.

约束语法

.equalTo相当于NSLayoutRelationEqual
.lessThanOrEqualTo相当于NSLayoutRelationLessThanOrEqual
.greaterThanOrEqualTo相当于NSLayoutRelationGreaterThanOrEqual
这三个约束接受一个变量作为参数,这个变量可以是以下类型:

第一种:MASViewAttribute(MASview的属性)

make.centerX.lessThanOrEqualTo(view2.mas_left);

其中leading与left ,trailing与right 在正常情况下是等价的,但是当一些布局是从右至左时(比如阿拉伯文) 则会对调,换句话说就是基本可以不理不用,用left和right就好了.
第二种: UIView/NSView
如果你想view.left大于或等于label.left：

//这两个约束是等价的
make.left.greaterThanOrEqualTo（label);
make.left.greaterThanOrEqualTo（label.mas_left);

第三种:NSNumber
自动布局允许宽度和高度设置为常量值。如果你想设置视图具有最小和最大宽度，你可以传递一个NSNumber:

//width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(@200);
make.width.lessThanOrEqualTo(@400)

但是，不允许如left，right，centerY等对齐属性设置为常量值。所以，如果你通过一个NSNumber来设置这些属性，Masonry将把它们变成相对于视图的超视图的约束，即：

//创建 view.left = view.superview.left + 10 
make.left.lessThanOrEqualTo（@10）

您可以使用原语和结构来构建您的约束，而不是使用NSNumber，如下所示：

make.top.mas_equalTo(42);
make.height.mas_equalTo(20);
make.size.mas_equalTo(CGSizeMake(50, 100));
make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));
make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));

默认情况下，支持自动装箱的宏前缀为mas_.在prefix.pch定义了宏之后可以不使用前缀.

第四种:NSArray

make.height.equalTo(@[view1.mas_height, view2.mas_height]);
make.height.equalTo(@[view1, view2]);
make.left.equalTo(@[view1, @100, view3.right]);

优先级

.priority 允许你指定一个确切的优先级
.priorityHigh相当于UILayoutPriorityDefaultHigh,高优先级
.priorityMedium 中等优先级
.priorityLow相当于UILayoutPriorityDefaultLow,低优先级

优先级可以像下面这样绑定到约束链的末尾：

make.left.greaterThanOrEqualTo（label.mas_left）.with.priorityLow（）;

make.top.equalTo（label.mas_top）.with.priority（600）;

创建多个约束

Masonry也提供了同时创建多个约束的便利方法,这些被称为MASCompositeConstraints.

edges

// 上下左右和view2相等
make.edges.equalTo(view2);

// 让 top = superview.top + 5, left = superview.left + 10,
//      bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size

// 让宽和高大于或等于titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

// 让 width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

center

// 与button1的中心点对齐
make.center.equalTo(button1)

// 让 centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

可以使用链式语法提供可读性:

make.left.right.and.bottom.equalTo(superview);
make.top.equalTo(otherView);

布局动态更新

如果需要修改现有约束,用删除/替换约束,可以这样操作:

1.使用属性

您可以通过将约束make表达式的结果分配给局部变量或类属性来保留特定约束的引用。您也可以通过将它们存储在一个数组中来引用多个约束。

// 在interface中定义
@property (nonatomic, strong) MASConstraint *topConstraint;

...

// 添加约束时
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
}];

...
// 移除约束时
[self.topConstraint uninstall];

2.使用mas_updateConstraints

如果你只是更新约束的常量值,可以使用mas_updataConstraints代替mas_makeConstraints:

/*
* updateConstraints是苹果官方推荐的更新布局的方法
* 当响应setNeedsUpdateConstraints时,这个方法可以调用多次
* 当触发更新的时候,该方法可以在UIKit内部被调用
*/
- (void)updateConstraints {
    [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
        make.width.equalTo(@(self.buttonSize.width)).priorityLow();
        make.height.equalTo(@(self.buttonSize.height)).priorityLow();
        make.width.lessThanOrEqualTo(self);
        make.height.lessThanOrEqualTo(self);
    }];

    //最后需要调用一下super方法
    [super updateConstraints];
}

3.使用mas_remakeConstraints

mas_updateConstraints是用来更新就布局的常量的,但如果要加入新的布局约束,则无能为力.
mas_remakeConstraints不是更新常量值，而是在再次安装它们之前删除所有的约束条件.这可以让你提供不同的约束:

- (void)changeButtonPosition {
    [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.buttonSize);

        if (topLeft) {
            make.top.and.left.offset(10);
        } else {
            make.bottom.and.right.offset(-10);
        }
    }];
}

在文件中创建约束的建议位置

@implementation DIYCustomView

- (id)init {
    self = [super init];
    if (!self) return nil;

    // --- 在这里创建view---
    self.button = [[UIButton alloc] init];

    return self;
}

// 通知UIKit你在使用AutoLayout
+ (BOOL)requiresConstraintBasedLayout {
    return YES;
}

// 这是苹果推荐的添加或更新视图的方法
- (void)updateConstraints {

    // --- 在这里重置或更新你的视图
    [self.button remakeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@(self.buttonSize.width));
        make.height.equalTo(@(self.buttonSize.height));
    }];
    
    // 调用super方法
    [super updateConstraints];
}

- (void)didTapButton:(UIButton *)button {
    // --- 更改布局参数 ---
    self.buttonSize = CGSize(200, 200);

    // 通知系统需要变化布局
    [self setNeedsUpdateConstraints];
}

@end