Prepare apps for iPhone X

Reading Time: 4 minutes

Apple starts shipping iPhone X tomorrow (November 3rd, 2017). Did you prepare your iOS apps for iPhone X? If your answer is no, continue reading this article to find out more.

Apple announced a couple of new devices this September – iPhone 8, iPhone 8+ and iPhone X. iPhone 8 and iPhone 8+ are not so different than previous models. Actually, they look almost the same. But as they were celebrating iPhone tenth anniversary they needed to show something new and little different and here comes iPhone X.

iPhone X

iPhone X comes with a new design – device features edge-to-edge Super Retina display, rounded corners, there is no more Home button and there is a cut-out on top of the device that holds TrueDepth camera system for Face ID (facial recognition). iPhone X also has the biggest display, 5.8” OLED with 2436×1125 resolution, which means it’s display is little bigger than on iPhone 8+. And if you don’t adjust your apps for iPhone X they’ll run in compatibility mode which means your apps will be vertically centered on the display with black bars on top and bottom of the screen.

Let’s get started.

Images and Launch storyboard

Apple recommends that you use Launch Screen storyboard (and not Launch images) as storyboards are flexible and adaptable. This means that you can use a single storyboard to manage all of your launch screens. Of course you can use Launch images also – in this case you need to provide static images in different sizes for different devices (be sure to include the status bar region). Also supply high-resolution images for artwork in your app. iPhone X has a high-resolution display with a scale factor of @3x. You can find more information here and here.

Auto layout

If you’re using standard UIKit components (like table views, etc) and you’re using auto layout (and set it up correctly) there is a pretty big chance that your app will look good on iPhone X and you won’t need to change anything (or you’ll need to do couple of smaller adjustments). But if you didn’t use auto layout correctly (or if you’re doing layout manually) and your apps are using some custom controls there is a big chance you’ll need to adjust a couple of things.

When you design for iPhone X, you must ensure that layouts fill the screen and that they aren’t covered by the Home screen indicator, rounded corners or sensor housing.

Safe Area Layout Guide

As you already know Apple introduced top and bottom layout guides in iOS 7. And now in iOS 11, Apple is deprecating these two properties and replacing them with a safe area layout guide.

Safe area, introduced in iOS 11, helps you place your views within the visible portion of the interface. Simply put safe area is an area of view that won’t be covered by navigation bar or tab bar. So you’ll need to update your layouts to honor the safe area. For example, if you have some control in bottom part of your view, that control may now be covered by iPhone X’s Home indicator. To fix this you need to update control’s bottom constraint to be relative to the safe area bottom layout guide instead to superview’s bottom edge.

If you created your constraints in XIB or storyboard files, to convert to the safe area layout guide (from top and bottom layout guides) you need to turn on “Use Safe Area Layout” setting in the file inspector for every XIB and Storyboard in your project (by doing this your constraint will be updated too).

And if you created constraints in code then use safeAreaLayoutGuide property of UIView to get the relevant layout anchors.

Let’s say you did setup of some view in your code which looks like this.

private func setupView() {
     let someView = UIView()
     someView.backgroundColor = .green
     someView.translatesAutoresizingMaskInto Constraints = false
     view.addSubview(someView)
     setupConstraintsForView( someView)
}

private func setupConstraintsForView(_ subView: UIView) {
     let margins = view.layoutMarginsGuide
     subView.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
     subView.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
     subView.heightAnchor.constraint(equalToConstant: 200.0).isActive = true
}

On iPhone X you’ll get following result:

Don’t worry, you can fix this easily.

private func setupConstraintsForView(_ subView: UIView) {
     let safeAreaGuide = view.safeAreaLayoutGuide
     subView.leadingAnchor.constraint(equalTo: safeAreaGuide.leadingAnchor).isActive = true
     subView.trailingAnchor.constraint(equalTo: safeAreaGuide.trailingAnchor).isActive = true
     subView.heightAnchor.constraint(equalToConstant: 200.0).isActive = true
}

And now you’ll get desired result.

But there is one important thing to know regarding safe area layout guide feature – to use it you need to drop support for iOS 8.

You can read more about safe area layout guide here.

Search Bar

In iOS 11 search bar is now integrated into the navigation bar. And if you previously used search bar with table view (by adding search to table view header) and now run your app on iPhone X you won’t be satisfied with the results.

For example your code may have looked like this:

     let searchController = UISearchController( searchResultsController: nil)
     searchController. searchResultsUpdater = self
     tableView.tableHeaderView = searchController.searchBar

Don’t worry, you can fix this easily. Instead adding a search bar to table view header add the search controller to the navigation item:

     let searchController = UISearchController( searchResultsController: nil)
     self.navigationItem. searchController = searchController
     searchController.isActive = true

Where to go next?

In this post we covered couple of key things you need to address but I suggest that you read more about this topic, for example things related to swipe up gestures, placing controls on bottom part of the screen etc.

You can find more info on following pages:

iPhone X Human Interface Guidelines – you can find more information about human interface guidelines here.
Update apps for iPhone X – read more about updating apps for iPhone X on Apple’s official pages.
Positioning Content Relative to the Safe Area – read more about safe area layout guide and positioning content here.
Building Apps for iPhone X – you can watch Apple’s video here.
Resources (Photoshop, Sketch)

Spread the love

PROGRESSIO