Home iOS & Swift Books Auto Layout by Tutorials

7
Layout Guides Written by Libranner Santos

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

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.

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.

Creating layout guides

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

Creating custom layout guides

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

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)
  ])
}

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.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.