In less than 1 month, iPhone X will be released to the market. Apple fans around the world can’t wait to get their hands on this beautiful looking smartphone. As a developer, adapting your apps to support the iPhone X edge-to-edge screen is a task that cannot be ignored.

In this article, I will show you a few common UI problems you might encounter when running your existing apps on iPhone X and how you can solve it with just a few simple tweaks using just interface builder.

Do note that the problems that we are going to discuss usually happen when trying to run Xcode 8 or lower projects on Xcode 9. However, the concept behind each solution will still be very useful when creating new apps using Xcode 9. Without further ado, let’s get started!

Problem 1: UI Elements Mispositioned Below Status Bar or Home Indicator

Labels being mispositioned below status bar and home indicator.

Image above shows a very common UI problem when we try to run our apps on the new iPhone X. For now, let’s focus on Label-A . The reason of the problem is because we are assuming the height of the status bar and setting a vertical space constraint between Label-A.Top and it’s Superview.Top .

Constraint that causes the UI problem.

Since iPhone X’s status bar height is different from all previous iPhone, this causes Label-A to be mispositioned below the status bar.

To fix this, we will need to use “Safe Area Layout Guides” that being introduced in Xcode 9 interface builder. (You may refer this guide by Apple to know more about safe area).

First, let’s enable “Safe Area Layout Guides”.

Enable “Safe Area Layout Guides” on storyboard

What we need to do next is to update the top constraint of Label-A by setting up a relationship between Label-A.Top and Safe Area.Top .

1. Select top constraint. | 2. Update Superview.Top. | 3. Check Top and Safe Area.

That’s it! Now when you try to run the app on iPhone X simulator, you will be able to see that Label-A magically positioned itself to the correct location.

You can basically apply the same concept to fix the positioning of Label-B . Just update the bottom constraint of Label-B by setting up a relationship between Label-B.Bottom and Safe Area.Bottom .

1. Select bottom constraint. | 2. Update Superview.Bottom. | 3. Check Bottom and Safe Area.

Here’s the final product after the changes, as you can see Label-A and Label-B both layout correctly in both iPhone 8 and iPhone X screen size, all thanks to “Safe Area Layout Guides”. 💪

Labels layout correctly after using “Safe Area Layout Guides”

Problem 2: UI Elements Do Not Fill Up The Entire iPhone X Display

Background image and UITableView do not fill up the entire screen.

By following the guide provided by Apple, both background image and UITableView (or UIScrollView) should always extend to the edge and fill up the entire iPhone X screen.

The cause of the above UI problem is exactly the opposite of what we have discussed in “Problem 1”. Take the background image case as an example, the gap at the top of the screen is cause by the constraint that we set between ImageView.Top and Top Layout Guide.Bottom .

Top layout guide in iPhone X.

To make the image view take the entire screen, we need to have a top and bottom constraint between the image view and it’s super view. Thus what we need to do is to change Top Layout Guide.Bottom to Superview.Top and Bottom Layout Guide.Top to Superview.Bottom , and also make sure the constant value of both constraint is 0.

Changes on top constraint.

Changes on bottom constraint.

We can also apply the same changes to fix the UI problem on UITableView. Here’s the final product.

Image view fill up entire iPhone X and iPhone 8 screen.

UITableView fill up entire iPhone X and iPhone 8 screen.

Conclusion

The concept behind the solutions that we just discussed is fairly simple, just remember:

Set constraint between your UI element and safe area layout guides when you need your UI element to be inside the safe area. Set constraint between your UI element and it’s super view when you need your UI element to extend to the edge of the screen.

One More Thing…

I have created another article that explain how we can create a custom navigation bar and tab bar using the concept and technique that we have discussed in this article. Feel free to check it out. 😃