Easier Auto Layout: Coding Constraints in iOS 9

Update 9/26/16: This tutorial has been updated for Xcode 8 and Swift 3.

Do you find Auto Layout challenging? Do you find yourself making and unmaking constraints over and over in a never-ending attempt to find the seemingly random correct layout? Do you find it daunting when you have to modify Auto Layout constraints in code?

Never fear! In this Auto Layout tutorial instead of using Interface Builder and storyboards, you’ll create all your constraints in code using layout anchors, a new API delivered as part of iOS 9. Creating constraints in code will lead to a greater understanding of Auto Layout constraint relationships, and even make it easier for you create Auto Layout driven views in Interface Builder.

You’ll learn about:

• iOS 9 layout anchors
• Layout guides
• Intrinsic content size
• The Auto Layout update cycle
• Laying out for different size classes

In short, you’ll learn how to stay afloat with Auto Layout. :]

You’ll be creating an app called Wonderland, a simple Alice in Wonderland story app. Here’s what the app will look like when you’re finished:

Using code to create all the views and constraints, you’ll lay out the app differently using Compact and Regular size classes.

Although the raywenderlich.com team advocates using storyboards whenever possible, sometimes it’s better to use code to create your views. For example, Wonderland contains an avatar profile view that you can use across several apps. It’s easier to reuse code rather than copy Interface Builder views across several apps.

In addition, if you learn how Auto Layout works in code, it’s easier to apply it in Interface Builder, which can become difficult to follow when you’re laying out various size class combinations.

Getting Started

Download the Wonderland starter app and open it up in Xcode.

Note: Use the iPhone 6s Plus or 7 Plus simulator for testing unless told otherwise. These are horizontally Compact in portrait and horizontally Regular in landscape, so you can easily test both layouts.

You can see all the size classes and devices here.

Adaptive Layout Tutorial in iOS 9: Getting Started will teach you the basics of size classes and adaptive layout.

If you’re a raywenderlich.com subscriber you can watch a video to learn more about size classes here.

Run the app and you’ll see three colored views:

• avatarView – cyan: this view will show the chapter image, book title and social media icons.
  (I’ve called it avatarView because, even though in this app it may not look much like an avatar or profile view, it will have the standard profile view objects of image view, name and icons. You could use this view across multiple apps.)
• chapterLabel – yellow: tells you what the current chapter is.
• bookTextView – green: the text of the current chapter.

You can swipe the text view left or right to move to the next and previous chapters.

The three views are properly positioned using the view’s frame property.

But rotate the device (Cmd + left or right arrow), and the views don’t expand correctly to fill the landscape width:

Open ViewController.swift, there’s only one method – viewDidLoad() – which calls methods to set up the three views.

The setup methods are defined in ViewControllerExtension.swift. These are separated out because you won’t be changing any of this code. You’ll only be working in ViewController.swift and AvatarView.swift.

What is Auto Layout?

Note: Have a brief look at our Auto Layout in Interface Builder tutorial. Even if you don’t plan to use Interface Builder yourself, the tutorial explains many useful concepts.

Auto Layout is a layout system based on constraints. You no longer think about screen objects in terms of their exact size. Only the relationship between the objects is relevant.

The downside of this is that the constraint system is extremely logical, and with one slip in logic your whole layout can come tumbling down.

The advantages are considerable. In Wonderland you will set up relationships between views of varying sizes, and they will automatically grow and shrink as the device rotates because they are part of a layout system.

Working out Constraints

The best way to work out what constraints are required is to make a drawing of the required result. Forget the details; just look at the basic layout and decide on the relative positioning of views:

For each one of these three views you have to provide at least four constraints: X position, Y position, Width and Height.

These are the constraints you’ll create:

The most important of these views is bookTextView, which is the text of the current chapter. You’ll set up this view to take up two thirds of the screen, and the other two views will take up the rest of the space.

avatarView is the least important; this can grow and shrink depending on what space is available to it.

chapterLabel should remain the same height no matter what, and is set by the font height of the text.

1. Each view is anchored to the leading edge of the main view’s margin guide, giving the X position constraint.
2. bookTextView is anchored to the bottom of the main view; chapterLabel is anchored to the top of bookTextView and avatarView is anchored to the top of chapterLabel. This gives all views their Y position constraint.
3. Each view is anchored to the trailing edge of the main view’s margin guide, giving the Width constraint for each – the width essentially stretches from the leading edge to the trailing edge.
4. The Height constraint is the most difficult of the constraints to work out, as each view should stretch differently.

   The most important of these views is bookTextView, which is the text of the current chapter. You’ll set up this view to take up two thirds of the screen, and the other two views will take up the rest of the space.

   avatarView is the least important; this can grow and shrink depending on what space is available to it.

   chapterLabel should remain the same height no matter what, and is set by the font height of the text.

So now to translate this into code.

First, in ViewController create a new method called setupConstraints():

func setupConstraints() {
}

You’ll be using setupConstraints() to set up the constraints for all three views.

In viewDidLoad() remove the call to setupFrames() and replace it with the following:

setupConstraints()

Note: Constraints must be added after adding views to their superviews. All constraints need to be in the same hierarchy. If they aren’t, the app will immediately crash.