Getting Started

Masonry is a lightweight layout framework that wraps AutoLayout with a nicer syntax. It provides a chainable DSL for describing NSLayoutConstraints, resulting in layout code that is more concise and readable.

Why Masonry?

Creating constraints with raw NSLayoutConstraint API is verbose and hard to read:

[superview addConstraints:@[
    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:padding.top],
    // ... three more constraints just for edges
]];

With Masonry, the same layout is expressed in a single line:

::: code-group

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

view.mas.makeConstraints { make in
    make.edges.equalTo(superview).inset(padding)
}

:::

Masonry also handles translatesAutoresizingMaskIntoConstraints and constraint installation automatically.

Quick Example

Here's a complete example that pins a view to its superview with padding:

::: code-group

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

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top);
    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);
}];

let padding = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

view.mas.makeConstraints { make in
    make.top.equalTo(superview.mas.top).offset(padding.top)
    make.left.equalTo(superview.mas.left).offset(padding.left)
    make.bottom.equalTo(superview.mas.bottom).offset(-padding.bottom)
    make.right.equalTo(superview.mas.right).offset(-padding.right)
}

:::

Next Steps