With the introduction of the iPhone X in 2017, Apple also introduced the concept of safe layout guides in Xcode 9 to help us build interfaces that would accommodate the phone’s notch-laden design.
This changed a number of behaviors regarding the way views lay out in storyboards. For one, safe layout guides have the effect that all content within views is, by default, aligned to a safe area. Furthermore, when using Auto Layout to pin views against their nearest neighbor, even a standalone, top-level element will have its hooks set upon a ready-made
Safe Area layer — not the outermost
And in most cases, this is fantastic: There’s often not a good reason for us to leave the Safe Area, and Xcode drives the point home to prevent us from doing so accidentally.
Inevitably, though, we’ll encounter the need to venture out further. Perhaps we have an image that we want to insert as a custom, full-screen background:
Sticking to the Safe Area just won’t cut it here.
But while the fix is obvious — we need to pin our constraints against the top-level
View in the Document Outline — Xcode makes implementing it in storyboards much less so.
We just saw how the handy
Add New Constraints button doesn’t Just Work ™️. But take, for instance, the handy ability to Ctrl+Click+Drag a constraint from one item to another the Document Outline. If you try to do this against the
View element, Xcode will present options for pinning to the
Safe Area instead:
Thankfully — and mainly because there’s usually 10 different ways to do things in storyboards 😆 — all isn’t lost. Here’s an approach I found that does work:
- Using the
Add New Constraintsbutton, add the four
Bottomconstraints to your image as shown before.
- Double-click on one of the constraints listed in the image view’s Size Inspector panel. This will open up the constraint’s Size Inspector panel.
- From there, change the constraint’s
Second Item— whichever refers to the Safe Area — to refer to the
Superview. And make sure the
Constantvalue is set to 0.
- Repeat for the other three constraints
This will get your image properly pinned to all edges of the screen. You’ll also likely want to change the image’s Content Mode attribute from
Aspect Fit to
Aspect Fill. (
Scale to Fill would also achieve full coverage, but the distortion of the image may be undesirable. Up to you 🙂).
Alas, this all feels a bit more involved than it should be. But given that it’s more of an edge case (no pun intended), I was just glad that there is still a way to handle it in storyboards.
Which I think is really important.
Yes, we could configure these constraints in our code — setting the image view’s
translatesAutoresizingMaskIntoConstraints property to
false, setting its anchors to equal the anchors of the
view in our view controller, etc, etc — but that’s exactly the kind of boilerplate and ceremony that storyboards are so great at mitigating.
So, if you came here confused, but with a similar air of defiance and Storyboard zeal, I hope this post was helpful in keeping you on the right track 🙂.