The 5 Most Important Changes You Need to Make for the iPhone X
If you’re like me, you’re excited for the launch of the iPhone X on November 3 — and working hard to make sure your app looks great come launch day. There’s lots to navigate. Your app can look unprepared for Face ID permissions. You actually don’t have to use Launch Storyboards if it requires unnecessary refactoring. Not to mention, it’s super easy to miss uploading iPhone X specific photos for your App Store build.
I led the upgrade process at Chime, and I’d like to help you avoid all the pitfalls we ran into along the way.
Before You Begin: Download Xcode 9.1
The first thing you’ll want to do is download Xcode 9.1. This is the most up-to-date Xcode with the best functioning simulator for the iPhone X. And yes, the iPhone X is going to run on iOS 11.1, so it’s definitely worth the download. Pro tip: if the download is taking a while, have a friend nearby AirDrop it to you!
1. Include a Launch Storyboard or a Launch Image
Once I had the beta installed, my first order of business was to make sure our app wouldn’t run in the dreaded “Compatibility Mode”. This is Apple’s way of porting apps that don’t compensate for the notch or bottom bar onto the iPhone X. It looks something like this:
Regardless of how you feel about the Notch, it’s not a good look for your app. Let’s make sure that doesn’t happen to you.
To make sure your app takes up the entire screen on the iPhone X, simply include a Launch Storyboard or a Launch Image that’s 1125 x 2436 pixels.
If you’re not already using Launch Storyboards, don’t worry — it’s not hard, but there are some pitfalls. This article is a great resource if you haven’t made the switch yet.
Apple was really pushing for the Launch Storyboard, but we don’t use storyboards for the Chime app. So I decided to simply add the Launch Image, and it works just fine. No need to sweat a refactor just to get the splash screen to look right.
Ah, that’s better. Now that your app’s full screen, let’s setup Face ID.
2. Set Up Face ID
If your app doesn’t use Touch ID, then you probably don’t need to worry about Face ID. If you do use Touch ID and expect it to “just work” as Apple has said in their keynotes, I have some good news and I have some bad news.
The good news is your app won’t crash if you have Touch ID permissioning setup correctly and the user uses Face ID.
The bad news is that Face ID is permissioned like camera and bluetooth. So the first time you use it in your app, a dialog appears with this message:
“This app was designed to use Touch ID and may not fully support Face ID”
This dialog makes your app look completely amateur. To avoid this default text you’ll need to add the key NSFaceIDUsageDescription to your info.plist and give a reason why you’re using the Face ID. Here’s my setup below.
If you’d like to read more on this issue, here’s the link to Apple’s forums.
Whew! So you dodged that bullet, but we’re not in the clear yet. Let’s clean up your UI with a couple of helpful tips on how to detect the iPhone X.
3. Use Safe Area Insets
Now is a great time to completely test your app. Take a look at every screen to make sure it looks right with the new screen height, the bottom bar, and the top notch.
I’m sure you’ll have some changes to make and there are two specific strategies I used to make these changes (relatively) painless.
The first strategy was to use the new safeAreaInsets that you can call on any view. This Use Your Loaf article covers all the different values that safeAreaInsets can be in any orientation.
You’ll only want to use safeAreaInsets in viewDidLayoutSubviews, if you use it anywhere else it only returns zero. That means you’ll likely have to add this function to a few of your view controllers.
Since safeAreaInsets is also only available on iOS 11, you’ll be forced to include an available check in Swift. Here’s what my implementation looked like in one of my view controllers:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
//iPhone X specific layout code using SnapKit
logoutButton.snp.remakeConstraints { (make) in
make.left.right.equalTo(view)
if #available(iOS 11.0, *) {
let inset = view.safeAreaInsets.bottom == 0 ? 15 :
view.safeAreaInsets.bottom
make.bottom.equalTo(view).inset(inset)
} else {
make.bottom.equalTo(view).inset(15)
}
}
}You’ll want to use safeAreaInsets as much as possible to future-proof your app against new phones.
4. Detect the iPhone X
Even with safeAreaInsets, there are simply times when you won’t want to use the insets and instead will just want to detect if you’re on an iPhone X.
You can put the following in a file to detect if you’re on an iPhone X or not.
import UIKit
struct DeviceType {
static var isIPhoneX: Bool {
if #available(iOS 11, *) {
if let insets =
UIApplication.shared.delegate?.window??.safeAreaInsets {
if insets.top > 0 {
return true
}
}
}
return false
}
}I had to use DeviceType.isIPhoneX when I replaced our touch symbol with a face. We wanted to make it clear to our users that the Chime app works with Face ID.
DeviceType to switch these images.5. Upload iPhone X Images in iTunes Connect
I’m gonna be honest with you here, I missed adding iPhone X images the first time we submitted our app. It wasn’t until my coworker pointed out someone making iPhone X images on Twitter that I realized I had missed out on submitting photos.
Let’s make sure you don’t have to submit twice.
When you create your new build in iTunes Connect, scroll down to the images and you’ll see these options:
Go ahead and tap on the optional iPhone X images and you’ll see that you can add 5 extra images to your app.
Although they are optional, you’ll want to give your app the best possible chance to stand out on the iPhone X. So be sure to go that extra mile and support the optional photos.
You’ll need 5 new screenshots, this is the resolution.When you ask your designer for 5 new screenshots for the iPhone X, you’ll want to show them the simulator renditions of your app so things stay accurate. And once again, here are the image sizes from Apple’s site:
Once you’ve got those images, throw them into iTunes Connect and save.
Wrapping it up
Well, that was quite the adventure. I hope this article helped you avoid some of the pitfalls I faced while updating your app for the iPhone X. You’ve avoided “Compatibility Mode”, correctly supported Face ID, updated your UI, and added some killer screenshots.
Congratulations! You’ve done it. You’re ready for the iPhone X to launch.
