What Are Layout Guides

In this episode, I'd like to take a minute to discuss layout guides. While there are several layout guides, the ones I discuss in this episode are the top layout guide, the bottom layout guide, and the safe area layout guide. The top and bottom layout guide are deprecated as of iOS 11 and tvOS 11. They have been replaced with the brand new safe area layout guide.

What Is It

The safe area layout guide is a property of the UIView class and it inherits from the UILayoutGuide class. It was introduced in iOS 11 and tvOS 11. It helps you correctly position views in a layout.

The safe area layout guide replaces the top and bottom layout guides of the UIViewController class. The topLayoutGuide and bottomLayoutGuide properties of UIViewController are deprecated as of iOS 11 and tvOS 11.

The safe area layout guide represents the area of the view that is visible to the user and not hidden by bars or content. That is a very useful tool to have in your toolbox if you're using Auto Layout, especially with the recent introduction of iPhone X.

Views and Layout Guides

Remember from earlier in this series that a constraint describes the relation between two items. Those items can be views or layout guides. In other words, you can describe the relationship of a view to a layout guide.

Apple dramatically changed the user interface of iOS with the release of iOS 7. Since iOS 7, it's possible for content to extend beyond the status bar, navigation bar, and tab bar. This means that a view can extend beneath the status bar, navigation bar, and tab bar.

Take a look at this example. You can see that the colors of the web page bleed through the status bar and the navigation bar. While this effect looks nice, it isn't always what you want. That is where the safe area layout guide step in.

Let's assume you want a table view to extend below the status bar and the navigation bar. For that to work, you need to pin the top edge of the table view to the top edge of the view controller's view. For a label or a text field, however, you don't want that behavior. A form, for example, should be pinned to the bottom edge of the status bar or the navigation bar.

The problem is that Interface Builder doesn't know at design time if there's going to be a status bar or a navigation bar. You can show or hide the status and the navigation bar with a few lines of code. We need a more reliable solution hence the safe area layout guide.

Safe Area Layout Guide

As I mentioned earlier, the safe area layout guide represents the area of the view that is visible to the user and not hidden by bars or content. It takes the presence or absence of the status bar, navigation bar, and tab bar into account. Let me show you what that means with an example.

I've created a simple project with one view controller scene. Add two labels to the view controller's view and add a bit of text to each label. Select the left label and open the Pin menu. The Pin menu gives us the option to pin the label to the top edge of the view or the top edge of the safe area layout guide. Click the disclosure triangle on the right to show the options we have.

Interface Builder shows us the distance to each item. Pin the left label to the top edge of the view controller's view and set the constant to 0. To avoid Auto Layout errors, we also need to describe the label's horizontal position. For now, pin it to the leading edge of its superview. Select the right label and pin it to the top edge of the safe area layout guide. Set the constant of the constraint to 0 and pin the label to the trailing edge of its superview to avoid any Auto Layout errors. If we run the application in the simulator, we can clearly see the difference in position between the labels.

The safe area layout guide also takes the notch of iPhone X into account. Take a look at the user interface if we choose iPhone X as the destination.

The difference is even more prominent if we make the view controller the root view Controller of a navigation controller. Select the view controller and choose Embed in Navigation Controller from Xcode's Editor menu. Run the application one more time to see the result.

Because the view of the view controller extends beneath the status bar and the navigation bar, and we pinned the left label to the top edge of the view controller's view, it is no longer visible. The right label is pinned to the top edge of the safe area layout guide and that means it remains visible regardless of the presence or absence of a status bar or a navigation bar.

In the next episode, we take a look at a very useful feature of Auto Layout, stack views.