Adaptive Layout Tutorial in iOS 12: Getting Started

The introduction of Adaptive Layout caused a huge paradigm shift for iOS app designers. By using it, you can now create a single layout for your app which works on all current iOS devices — without crufty, platform-specific code!

This tutorial serves as your introduction to Adaptive Layout. You’ll learn about universal storyboards, size classes, and layout and font customizations as well as the improved Interface Builder, which will help you along the way.

You’ll create the user interface for a simple weather app, and you’ll build it completely from scratch. If you’re not a fan of Auto Layout, don’t worry; the first part of this tutorial provides you with a gentle, step-by-step approach to building an interface using Auto Layout.

Amaze yourself at how much you can accomplish without writing a single line of code!

Use the Download Materials button at the top or bottom of this tutorial to download all of the files you’ll need for this tutorial.

Universal Storyboards

Universal Storyboards are the first step on your journey towards Adaptive Layout, because they allow you to use the same storyboard for both iPads and iPhones. There’s no need to keep per-device storyboards in sync with each other, which is a monotonous process that is fraught with error.

To get started, open Xcode and select File ▸ New ▸ Project….

Select iOS ▸ Application ▸ Single View App, then click Next:

Set Product Name to AdaptiveWeather and the Language to Swift. Make sure the checkboxes are all unchecked, then click Next:

Once you’ve specified the location for your project, take a look at the Project navigator and you’ll see the following files:

Main.storyboard is the single storyboard for all devices, no matter their screen size. Open the storyboard and you’ll see that it contains a single view controller, currently the size of an iPhone 8’s screen:

The Use Trait Variations option, which you can find in the File inspector, enables this new format for your project. Select the storyboard and open the File inspector and you’ll see the checkbox option as shown below:

This is the default option for all new iOS projects.

Use Safe Area Layout Guides is the default setting, because it supports the notch area of mobile phones. You can turn on this option yourself when you upgrade your old projects.

Setting up Your Storyboard

Now, you’re going to get your storyboard ready to use. To start, open Main.storyboard and drag an image view from the Object Library onto the view controller canvas.

In the Size inspector, set the X position to 37 and the Y position to 20. Set the Width to 300 and the Height to 265.

Next, drag a View from the Object Library and place it below the image view.

In the Size inspector, set the X position to 37 and the Y position to 340. Set the Width to 300 and the Height to 265:

Now, select the view you just added, open the Identity inspector and enter TextContainer in the Label field of the Document pane. If the Document pane is not visible, press the Show button to reveal it. Here, you can give the view a name, which makes it easier to see in the Document inspector. This view will eventually hold the city and temperature labels of your app.

It’s often hard to see views after dragging them in from the Object Library because their default background color is white and so is the view controller’s view. To fix this, select the view controller’s view, open the Attributes inspector and set its background color to #4AABF7.

Next, select the TextContainer view and set its background color to #3780BA.

Your view controller should now look like the screenshot below:

These two views are the only direct descendants of the view controller’s view. Your next task is to give them some layout constraints.

Adaptive Layout

Select the image view and press the Align button in the Auto Layout toolbar. Check the Horizontally in Container checkbox, make sure the value is set to 0 and click Add 1 Constraint.

Then, click the Add New Constraints button and add a top spacing of 20 to the superview constraint, like so:

Click Add 1 Constraint.

The constraints you added above ensure that the image view has a fixed-size margin from the top and centers the view left to right.

You now need to configure the space between the image view and the text container view. Control-drag from the image view down to the text container view, like so:

This displays the constraint context menu again. Select Vertical Spacing:

This constraint determines the amount of vertical space between the bottom of the image view and the top of the TextContainer view.

Select your image view and open the Size inspector to see how it looks now:

You’ll see the three constraints you just added to your layout. You can configure each constraint from within the Size inspector.

Press the Edit button in the Bottom Space To: TextContainer constraint, then configure the constraint properties in the dialog. Set Constant equal to 20:

Click away from the dialog to close it.

Adding More Constraints

You’ve now configured your TextContainer view to have a gap of 20 points from the bottom edge of the image view, but you also need to add constraints to the other three sides of the view.

Select your TextContainer view, then click the Add New Constraints button in the bottom bar to show the dialog.

In the Spacing to nearest neighbor section, set the left, right and bottom spacing in the superview to 0. Ensure that you have unchecked Constrain to margins; this removes padding from around your view.

For reference, the dialog should now look like this:

Click Add 3 Constraints to add the new constraints to your view. This pins the text container view to the left, right and bottom edges of the view controller’s view.

Your storyboard should now look like the screenshot below: