7 Layout Guides

Layout guides are rectangular areas that you can use to create spaces between your views. In the past, you had to create “dummy views” that acted as spacers. These spacers allowed you to have the desired layout for the UI. Well, with Auto Layout and layout guides, dummy views are no longer necessary.

So, what’s the difference between creating dummy views and using layout guides? To answer this question, you’ll look at some of the key benefits of using layout guides, and how they compare to dummy views:

• Dummy views can interfere with messages that are meant for one of their children. For example, gestures can easily get captured by the wrong view.
• Creating dummy views results in a higher performance cost since these views are part of the view hierarchy and have to be maintained. On the other hand, layout guides are not a visual element since their job is simply to define a rectangular area in the view hierarchy.
• Layout guides are created using code; this allows for more customization, especially when you’re creating all of your constraints within code.

Available Layout Guides

UIKit comes with some layout guides out of the box; they will help you create adaptable interfaces. Their main focus is to make it easy for developers to know the available space at any time, since this can vary from one device to another. These layout guides are Safe Area and Layout Margin and Readable Content.

Safe Area layout guide

The iOS SDK comes with several layout guides, but the most used is the Safe Area layout guide. The Safe Area layout guide represents the portion of the screen that is not covered by the navigation bars, tab bars, and toolbars.

The green rectangle represents the safe area. Notice how it respects the margin so the views don’t get covered up by the notch:

Layout Margin guides and Readable Content guides

The Safe Area layout guide isn’t the only popular guide available in the SDK. The two most notable ones are the Layout Margin and the Readable Content guides.

The Layout Margin represents the margins of a view. You can use it to create constraints to the view’s margins instead of the view itself.

Here, the white rectangle represents a view whose leading, top, bottom, and trailing constraints are attached to their counterpart in the layout margin guide of its parent. That’s why there is some spacing between the parent view (the green one) and its child (the white one).

The Readable Content guide represents the recommended area you can use while working with text views within your app. It’s a good idea to use this guide because it helps users read without the need to move their heads to track the lines.

The Readable Content guide is also useful because it specifies the total width you can use to display text. So, for example, suppose you want to organize your text into columns. You can use the total width value, provided by this layout guide, to know how many columns you can have. Furthermore, the Readable Content Guide will never extend beyond the Layout Margin guide.

In the next section, you’ll create your first layout guide.

Creating layout guides

You create layout guides in code using the following these steps:

1. Instantiate a new layout guide.
2. Add to its container view by calling addLayoutGuide(_:).
3. Define the constraints for the layout guide.

Apart from creating spaces between the views, you can also use layout guides to contain other views. This is useful when you want to create a container that centers on a set of views.

Creating custom layout guides

Load the starter project and open the MessagingApp project. Build and run.

The apps display a list of constants. Now, pay attention to the left margin. And, on the right side, on the first contact, tap the info accessory button.

Oh, that’s not good! The name of the contact and the text for the call button is cut off. But don’t worry, you can fix this problem using layout guides.

Open ContactPreviewView.swift and add the following code at the end of the class:

private func setupLayoutInView(_ view: UIView) {
  //1
  let layoutGuide = UILayoutGuide()

  //2
  view.addLayoutGuide(layoutGuide)

  //3
  nameLabel.translatesAutoresizingMaskIntoConstraints = false
  callButton.translatesAutoresizingMaskIntoConstraints = false

  //4
  NSLayoutConstraint.activate([
    nameLabel.topAnchor.constraint(
      equalTo: layoutGuide.topAnchor),
    nameLabel.leadingAnchor.constraint(
      equalTo: layoutGuide.leadingAnchor),
    nameLabel.trailingAnchor.constraint(
      equalTo: layoutGuide.trailingAnchor),
    callButton.bottomAnchor.constraint(
      equalTo: layoutGuide.bottomAnchor),
    callButton.centerXAnchor.constraint(
      equalTo: nameLabel.centerXAnchor)
  ])

  //5
  let margins = view.layoutMarginsGuide

  //6
  NSLayoutConstraint.activate([
    layoutGuide.topAnchor.constraint(
      equalTo: photoImageView.bottomAnchor, constant: 5),
    layoutGuide.leadingAnchor.constraint(
      equalTo: margins.leadingAnchor),
    layoutGuide.trailingAnchor.constraint(
      equalTo: margins.trailingAnchor),
    layoutGuide.bottomAnchor.constraint(
      equalTo: margins.bottomAnchor)
  ])
}

With this code, you:

1. Instantiate a new layout guide.
2. Add the new layout guide to the current view, which is ContactPreviewView.
3. Set translatesAutoresizingMaskIntoConstraints to false for nameLabeland callButton.
4. Create top, leading and trailing constraints for nameLabel anchored to layoutGuide.
5. Create a constant to hold the Layout Margin guide of the view. This allows you to create constraints anchored to the margins of the view.
6. Create top, leading, trailing and bottom constraints for layoutGuide.

layoutGuide acts as a container for nameLabel and callButton. So the constraints that affect layoutGuide directly affect the positioning of the views.

Before you check your work, in loadView(), add a call to setupLayoutInView(view)immediately before addSubview(view). By calling this method, you ensure everything is properly set up when the view is created.

Build and run. Tap any contact within the list.

Excellent, it’s already looking better!

While still running the app, tap the About button in the top left corner. This action displays a screen with a significant amount of text.

Stop the project and open Contacts.storyboard. On the bottom center of the Interface Builder, select View As: iPad Pro 11” and set the orientation to Landscape. The preview is now set to use an 11 inch iPad to display the screen.

On the About Scene, select the View element, and on the Size Inspector, mark the Follow Readable Width option.

At this point, you’ll notice that the text on the screen is center aligned, and the margin is added so that the user can better read the longer text; this is all possible thanks to the Readable Content guide.

Now, run the app on an iPad to see how it looks.

Without a doubt, layout guides are a convenient tool. They allow you to better organize elements inside of the UI, they serve as a reference for the child elements, and they eliminate the need for dummy views when all you need is some spacing between the views.

Key points

• Rather than using dummy views, create container layout guides and use them as spacing views.
• Use Readable Content guides when you need to display text within your app.
• Use Layout Margin Guide to restraint all the content inside a view to respect margins.