Adaptive Layout Tutorial in iOS 12: Getting Started

In this tutorial, you’ll learn how to use Adaptive Layout in Xcode 10 with iOS 12, enabling you to reuse the same storyboard for multiple devices and orientations. By Adam Rush.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 4 of 4 of this article. Click here to view the first page.

Adaptive Fonts

The current font sizes in your TextContainer look pretty good in the iPad view using a container with regular size classes, but the font size is too large for compact size classes. Fear not — you can also override font sizes within your size classes!

Note: Unlike layout overrides, changing the font configuration will always affect the base layout. Changes to the font configuration don’t respect the current size class overrides in Interface Builder. Instead, use the method outlined below.

Click Done Varying at the right of the Trait chooser menu. The bottom bar of your view turns gray to indicate that you’re back to the base layout.

Select the Cupertino text label and open the Attributes inspector. Click the small + to the left of the Font:

add adaptive font

This reveals a menu for selecting the size class combination that you’ll use to override the font size. Select Compact for the Width and Any for the Height like so:

font settings

This creates a second font selector box that applies to the specified size class combination. Update the font size in the new selector box to 90:

font settings

Now, select the temperature text label and repeat the same process. This time, set a font size override of 150 for Compact Width, Any Height.

Interface Builder updates automatically to show the effect of the changes you made:

Updated layout

Well, it’s looking a little better, but the view cuts off the Cupertino label. Fiddling with the font sizes until the label fits perfectly isn’t a particularly scalable option. Cupertino is quite a long place name, but Washington, D.C. is longer — and Kleinfeltersville, PA is longer still! What’s a designer to do?

Using Auto Layout to Resize the Fonts

Once again, Auto Layout comes to the rescue! You simply need to limit the width of the two text labels to match the width of the TextContainer. Control-drag from the Cupertino label to the TextContainer, and select Equal Widths.

Repeat the process with the temperature label. The canvas updates to show the effects of your changes as follows:

Almost finished layout

Hmm, having the text truncate is not exactly what you want. This is the default behavior for labels that contain more text than will fit in the available space; however, there’s also an option to adjust the font size automatically to fit the content.

Select the Cupertino label and open the Attributes inspector. Change the AutoShrink drop-down to Minimum Font Scale and ensure that it’s set to 0.5.

Also, update the Text Alignment to Centered. Your Attributes inspector should now look like this:

Label settings

Repeat the same procedure for the temperature label.

Take a look at the Interface Builder canvas; the iPhone layouts look much better now:

Finished layout preview

Working with the preview editor is great, but it’s a good idea to check that everything is still working correctly, so build and run your project. The iPhone screens look like everything is sizing correctly:

Layout on a device

iPhone X screen

Safe Area Guides

In iOS 11, Apple replaced top and bottom layout guides with a single Safe Area Guide. This helped with the introduction of the iPhone X, which has the notch and the bottom indicator view.

Updated iPhone X screen

By default on new projects, Interface Builder will choose the Safe Area Guide. For this example, that’s not the expected behavior you want.

Open the Size inspector for your TextContainer and update two constraints as follows:

  • In Align Trailing to:, change Safe Area.Trailing to Superview.Trailing.
  • In Align Bottom to:, change Safe Area.Bottom to Superview.Bottom.

As you can see, your constraints now override the Safe Area Guide and display their expected behavior.

Congrats, you’ve learned the basic techniques of Adaptive Layout!

Where to Go From Here?

Take a moment to think about the app you’ve built (or the completed project you’ve downloaded). In particular, consider that your app looks really good on all devices, in both orientations, using only one storyboard file!

If nothing else convinces you that Adaptive Layout is the way of the future, consider the fact that this layout will also look good on devices that haven’t even been released yet.

The takeaway from this tutorial is that, as a developer, you’ll need to change your approach to app design. Rather than working towards pixel-based layouts, you should consider the relationship between the UI elements on the screen.

If you want to learn more about Adaptive Layout, check out our Adaptive Layout video tutorial series, which takes you all the way from a beginner to an Adaptive Layout master! It’s also useful to watch Part 1, and Part 2 of Making Apps Adaptive from WWDC 2016.

In the meantime, if you have any questions or comments about this tutorial or Adaptive Layout in general, please join the forum discussion below!