Positioning Content Relative to the Safe Area

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

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

Listing 1 shows the viewDidAppear: method of the container view controller that extends the safe area of its child view controller to account for the custom views, as shown 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.