How Auto Layout works

With Auto Layout, you can arrange your app's UI by defining relations between UI elements. These relations are called constraints. A constraint can be defined between two different elements to set a distance between them, for instance, or it can be associated to a single element and used to define its width/height.

At first, this might sound strange, because in Chapter 1, UI Fundamentals, and Chapter 3, Interface Builder, XIB, and Storyboard, we talked about how to place subviews independently by only taking care of where to draw them and modifying their frame/bounds properties. There's more to it, however.

You can set up Auto Layout in three main ways:

• You can add all the constraints from Interface Builder directly thanks to a (almost) complete list of instruments
• You can add constraints using code thanks to Visual Format Language (VFL) if you need more control
• You can generate constraints automatically starting from the current autoresizing mask and translatesAutoresizingMaskIntoConstraints...