An iOS Developer’s To Do List for Getting Ready for the iPhone X

by Lou Franco

Filed under: iOS and Auto Layout and Constraints

On Tuesday, Apple announced the iPhone X, described as “an iPhone that is entirely screen.” On closer inspection, though, the screen does appear to missing a little something.

We have until November 3rd to get our apps up to date for it. Here’s a guide.

Get Ready

  1. Download Xcode 9:
  2. If it’s before 9/19, you can get iOS 11 by visiting that URL on your phone and downloading the iOS 11 Configuration Profile. This will give you early access to the real release of iOS 11 if you are not on the beta. After 9/19, you can do the update the normal way.
  3. Visit iOS and iPhone X developer guides.
  4. Watch Designing for iPhone X:
  5. You might want to send that link to any designers you work with along with a bottle of something.
  6. Watch Building Apps for iPhoneX:
  7. Contemplate a world where Apple cannot create a watch with a circular display, but will ask millions of developers to design apps to work on a concave polygon.

TL;DR Safe Area

Luckily, Apple has made it pain to develop apps that know where the status bar is, so at WWDC 2017, when they announced a new layout guide, the “Safe Area”, we just assumed that they finally came to their senses and would let us sanely put content directly below the status bar without hardcoding its size.

You can watch these videos to see their suggestions. They all happen to be really useful for developing for iPhone X.

It turns out that the “Safe Area” is how Apple has made it easy to fix all of our notch bugs.

That is, it’s easy if you use auto-layout. If not, and you want to stick with manual layout, there are Safe Area Insets to code against.

In either case, the next step is to go through each of your screens and see what needs to be done. Make sure to check landscape left and right, as that is where problems will more likely surface. We’re usually good about staying way from the status bar, but now there’s an area on the left (or right) to avoid (or embrace) as well.

Never miss a post

Get more tips like this in your inbox