Article

Positioning Content Relative to the Safe Area

Position views so that they are not obstructed by other content.

Overview

Safe areas help you place your views within the visible portion of the overall interface. UIKit-defined view controllers may position special views on top of your content. For example, a navigation controller displays a navigation bar on top of the underlying view controller’s content. Even when such views are partially transparent, they still occlude the content that is underneath them. In tvOS, the safe area also includes the screen’s overscan insets, which represent the area covered by the screen’s bezel.

Use safe areas as an aid to laying out your content. Each view has its own layout guide (accessible from the safeAreaLayoutGuide property) that you can use to create constraints for items inside the view. If you are not using Auto Layout to position your views, you can obtain the raw inset values from the view’s safeAreaInsets property.

Figure 1 shows two different views of the Calendar app and the safe area associated with each one.

Figure 1

The safe area of an interface

Safe areas in the Calendar app

Extend the Safe Area to Include Custom Views

Your container view controller can display its own content views over the views of an embedded child view controller. In this situation, update the child view controller’s safe area to exclude the areas covered by the container view controller's content views. UIKit container view controllers already adjust the safe area of their child view controllers to account for content views. For example, navigation controllers extend the safe area of their child view controllers to account for the navigation bar.

To extend the safe area of an embedded child view controller, modify its additionalSafeAreaInsets property. Suppose you define a container view controller that displays custom views along the bottom and right edges of the screen, as shown in Figure 2. Because the child view controller’s content is underneath the custom views, you must extend the bottom and right insets of the child view controller's safe area to account for those views.

Figure 2

Extending the safe area of a child view controller

Adjusting the safe area to account for custom views

Listing 1 shows the viewDidAppear(_:) method of the container view controller that extends the safe area of its embedded child view controller to account for the views in . Make your modifications in this method because the safe area insets for a view are not accurate until the view is added to a view hierarchy.

Listing 1

Adjusting the safe area of a child view controller

override func viewDidAppear(_ animated: Bool) {
   var newSafeArea = view.safeAreaInsets

   // Adjust the safe area to accommodate 
   //  the width of the side view.
   if let sideViewWidth = sideView?.bounds.size.width {
      newSafeArea.right += sideViewWidth
   }

   // Adjust the safe area to accommodate 
   //  the height of the bottom view.
   if let bottomViewHeight = bottomView?.bounds.size.height {
      newSafeArea.bottom += bottomViewHeight
   }

   // Adjust the safe area insets of the 
   //  embedded child view controller.
   let child = self.childViewControllers[0]
   child.additionalSafeAreaInsets = newSafeArea
}

See Also

Getting the Safe Area

var safeAreaInsets: UIEdgeInsets

The insets that you use to determine the safe area for this view.

var safeAreaLayoutGuide: UILayoutGuide

The layout guide representing the portion of your view that is unobscured by bars and other content.

func safeAreaInsetsDidChange()

Called when the safe area of the view changes.

var insetsLayoutMarginsFromSafeArea: Bool

A Boolean value indicating whether the view's layout margins are updated automatically to reflect the safe area.