Basic Usage

This guide covers the core Masonry API for creating, updating, and managing Auto Layout constraints.

Creating Constraints

Use mas_makeConstraints: to create constraints on a view:

::: 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)
}

:::

Or more concisely using edges:

::: 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)
}

:::

Equality Relations

Masonry provides three relation methods:

MethodNSLayoutRelation
.equalToNSLayoutRelationEqual
.lessThanOrEqualToNSLayoutRelationLessThanOrEqual
.greaterThanOrEqualToNSLayoutRelationGreaterThanOrEqual

Argument Types

These methods accept several argument types:

1. MASViewAttribute

make.centerX.lessThanOrEqualTo(view2.mas_left);

Available view attributes:

MASViewAttributeNSLayoutAttribute
view.mas_leftNSLayoutAttributeLeft
view.mas_rightNSLayoutAttributeRight
view.mas_topNSLayoutAttributeTop
view.mas_bottomNSLayoutAttributeBottom
view.mas_leadingNSLayoutAttributeLeading
view.mas_trailingNSLayoutAttributeTrailing
view.mas_widthNSLayoutAttributeWidth
view.mas_heightNSLayoutAttributeHeight
view.mas_centerXNSLayoutAttributeCenterX
view.mas_centerYNSLayoutAttributeCenterY
view.mas_baselineNSLayoutAttributeBaseline

2. UIView / NSView

// These two constraints are exactly the same
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);

3. NSNumber

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

4. Autoboxing with Primitives

Use mas_ prefixed macros to pass primitives and structs directly:

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));

Tips

Define MAS_SHORTHAND_GLOBALS before importing Masonry to use unprefixed versions.

5. NSArray

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

Attribute Chaining

Chain multiple attributes together:

// Set left, right, and bottom to superview, top to another view
make.left.right.and.bottom.equalTo(superview);
make.top.equalTo(otherView);

Priority

Set constraint priority:

::: code-group

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
make.top.equalTo(label.mas_top).with.priority(600);

view.mas.makeConstraints { make in
    make.width <= 200 ~ .defaultHigh
    make.height == 44 ~ 600
}

:::

Updating Constraints

Update existing constraints (or create if not found):

::: code-group

[view1 mas_updateConstraints:^(MASConstraintMaker *make) {
    make.leading.equalTo(superview).offset(newPadding);
}];

view.mas.updateConstraints { make in
    make.leading.equalTo(superview).offset(newPadding)
}

:::

Remaking Constraints

Remove all existing constraints and create new ones:

::: code-group

[view1 mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).insets(newPadding);
}];

view.mas.remakeConstraints { make in
    make.edges.equalTo(superview).inset(newPadding)
}

:::

Holding Constraint References

Store a reference to a constraint for later modification:

@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);
}];

// Later, uninstall the constraint
[self.topConstraint uninstall];

Swift Operators

The MasonrySwift module supports operator-based constraint creation:

view.mas.makeConstraints { make in
    make.top == superview.mas.top + 20
    make.left >= superview.mas.left + 16
    make.width <= 200
    make.height == 44 ~ .defaultHigh  // with priority
}

Info

Operators are type-safe with separate overloads for ViewAttribute, UIView/NSView, CGFloat, Int, Double, CGSize, CGPoint, and UIEdgeInsets/NSEdgeInsets.

Debugging

The mas_equalTo(), mas_greaterThanOrEqualTo(), mas_lessThanOrEqualTo(), mas_equalToSuperview(), mas_greaterThanOrEqualToSuperview(), and mas_lessThanOrEqualToSuperview() macros automatically embed the call-site file name and line number into the constraint's mas_key:

// mas_key is automatically set to "<file>:<line>"
make.top.mas_equalTo(superview.mas_top).offset(20);
make.left.right.bottom.mas_equalToSuperview();

// You can still add an explicit key
make.top.equalTo(superview.mas_top).offset(20).key(@"topPin");

// Tag multiple views at once
MASAttachKeys(titleLabel, avatarView);