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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store