Before discussing the benefits of Auto Layout, we need to take a moment to discuss the options you have to create user interfaces on iOS.
Every view in the view hierarchy of a user interface needs to have a size and a position. On iOS, you have three options to size and position a view:
- you can directly set the frame of the view
- you can additionally set the autoresizing mask of the view
- you can define constraints to size and position the view using Auto Layout
To understand the benefits of Auto Layout, you need to be familiar with the pros and cons of each of these options. Let us start with setting the frame of a view.
Setting the Frame
The frame of a view is a rectangle with an origin, an X and Y coordinate, and a size, a width and a height. That is all it takes to define the position of a view in the view hierarchy of a user interface.
Pros
The most important advantage of a frame-based layout is fine-grained control. Because you specify the origin and size of each view in the view hierarchy, you know exactly what the user interface will look like at runtime.
Cons
But frame-based layouts have a few important shortcomings.
The most obvious disadvantage is that you need to specify the frame for every view in the view hierarchy. That can be quite a bit of work, especially for complex layouts with dozens of views.
Another major issue is the lack of flexibility and dynamism. Whenever a change occurs, you need to make sure the user interface is updated by updating the frames of the views that are impacted by the change. What happens, for example, if the user rotates her device from portrait to landscape?
Last but certainly not least, frame-based layouts cause a lot of headaches if your application runs on devices with different form factors. This wasn’t a problem in 2007 when Apple introduced the original iPhone with its 3.5" screen. Nowadays, applications need to look great on a wide variety of devices with a mix of screen sizes.
Conclusion
The message is simple. Avoid frame-based layouts if possible.
Autoresizing Mask
Autoresizing masks are not new. They have been around since the introduction of the original iPhone and are commonly used in frame-based layouts. In fact, every view has an autoresizing mask. An autoresizing mask is nothing more than a property on the view that defines its resizing behavior.
When the bounds of the view’s superview changes, the autoresizing mask determines how the view itself is impacted. The autoresizingMask property is a bit mask, giving developers quite a few options. In the example below, the autoresizing mask determines that the view should be resized by decreasing or increasing the width and height of the view.
view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
While this may sound like a good solution for frame-based layouts, the possibilities are rather limited and fall short for complex layouts.
The autoresizing mask of a view allows for some flexibility and dynamism, but its power pales in comparison with the possibilities of Auto Layout. And that brings us to the third option, Auto Layout.
Auto Layout
Auto Layout takes a different approach. Instead of directly setting the frame of each view in the view hierarchy, it uses constraints to define the relationships between the views. The end result is a flexible, dynamic layout.
When the application runs, the Auto Layout engine inspects the constraints and infers the correct size and position for each view in the view hierarchy. One of the most significant benefits of a constraint-based layout is that the user interface can respond to internal and external changes.
When such a change is detected, for example, when the user rotates her device, the Auto Layout engine invalidates the layout, inspects the constraints, and updates the frame of each view in the view hierarchy.
You never directly set the frame of a view when using Auto Layout.
It is important to understand that, ultimately, the frame of each view is set to create the user interface. Nothing fundamentally changes when you use Auto Layout to create a user interface with Auto Layout. The key difference is that constraints are used to dynamically calculate the frame of each view in the view hierarchy. You never directly set the frame of a view when using Auto Layout. Instead, you describe the relationships of the view with its neighboring views.
Constraints
Constraints are the building blocks of user interfaces created with Auto Layout. A constraint describes the relationship between two items in the view hierarchy. The Auto Layout engine translates the constraints to linear equations and evaluates these equations. This should result in one possible outcome, one layout.
The Auto Layout engine takes the constraints and infers the size and position of each view in the user interface. The result is a dynamic user interface that looks great on any device, regardless of screen size and the orientation of the device.
What's Next?
Questions? Leave them in the comments below or reach out to me on Twitter.
