Autolayout vs Autoresizing Masks in Swift

User Interface layout programming is a big part of modern iOS and macOS apps written in Swift. This post presents a brief overview of two layout methods, Autolayout and Autoresizing Masks, and contains examples of how each method can be used in Swift:

1. Autolayout
   a. What is Autolayout?
   b. Autolayout Example
   c. Autolayout Safe Areas Example
2. Autoresizing Mask
   a. What is a Autoresizing Mask
   b. Autoresizing Mask Example
3. Autolayout vs AutoResizingMask
   a. When To Use Autolayout
   b. When To Use Autoresizing Masks
4. Using Autolayout And Autoresizing Masks At The Same Time

Autolayout

What is Autolayout?

Autolayout is a user interface layout framework that uses constraints, a rule for where a UI element should be, to determine the layout of a UI. The autolayout engine will recompute the appropriate layout when the superview changes size, for example:

1. The user resizes a window on macOS
2. An iOS device rotates
3. The user enters or leaves split view on an iPad (running iOS)

Autolayout Example

One common use case for Autolayout is supporting rotation so a UI adapts appropriately to landscape and portrait device orientations.

To use Autolayout on a view, that view needs a complete set of constraints. This means the view’s x, y, width, and height properties must have constraints defining how each of those frame properties should be computed.

Here, to make a UILabel and UITextField responsive, the following constraints will be added:

1. Top Space to Superview (40)
2. Leading Space to Superview (20)
3. Trailing Space to Superview (20)
4. Bottom Space to Superview (8)
5. Height (25)

Adding the constraints in a Storyboard to the UILabel shows the blue constraints attributes when the UILabel is selected. The same type of constraints were added to the UITextField underneath.

The UILabel and UITextfield are now properly constrained using Autolayout. When the UI orientation is changed to landscape, Autolayout will expand both views horizontally.

Autolayout Safe Areas Example

A superpower of Autolayout is handling safe areas. Safe areas are margins maintained by the iOS system to help user interfaces account for system attributes. For example, safe areas can be used to handle rounded corners and non-rounded corners on iOS screens.

The secret to handling safe areas is a view constrained by autolayout does not need to be constrained only to its superview. In the following example, the Inbox UILabel will be constrained to the top safe area of the UIViewController view even though the superview of Inbox UILabel is the view with a blue background.

The first step is to constrain a view with a blue background to the leading, top, and trailing edges of the superview (here a UIViewController view).

Importantly, do not constraint the bottom or the height of in this step.

Next, add two UILabel labels with some text. Add constraints for the leading and trailing edges of the Inbox UILabel to the superview (view with a blue background). Also add a height constraint to the Inbox UILabel view.

Importantly, do not constrain the top edge of the Inbox UILabel at this step.

For the subtitle UILabel, add constraints for all edges to the superview.

So far, the views added are not yet fully constrained. This next step completes the Autolayout configuration and provides desired behavior.

Constrain the Inbox UILabel to the Top Safe Area of the UIViewController view.

The result shows the powerful capabilities of Autolayout. Now across different devices with and without rounded corners, the defined UI will display correctly:

Autoresizing Mask

What is a Autoresizing Mask

Autoresizing masks is a layout method using a bit mask, or an encoded set of flags, that defines how a view should respond to changes in the superview’s bounds.

The properties available in a autoresizing mask on a view are:

1. Flexible Top Margin, meaning resizing can change the view’s top margin
2. Flexible Left Margin, meaning resizing can change the view’s left margin
3. Flexible Right Margin, meaning resizing can change the view’s right margin
4. Flexible Bottom Margin, meaning resizing can change the view’s bottom margin
5. Flexible Width, meaning resizing can change the view’s width
6. Flexible Height, meaning resizing can change the view’s height

Autoresizing Mask Example

This autoresizing mask example will define the layout of all subviews in a chat message cell using autoresizing masks. First, add all the views (4 UILabel labels) in the view without any constraints.

Then, in the Size Inspector, configure each view with the appropriate resizing mark. Each red and faded red arrow or strut in the Autoresizing section of the inspector is clickable. Clicking on a red or faded red component will enable or disable the autoresizing mask property.

The Advanced Swift UILabel has a flexible width (shown by the red horizontal arrow) and a fixed leading, top, and trailing margin (shown by the red left, top, and right struts).

The date UILabel is pinned to the top and trailing edge of the superview, meaning the date UILabel will retain its frame and distance from the top and trailing edge.

The message UILabel has a flexible width and a fixed leading, top, and trailing margin.

The A UILabel is pinned to the top and leading edge of the superview, meaning the A UILabel will retain its frame and distance from the top and leading edge.

Now, with all views configured with the appropriate autoresizing mask, the view is responsive. In a landscape orientation the Advanced Swift and message UILabel labels will be stretched horizontally, with all other views staying the same size. The date UILabel will maintain its distance from the superview’s trailing edge.

Autolayout vs AutoresizingMask

When To Use Autolayout

Although both Autolayout and autoresizing masks can be used to layout iOS and macOS UI, Autolayout is a more powerful layout framework. Use autolayout for:

1. Safe areas and margins
2. Complex layout responsiveness
3. Inter-view dependencies like aspect ratios, related widths
4. Fine-grained layout control

When To Use Autoresizing Masks

Even though autolayout is more powerful, autoresizing can still be valuable. Consider using autoresizing masks for:

1. Embedded views that primarily stretch in one direction
2. Prototyping responsive UI
3. Simple layouts

Using Autolayout And Autoresizing Masks At The Same Time

Autolayout and autoresizing masks are not exclusive user interface layout methods, and both can be used at the same time.

Both examples presented in this post are combined in the following example. First, a UITableView was added using autolayout constraining the top, leading, trailing, and bottom edges. Then, the UITableViewCell was added using autoresizing masks as presented in this post.

The result is a user interface layout that reacts as expected in both portrait and landscape orientations, for devices with and without rounded corners:

A Guide To Autolayout and Autoresizing Masks In Swift

That’s it! By using autolayout and autoresizing masks, individually or together, you can create response UIs for your iOS and macOS apps in Swift.