Our brand new home on the brand new iPhone

Updating your app for the iPhone X

Published in

TheFork Engineering Blog

5 min readNov 2, 2017

As you most certainly know, Apple is finally releasing the iPhone X across multiple countries on November, 3rd, with an unprecedented demand by customers. At TheFork, the European leader restaurant booking service, we have been spending some time to update our iOS application in order to be fully compatible with the new device in time for its release.

During this process, we found a lot of interesting tips and tricks we would like to share with you.

What’s different with the iPhone X?

The iPhone X presents a bunch new important interface changes over the previous iPhone iterations:

a non-20-point status bar height, a first since the introduction of the original iPhone in 2007
a new screen size, with a resolution of 2436 by 1125 pixels and aspect ratio of around 19:9, differing from the 16:9 found in iPhones of the previous generation
this translates to a pixel area of of 812 by 375, i.e., the same screen width, in points, than the iPhone 6 but with a new pixel density, which will need “@3x” resolution images
the presence of new regions, at the top and at the bottom of the screen, in which the iPhone’s infamous “notch” and other UI elements can overlap to your app’s. This includes the handle, which replaces the Home Button

What are the challenges?

As a result, most developer will need to perform a number of interventions to adapt their apps — interventions which might recall you those needed for iOS 7 in 2013.

The hardest challenges, in particular, will be faced by those relying on hardcoded 20-point status bar sizes and/or on custom view components which did not take into account top and bottom layout guides. Truth to be told, topLayoutGuide and bottomLayoutGuide are now deprecated in iOS 11 but if your app already makes use of this API, the work required to make your app comply with iPhone X will be less cumbersome.

How to

As mentioned, topLayoutGuide and bottomLayoutGuide are now history, with Apple now suggesting to “use the safeAreaLayoutGuide property of UIView instead”.

Via Storyboards

To enable the safeAreaLayoutGuides on your Storyboards, double check that “Use Safe Area Layout Guides” is turned on in the File Inspector panel.

Next, for each constraint touching the top or the bottom of the screen, you’ll have to make sure that you set it up using the “Safe Area”. You can check this information by clicking the arrow on the right of the constraint value.

If you want to modify an existing constraint, just select it and pick the Safe Area.Bottom (or Area.Top) as the First or Second item as shown in the image below.

Please note that Storyboards in Xcode 9 natively support safe layout guides and, most notably, will manage for you the compatibility mode with older iOS versions. That means that, without further changes, your app will fallback to the traditional bottom layout guide on older phones.

Programmatically

Using Autolayout

In case your app uses AutoLayout, the best way of complying with the safe areas is to employ the anchors provided by safeAreaLayoutGuide.

Let’s assume you have a button at the bottom of your view that you don’t want to be overlapped by the native “handle”. You could then write:

myButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, multiplier: 1.0)

Since safeAreaLayoutGuide is not available in iOS 10 or earlier, we’ll be adding an extension on UIViewController and/or UIView to expose an API usable on both older and newer versions of iOS alike.

Dynamic Changes

There are cases in which you might want to update your insets after an event. For instance, when your view has not been loaded yet, the safeAreaInsets could still be empty. Also, when your interface rotates, the insets will change according to the position of the “notch”. You can also have your code alter the safeAreaInsets dynamically by using the additionalSafeAreaInsets.

In all the above scenarios, the callback method viewSafeAreaInsetsDidChange on UIViewController, or safeAreaInsetsDidChange on UIView will be invoked. You can then check the new value and update your constraints or frames accordingly.

Manual Layout

In case you’ve not chosen AutoLayout you can still use the safeAreaInsets property on UIView and layout your subviews as needed.

If your code needs to be backwards compatible, and that your layout implementation is the viewController, you could add an extension to UIViewController and add a compatibleSafeInsets computed property that:

in case of iOS 11 or later, returns the view’s safeAreaInsets
in case of iOS 10 or earlier, returns custom UIEdgeInsets created with the values of topLayoutGuide and bottomLayoutGuide

For instance, you could use the snippet above as follows:

We’re using here viewDidLayoutSubviews instead of viewSafeAreaInsetsDidChange for sake of preserving the compatibility with older systems, as the latter won’t be called on iOS 10 or older.

Please note that, unlike safeAreaInsets, which is an UIView property, the old layoutGuide API is only available on UIViewController.

Conclusion

We hope your transition to the new iPhone X screen proceeds as smooth as possible. In our case, that took 5 full days, testing included, for adjusting 20+ different screens while preserving the compatibility with iOS 10 devices.