What is the safe area layout guide?
Swift version: 5.6
Before iOS 11 it was common to create views that went edge to edge on the screen, taking up all available space in the glass rectangle of the iOS display. However, from iOS 11 onwards Apple introduced the safe area layout guide, which is a feature that restricts the edges of views so they don’t get clipped by the rounded corners and notch of the iPhone X.
You don’t need to make your view fall inside the safe area, and in fact it’s common to ignore this for background views that should fill the screen behind your content. For example, the built-in Weather app runs its background graphics edge to edge, then puts its main content inside the safe area.
If you use view controller containers such as UINavigationController and UITabBarController they will automatically keep your content clear of the safe area so you don’t need to worry about it. Otherwise, you should switch all your Auto Layout constraints over to the safe area layout guide inside Interface Builder – IB will automatically generate backwards-compatible constraints for older versions of iOS.
SAVE 50% To celebrate WWDC23, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.
Available from iOS
Similar solutions…
- How to make a background image run under the safe area
- How to place content outside the safe area
- How to inset the safe area with custom content
- How to place content into the safe area
- How to create a custom layout using the Layout protocol
About the Swift Knowledge Base
This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.
