Common Layout Patterns

This page demonstrates common layout patterns using Masonry.

Edge Pinning

Pin a view to all edges of its superview:

::: code-group

[childView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview);
}];

childView.mas.makeConstraints { make in
    make.edges.equalTo(superview)
}

:::

With Padding

::: code-group

UIEdgeInsets padding = UIEdgeInsetsMake(16, 16, 16, 16);
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

let padding = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
childView.mas.makeConstraints { make in
    make.edges.equalTo(superview).insets(padding)
}

:::

Centering

Center a view within its superview:

::: code-group

[childView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(superview);
    make.size.mas_equalTo(CGSizeMake(200, 100));
}];

childView.mas.makeConstraints { make in
    make.center.equalTo(superview)
    make.size.equalTo(CGSize(width: 200, height: 100))
}

:::

Fixed Size

Set a fixed width and height:

::: code-group

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.width.equalTo(@200);
    make.height.equalTo(@100);
}];

view.mas.makeConstraints { make in
    make.width.equalTo(200)
    make.height.equalTo(100)
}

// Or using operators:
view.mas.makeConstraints { make in
    make.width == 200
    make.height == 100
}

:::

Aspect Ratio

Maintain an aspect ratio:

::: code-group

[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.width.equalTo(superview);
    make.height.equalTo(imageView.mas_width).multipliedBy(9.0 / 16.0);
}];

imageView.mas.makeConstraints { make in
    make.width.equalTo(superview)
    make.height.equalTo(imageView.mas.width).multipliedBy(9.0 / 16.0)
}

:::

Stacking Views Vertically

Stack multiple views vertically with spacing:

::: code-group

[titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview).offset(20);
    make.left.right.equalTo(superview).inset(16);
}];

[subtitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(titleLabel.mas_bottom).offset(8);
    make.left.right.equalTo(titleLabel);
}];

[bodyLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(subtitleLabel.mas_bottom).offset(16);
    make.left.right.equalTo(titleLabel);
}];

titleLabel.mas.makeConstraints { make in
    make.top.equalTo(superview).offset(20)
    make.left.right.equalTo(superview).inset(16)
}

subtitleLabel.mas.makeConstraints { make in
    make.top.equalTo(titleLabel.mas.bottom).offset(8)
    make.left.right.equalTo(titleLabel)
}

bodyLabel.mas.makeConstraints { make in
    make.top.equalTo(subtitleLabel.mas.bottom).offset(16)
    make.left.right.equalTo(titleLabel)
}

:::

Equal Width Distribution

Distribute views with equal widths:

::: code-group

[@[view1, view2, view3] mas_distributeViewsAlongAxis:MASAxisTypeHorizontal
                                    withFixedSpacing:10
                                         leadSpacing:0
                                         tailSpacing:0];

[@[view1, view2, view3] mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@44);
    make.top.equalTo(superview);
}];

[view1, view2, view3].mas_distributeViews(
    along: .horizontal,
    withFixedSpacing: 10,
    leadSpacing: 0,
    tailSpacing: 0
)

[view1, view2, view3].mas_makeConstraints { make in
    make.height == 44
    make.top.equalTo(superview)
}

:::

Safe Area Layout

Pin to safe area (iOS 11+):

::: code-group

[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop);
    make.bottom.equalTo(self.view.mas_safeAreaLayoutGuideBottom);
    make.leading.equalTo(self.view.mas_safeAreaLayoutGuideLeading);
    make.trailing.equalTo(self.view.mas_safeAreaLayoutGuideTrailing);
}];

contentView.mas.makeConstraints { make in
    make.top.equalTo(view.mas.safeAreaLayoutGuideTop)
    make.bottom.equalTo(view.mas.safeAreaLayoutGuideBottom)
    make.leading.equalTo(view.mas.safeAreaLayoutGuideLeading)
    make.trailing.equalTo(view.mas.safeAreaLayoutGuideTrailing)
}

:::