With Apple’s announcement of iPhone X, the world receives a radically different iPhone, and we developers receive a new set of work realities. Most notably, the screen is no longer a rectangle; there are rounded corners, a cut-out for the front sensor housing and the hardware Home button has been removed and replaced by a software on-screen indicator. These changes have implications for our apps, but Apple has provided us with tools and guidelines enabling us to continue providing excellent user experiences across our iOS devices—including the new iPhone X.

What’s especially nice? Most of what you need to do to support iPhone X is also what you need to do to best support iOS 11.

First Things First

The first things you must do to support iPhone X:

1. Use Xcode 9.
2. Build against the iOS 11 SDK.
3. Ensure your app uses a Launch Screen storyboard (not Launch images).

Updating Layouts

If your app uses standard UIKit components and Auto Layout, chances are good your app may just work with no changes necessary. If your app uses custom controls, does manual layout or uses full-screen, you may have do some updating. Regardless, it’s wise to exercise your entire application, every screen, in every orientation—portrait; landscape right and left; and upside down portrait, if your app supports it—looking for any layout anomalies. Xcode 9 has an iPhone X simulator to help with your assessment.

Safe Area

When updating your layouts, you need to adhere to the Safe Area Layout Guides. Introduced in iOS 11, the Safe Area describes an area of a view not occluded by ancestors, such as the status bar or a tab bar. You’ll need to check and update your layouts to honor the safe area. For example, if you have a control along the bottom of your view whose bottom constraint is relative to the superview’s bottom edge, that control may now be obscured by iPhone X’s Home Indicator. The fix is to update the control’s bottom constraint to be relative to the safe area bottom layout guide.

You can access the safe area in code by using the ,safeAreaLayoutGuide, explained here, using layout margins (when manually calculating layouts), or in Interface Builder. The safe area layout guides must be enabled in the File Inspector of your storyboard:

Note that for existing iOS storyboards, turning on safe area layout guides will automatically upgrade constraints connected to the scene’s top and bottom layout guides, as well as leading and trailing edges. It’s vital to review and test your constraints after enabling the safe area layout guides.

UITableView

UITableView brings a subtle change. The table view itself will run edge to edge, but the contentView of your UITableViewCell is constrained by the safe area. This allows cosmetics to fill the screen, but keep your content where the user can see it. iOS 11 provides a new UITableView.insetsContentViewsToSafeArea setting to change this behavior, which may or may not be suitable for your needs. Note the backgroundView does extend to edges, so that may be another option for adjusting customization. This stresses the importance of testing all of your screens across all orientations, especially left and right landscapes.

Corners, Edges, & Home

Any content or controls placed in corners may need to be moved, perhaps just inset, so they are not clipped by the iPhone X display’s rounded corners. As well, content or controls along the edges may also need an inset to help with gestures. This is especially true with elements along the bottom, as more space may need to be added to ensure trouble-free gesturing between your controls and the Home indicator.

Search Bars

iOS 11 unifies the search bar with the navigation bar, and a non-unified search bar looks bad on an iPhone X. Fortunately, the fix is easy.

Your code may have looked like this:

let searchController = UISearchController(searchResultsController: nil)
present(searchController, animated: true, completion: nil)

Now your code should look like this:

let searchController = UISearchController(searchResultsController: nil)
if #available(iOS 11.0, *) {
    self.navigationItem.searchController = searchController
    searchController.isActive = true
}
else {
    present(searchController, animated: true, completion: nil)
}

Graphics

The iPhone X uses @3x image scale factor. Ideally image assets should be provided as a PDF, but if you must use rasterized then include both @2x and @3x.

The display is 375pt wide, which is the same width as the 4.7” display of the iPhone 6, 7, and 8. The display is 812pt tall, which is 145pt taller than the 4.7” display. Note that content or background images created for the 4.7” display may not translate well to the iPhone X display, receiving banding or letter-boxing effects if images are scaled.

The iPhone 6, 7, 8, and X all belong to the Compact Width size class.

The status bar is taller on iPhone X, and it doesn’t change size when a background task like a phone call is running. Any hard-coded values or assumptions of status bar size must be revisited. Also if your app hides the status bar to claim more space for your app’s content, you may need to revisit that approach.

Finally, do not create black boxes or other letterboxing effects to contend with things like the sensor housing. Fill the screen with your content.

More Information

I’ve highlighted key areas for iOS developers to address so apps can be ready for iPhone X. Depending on your app, especially if you take advantage of Metal 2 or Core ML, there may be more work for you to do. Here are some additional resources:

• Building Apps for iPhone X (Fall 2017, Session 201)
• Designing for iPhone X (Fall 2017, Session 801)
• Additional Fall 2017 Developer Videos
• Human Interface Guidelines – iPhone X
• Human Interface Guidelines – Authentication (Face ID)
• Human Interface Guidelines – Image Size and Resolution
• Updating your App for iOS 11 (WWDC 2017, Session 204)
• Modern User Interaction on iOS (WWDC 2017, Session 219)
• Auto Layout Techniques in Interface Builder (WWDC 2017, Session 412)

I hope this post helps you as you prepare your apps for the exciting new iPhone X. Keep an eye on our blog for other helpful iOS tips and tricks. If you need more in-depth help, we provide comprehensive training and consulting solutions. Let’s work together to get your apps ready for iPhone X.