Auto Layout

Now let's try it out on some other devices, like the iPhone SE simulator! But… hmm, this isn't right. All of our hard work is spilling outside the edges of the screen! We can't see all of the UI elements we added to our view controllers! What's going on?

If you take a look at the view controllers that we were populating in our storyboard, you'll notice that at the bottom of the editor it says that it was specifically laid out for the iPhone 6s. How does our view controller know how to adjust for different sized screens?

The bad news is that it doesn't know how to do that by default. The good news is that we have Auto Layout to solve this very problem. Auto Layout is a constraint system that lets us set rules for how all of our interface elements should be positioned, and with some clever thinking we can make sure our views can adjust for any size screen.

The view hierarchy

Before we get into constraints, let's go back and take a look at...