Auto Layout

Our Goal

At the moment, our app only looks good on the canvas dimension that we’ve selected. If you run the app on screens with different aspect ratios or try to turn it to landscape, the designs will look broken.

Auto Layout allows us to set rules as to how we want our views to be displayed. Because mobile screens have different resolutions and sizes, we need these rules to tell the iPhone/iPad how it should layout all the elements in the storyboard onto the display. These rules allow our UI elements to be resized and positioned so that no matter which screen they are displayed on, they always look as the designer intended.

What you will create

Although Dicee is already pretty dicey, we get into problems when we try to rotate the screen to landscape or if we have a screen size that is not the same as the canvas. In this module, we’ll learn how to fix this and make our apps look exactly the way we want.

What you will learn

• How to add constraints and understanding how Auto Layout works.
• How to Pin and Align elements.
• How to create containers to configure advanced layouts.
• How to debug auto layout errors.
• Understanding what Xcode needs in order to correctly layout a design.
• How to use Stack Views to create complex interfaces.

This is a companion project to The App Brewery's Complete App Development Bootcamp, check out the full course at www.appbrewery.co