How to update your app design for iPhone X

Paul Hudson    September 12th 2017    @twostraws

Apple just finished its September 2017 keynote, with a whole barrage of new announcements to help consumers the world over lighten their wallets. But developers get new toys too: the gold master of Xcode 9 just shipped with some new APIs for us to work with, which means that Swift 4 is now final.

Plus, Apple just released 14 new developer videos covering topics such as designing for iPhone X’s notch, updating your app for Apple TV 4K, and face tracking with ARKit.

It’ll take some time to dissect all the improvements, but here are some immediate things to think about:

• Safe areas are your new best friend. The new iPhone X screen has rounded corners plus its notch, which means you need to keep your content well clear of those edges unless you want to risk it being clipped.
• If you’re using storyboards, you should open them now, go the file inspector, then select the Use Safe Area Layout guide checkbox – that will switch you over to the new system.
• If you’re using navigation controllers and tab bar controllers, ideally with Auto Layout, it looks like the notch mostly isn’t your problem – things will just behave as expected.
• One important exception: you really need to use the new navigationItem.searchController property when presenting search controllers, so the text entry box stays clear of the safe areas.
• The status bar is now no longer fixed at 20 points in height, so double check you haven’t hard-coded that figure anywhere. If your app hides the status bar to reclaim space, Apple are asking you to politely reconsider your choice because let’s face it: there wasn’t much you could put up in that notch anyway.
• Apple is saying we shouldn’t attempt to hide the notch, even though bizarrely that’s exactly what Reminders currently does.
• The home indicator can be configured to automatically disappear after a few seconds and will reappear when the user touches the screen. Apple are suggesting this should be used sparingly – see code sample below.
• We all need to make sure we reference biometric authentication correctly: if Face ID is available we don’t say “Touch ID” and vice versa – again, see the code sample below.
• The new CPU appears to be scorchingly fast, so it will be interesting to see how it gets used. Actually, no – animated poop everywhere is the answer.

There are some new APIs for us to start using as soon as you’ve downloaded the Xcode 9 GM.

For example, you can override prefersHomeIndicatorAutoHidden() in your view controller and make it return true to have the home indicator hide itself after a few seconds, like this:

override func prefersHomeIndicatorAutoHidden() -> Bool {
    return true
}

You need to implement that on every view controller that should hide the home indicator. There’s an accompanying setNeedsUpdateOfHomeIndicatorAutoHidden() method to force UIKit to re-read the auto-hide setting.

There’s a new biometryType property of LAContext that lets us read whether the device supports Face ID, Touch ID, or neither, like this:

let context = LAContext()

if context.biometryType == .typeFaceID {
    // Face ID
} else if context.biometryType == .typeTouchID {
    // Touch ID
} else {
    // Stone Age
}

Apple also released a big collection of face tracking APIs for ARKit, although because they are supported only on iPhone X I’m not in a position to test out some code for them – yet!

Right now my best advice is this: fire up Xcode 9, launch the iPhone X simulator, and just start getting used to it. The notch at the top is strange at first (and will cause all sorts of status bar problems, I'm sure!), but the rounded corners are particularly problematic – you need to respect the safe areas, otherwise your views will get clipped.

If you’ve spotted something not in the list above, please tweet me @twostraws or email paul@hackingwithswift.com.

Tweet