Before I discuss the benefits of Auto Layout, I'd like to take a moment to discuss the options you have for creating user interfaces on iOS.
Positioning a View
Every view in the view hierarchy of a user interface needs to have a size and a position. You have three options to size and position a view on iOS. You can directly set the frame of the view, you can additionally set the autoresizing mask of the view, or 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's take a minute to discuss them, starting with setting the frame of a view.
Setting the Frame of a View
The frame of a view is a rectangle with an origin, an x and a y coordinate, and a size, a width and a height. That's all it takes to define the position of a view in the view hierarchy of a user interface.
The most important advantage of a frame-based layout is fine-grained control. Because you specify the origin and size of each view, you know exactly what the user interface will look like. 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 significant 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-inch screen. Nowadays, however, applications need to look great on a wide variety of devices with a mix of screen sizes. The message is simple, avoid frame-based layouts whenever possible.
Adding Dynamism With Autoresizing Masks
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 by default. An autoresizing mask is nothing more than a property of the view that defines its resizing behavior. When the size of the view's superview changes, the autoresizing mask determines how the view itself is impacted. While this may sound like a good solution for frame-based layouts, the possibilities are rather limited and fall short for complex layouts. A view's autoresizing mask allows for some flexibility and dynamism, but its power pales in comparison with the possibilities of Auto Layout.
Positioning a View With Auto Layout
That brings us to the third option, 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 again, and updates the frame of each view in the view hierarchy.
It is important to understand that, ultimately, the frame of each view is set to create the user interface. This means that, fundamentally, nothing changes when you use Auto Layout to create a user interface. The key difference, however, is that constraints are used to dynamically calculate the frame of each view in the view hierarchy. In other words, you never directly set the frame of a view when using Auto Layout. Instead, you describe the view's relationships with its neighboring views.
What Is a Constraint
Constraints are the building blocks of a user interface created with Auto Layout. This brings us to the question "What is a constraint?" We take a look at the anatomy of constraints later in this series. For now, know that a constraint defines a relationship between two items in the user interface. The Auto Layout engine takes those 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.
