By Evgeny M., iOS Developer at Rosberry

As you remember, in iOS 7 Apple introduced the topLayoutGuide and bottomLayoutGuide properties in UIViewController to describe a screen area that isn’t covered by any content (status bar, navigation bar, toolbar, tab bar, etc.) In iOS 11 Apple has deprecated these properties and introduced the safe area. Apple suggests that we do not to place any controls outside safe area hence in iOS 11 you have to use new safe area API when you position views in iOS application.

When we started supporting iPhone X resolution and the safe area in our apps we found that many classes in UIKit have the new safe area features. The goal of this article is to summarise and describe them.

Agenda

This article is divided into the following parts:

UIView

UIViewController

UIScrollView

UITableView

UICollectionView

These are all classes that have new safe area properties and methods.

Example

You can play with the example in our GitHub repository while reading this article.

UIView

In iOS 11 the UIViewController topLayoutGuide and the bottomLayoutGuide properties have been replaced by the new safe area properties in UIView:

The safeAreaInsets property means that screen can be covered from all sides not only at the top and the bottom. When the iPhone X was presented it become clear why we would need the left and right insets.

iPhone 8 vs iPhone X safe area (portrait orientation)

iPhone 8 vs iPhone X safe area (landscape orientation)

The iPhone X has the top and the bottom safe area insets in portrait orientation. Left, right and bottom insets in landscape orientation.