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 text.
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.