Introduction

Safe areas are the part of the screen that remain unobstructed by system UI such as the notch, status bar, navigation bar, tab bar, or home indicator. When you build UIKit screens in code, using the safe area correctly is what keeps content readable across iPhone and iPad layouts.

Programmatic layout is straightforward once you know where the safe area anchors come from. The important idea is that you constrain views to view.safeAreaLayoutGuide, not directly to the outer view edges, unless you intentionally want full-bleed content.

Pin Views to the Safe Area

In UIKit, every UIViewController exposes a root view, and that view has a safeAreaLayoutGuide. The guide gives you anchors for top, bottom, leading, and trailing edges that already account for device chrome.

This example places a label and a button inside the safe area:

1import UIKit
2
3final class ProfileViewController: UIViewController {
4    private let titleLabel: UILabel = {
5        let label = UILabel()
6        label.translatesAutoresizingMaskIntoConstraints = false
7        label.text = "Account"
8        label.font = .preferredFont(forTextStyle: .largeTitle)
9        return label
10    }()
11
12    private let saveButton: UIButton = {
13        let button = UIButton(type: .system)
14        button.translatesAutoresizingMaskIntoConstraints = false
15        button.setTitle("Save", for: .normal)
16        return button
17    }()
18
19    override func viewDidLoad() {
20        super.viewDidLoad()
21        view.backgroundColor = .systemBackground
22
23        view.addSubview(titleLabel)
24        view.addSubview(saveButton)
25
26        let safe = view.safeAreaLayoutGuide
27        NSLayoutConstraint.activate([
28            titleLabel.topAnchor.constraint(equalTo: safe.topAnchor, constant: 24),
29            titleLabel.leadingAnchor.constraint(equalTo: safe.leadingAnchor, constant: 20),
30
31            saveButton.bottomAnchor.constraint(equalTo: safe.bottomAnchor, constant: -20),
32            saveButton.centerXAnchor.constraint(equalTo: safe.centerXAnchor)
33        ])
34    }
35}

translatesAutoresizingMaskIntoConstraints must be false, otherwise Auto Layout creates implicit constraints that usually fight with the ones you add manually.

Know When Not to Use It

Not every view should be constrained to the safe area. Background images, separators, and some container views often need to extend to the full screen, while their child content stays inside the safe area.

For example, a header image may span edge to edge, but the title sitting on top of it should still honor the safe area:

1import UIKit
2
3final class HeaderViewController: UIViewController {
4    private let headerView = UIView()
5    private let titleLabel = UILabel()
6
7    override func viewDidLoad() {
8        super.viewDidLoad()
9        view.backgroundColor = .systemBackground
10
11        headerView.translatesAutoresizingMaskIntoConstraints = false
12        headerView.backgroundColor = .systemBlue
13
14        titleLabel.translatesAutoresizingMaskIntoConstraints = false
15        titleLabel.text = "Welcome"
16        titleLabel.textColor = .white
17        titleLabel.font = .preferredFont(forTextStyle: .title1)
18
19        view.addSubview(headerView)
20        headerView.addSubview(titleLabel)
21
22        let safe = view.safeAreaLayoutGuide
23        NSLayoutConstraint.activate([
24            headerView.topAnchor.constraint(equalTo: view.topAnchor),
25            headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
26            headerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
27            headerView.heightAnchor.constraint(equalToConstant: 180),
28
29            titleLabel.topAnchor.constraint(equalTo: safe.topAnchor, constant: 16),
30            titleLabel.leadingAnchor.constraint(equalTo: safe.leadingAnchor, constant: 20)
31        ])
32    }
33}

That split is common in polished iOS layouts: decorative elements can ignore the safe area, interactive content usually should not.

Scroll Views and Insets

Safe area behavior gets more interesting with scroll views. If you add a UIScrollView, you usually pin the scroll view to the outer edges of the screen and then pin the content layout inside it using the safe area or content layout guides depending on the effect you want.

For a standard form screen:

scrollView.frameLayoutGuide.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)

For a full-screen scrolling experience with content under a navigation bar, you might pin to view.topAnchor and let the system adjust insets. The exact choice depends on whether content should begin below system UI or flow underneath it.

If you use UINavigationController, large titles, or modal sheets, test on multiple devices. Safe area values can change after presentation, rotation, or when bars appear and disappear.

Adjust the Safe Area When Needed

UIKit lets you add extra padding with additionalSafeAreaInsets on a view controller. This is useful if a custom overlay or tool panel should push content inward without rewriting every constraint.

1override func viewDidAppear(_ animated: Bool) {
2    super.viewDidAppear(animated)
3    additionalSafeAreaInsets.bottom = 44
4}

This does not move views automatically unless their constraints already reference the safe area. That is another reason to make the safe area your default anchor target for interactive controls.

Common Pitfalls

• Constraining everything to view.topAnchor and view.bottomAnchor causes content to sit under the notch or home indicator.
• Mixing autoresizing masks with Auto Layout produces unsatisfiable constraint warnings. Set translatesAutoresizingMaskIntoConstraints to false.
• Assuming safe area values are final in viewDidLoad can be wrong for some presentations. Use lifecycle methods such as viewDidLayoutSubviews if you need to inspect actual insets.
• Pinning a background view to the safe area can create unwanted gaps at the top or bottom. Use full-screen edges for decorative views and safe area anchors for content.

Summary

• Use view.safeAreaLayoutGuide for labels, buttons, forms, and other interactive content.
• Pin full-bleed backgrounds to the view edges when you intentionally want edge-to-edge rendering.
• Test scroll views, navigation bars, and modal presentations because safe area behavior changes with containment.
• Use additionalSafeAreaInsets when custom overlays should shift safe-area-based content.
• Treat safe area anchors as the default for programmatic UIKit layouts unless you have a specific reason not to.