Implement Safe area guidelines for iPhone X and above

I recently faced a very common problem of supporting the App interface to the new iPhones X and above. The top label in the App was hiding behind the status bar not adapting properly to the interface of the iPhone X.

Safe area layout guide provided by Apple is a no coding solution to this problem. Select the Storyboard and on the File Inspector, check the “Use Safe Area Layout Guides” checkbox.

Next, select the label from the Storyboard and edit the top alignment constraint by changing the second item to Safe Area instead of Super View.

Running the App, will make the Top label appear below the status bar on the iPhone X and above as shown below.

Using Xcode version 10.1.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.