Hiding the Safe Area Layout Guide

Interface Builder has many ways to create a constraint, but getting it to do what you want requires some technique. For example, have you ever wanted to pin a view to the edges of the root view instead of the safe area? It’s not obvious how to do that as Interface Builder assumes you want to use the safe area.

Safe Area Layout Guides

Here’s the situation. I have a container view I want to pin to the leading, top and trailing edges of the root view of my view controller:

Interface Builder showing a container view

There are many ways to create those three constraints:

  • Control drag from the container view to the root view in the canvas.
  • Control drag from the container view to the root view in the document outline.
  • Select the container view and then use the “Add New Constraint” (pin) tool.

It doesn’t matter which you choose, Interface Builder wants to create constraints to the safe area. Here’s the popup menu when I control-drag in the document outline:

Add constraints menu

Holding down the option key switches to creating constraints to the margins of the root view:

Add constraints option menu

Most of the time these are sensible options. If I’m adding content I usually want to keep it inside the safe area or margins of the superview. The problem is that it’s not obvious how to do something different.

We could add the three constraints to the safe area or margins and then manually edit them with the size inspector but that is painful:

Constraints to safe area

Hiding The Safe Area Layout Guide

Luckily there’s an easier way. So easy, that I’m almost embarrassed to mention it. Hide the safe area layout guide. Select the root view and then in the size inspector uncheck the option to show the safe area layout guide:

Checkbox to show safe area layout guide

With the option unchecked, Interface Builder no longer shows the safe area guide below the root view in the document outline:

Document outline without safe area guide

More importantly, Interface Builder no longer assumes you want to create constraints with the safe area. If you control-drag from the container view to the root view you now get options to create constraints with the edges of the view:

Constraints menu to container

I can now add my three constraints to the edges of the root view with no further editing required:

Leading, top and trailing constraints to root view

Easy when you know how, a pain in the backside if you don’t.