Chapter 5

Auto Layout

Before we start building an app, we must first understand the important concept of Auto Layout. Basically, when you design your app from the interface builder, you can only design it for one model of the iPhone at a time. But as you know, iPhones and iPads come in several sizes and shapes which means that the content you design will not be appropriately displayed for the models that you didn’t design for. So how do we fix this? We use a feature called Auto Layout.

Constraints

Auto layout is a constraint-based layout system. We can define the constraints or the conditions for displaying an object and those can be applied to all devices. You can preview a lot of devices at once by choosing the preview option from the Adjust Editor Options icon at the top right corner.

You can use the auto-layout bar at the bottom right to set the constraints or you can use another method which will be explained later.

In order to make sure our “Hello” Label stays centered in all devices, we can select it and then go to the align icon.

Then, check the boxes horizontally in the container vertically in the container and set the values to 0. You can also add controls by pressing the control key and dragging a line from the object to the safe area (more on that later) and selecting which type of constraint you want.

Safe Area

Safe Area was introduced in iOS 9 and is basically the entire view area excluding the status bar. However, if your app has a navigation bar on the top or a tab bar at the bottom, the safe area excludes those areas so that your view looks good when the tab bar is locked into a position.