How to prepare your apps for the iPhone X
The iPhone X is here, and its all-screen design changes the way your apps will look. We’ll show you how to alter your existing apps to fit the 'future of the iPhone'!
Celebrating the iPhone’s tenth anniversary, Apple just released the iPhone X. But how does its new proportions and different screen shape affect existing iOS apps? Will an existing app in the store today work properly on the iPhone X with its weird display shape?
We break it down for you.
The problem areas: navigation and tab bars
On iOS11, the navigation bar (the bar on the top) is already significantly taller than it was on iOS10. On the iPhone X it’s even taller, and so is the tab bar on the bottom.
Apple’s own apps always make use of the standard UINavigationBar and UITabBar, which will both automatically make adjustments for the iPhone X. They also paid attention to detail to make sure that the content is never obstructed by the screen’s rounded corners, another first on an iPhone.
But what does this mean for us as developers, and for our apps?
Apple has released two new videos to demonstrate: Designing apps for iPhone X and Building apps for iPhone X. Based on those, it becomes clear that adapting existing apps to make full use of the iPhone X display will require extra work for us developers.
Luckily, the latest Xcode 9 includes an iPhone X Simulator. So to take a first look at what an iPhone X does to our apps, we took a version of our VTM application, built using the iOS10 SDK, and tested it on the simulator.
Similar to when Apple first released the iPhone 5 ( the first larger screen size), the existing app is automatically centered on the display, with the top and bottom simply shown as black. Of course, this doesn’t look ideal, but at least this means that people can purchase an iPhone X knowing that their favourite apps won’t be messed up.
As soon as you start building apps with the iOS 11 SDK, Apple (unsurprisingly) expects you to take full advantage of the iPhone X screen. A quick (and dirty) fix would be to always make the status bar on the top black, similar to how it used to be pre-iOS7. However, this is against Apple’s human interface guidelines:
“Don’t mask or call special attention to key display features. Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.”
So obviously, we’re not going to do that.
Instead we’ll go the official route and use a new feature in Xcode 9, called Safe Area Layout Guides, to update the layout of our UI so that it looks great on the iPhone X — without breaking things on other iPhone devices.
But there’s a catch (isn’t there always). To use this feature, we have to drop support for iOS8!
Right now, most of our apps still support iOS8 — for some, we event chose to keep supporting iOS7. This means our clients will have to make a choice: either submit applications using the iOS10 SDK, not optimised for iPhone X, for as long as Apple allows it; or only support iOS9 and up and have an app optimised for iPhone X. The number of pre-iOS9 users vs the number of iPhone X users will no doubt be the deciding factor here.
Of course, adaption of new iOS versions tends to go up quickly, and we would prefer to optimise — it would be a shame not to use that screen fully!
So we tried building two of our apps, using the iOS11 SDK, to find the easiest way to adapt them for the iPhone X.
And our next news item is…
The first app we tried to adapt is the one we built for De Tijd, a popular Belgian newspaper.
Let’s start by running the app as-is on the iPhone 8 and the new iPhone X side by side. The ‘Mijn Tijd’ section makes use of a UINavigationController with a standard UINavigationBar.
On the top, everything looks like it should. Because the ‘Mijn Tijd’ section uses a standard UINavigationBar, iOS automatically lays out the navigation bar title and buttons like it would for Apple’s own apps.
On the bottom, however, we’re seeing a pretty big gap. This is because Apple has introduced a safe zone, in which content can be shown without being cut off by the rounded corners or the indentation at the top of the screen. This zone appears to be 44pt high on both the top and the bottom.
Because the tab bar is attached to the bottom of the view, it is now being attached to the bottom of the safe zone. We could easily fix this by making the tab bar taller and moving it down. However, if we were to do that, we would also make it taller for all other iPhone models, which is of course not what we want.
Enter Safe Area Layout Guides, a new feature in iOS11. By enabling it, a view will now receive a Safe Area which can be used to attach constraints.
This Safe Area is the size of the safe zone on iPhone X and the size of the entire screen on all other iPhones. By attaching constraints to the Safe Area, we can now create a situation that works for both types of displays.
We create a new view that is 44pt larger than the height we want our tab bar to be. We attach it to the bottom of the Safe Area and give it an offset of -44. Next, we place the actual tab bar inside this new view and align it to the top.
The result is that the new view will now be rendered 44pt below the safe zone on the iPhone X, and 44pt below the screen on other iPhones. When we give this new view the same background color as our tab bar, the result on both iPhone 8 and iPhone X looks like this:
Exactly what we need!
More custom components, more fun?
Our app for De Tijd uses a lot of standard components, making these alterations easier. This is why we tried a second example: our popular VTM application, which uses mostly custom components.
Let’s take the first screen, the ‘Ontdek’ section, as an example. Here we have both a custom navigation and tab bar, which either fade in or have a different blurriness based on the position of the content. Here, we ran the app as-is.
You can immediately see a few different issues in this application. The custom top and bottom bars have the same size on the iPhone X and on the iPhone 8. That makes sense since the system won’t make any automatic adjustments here, but it doesn’t exactly look pretty.
Just like before, we’ll solve this by enabling the Safe Area Layout Guide for this screen.
We attach our tab bar view to the bottom of the Safe Area, but this time without an offset. Additionally, we’ll make the visual effect view inside (which creates the blur effect when content scrolls below it) 44pt larger. This way, it will draw 44pt outside the tab bar view and thus 44pt outside of the Safe Area.
For the navigation bar, we’ll do the exact same thing but in the other direction.
After making these adjustments, we finally have the expected result. Our top & bottom are still the same height and the VTM logo and search button are nicely centered in the top bar.
Where do we go from here?
As we’ve seen from our test cases, updating existing apps isn’t hopelessly complicated but will require different degrees of effort based on the UI components used. Luckily, the iPhone X isn’t released immediately like the iPhone 8; with a release in early November, Apple has given us developers some time.
For us, the logical next steps will be to test each screen of all our applications, running all them through the necessary layout changes to properly use the Safe Area Layout Guide.
We expect to see plenty of these updates in the app stores soon — it would be a shame to offer iPhone X owners messed up toolbars and views.
Are you planning to update all of your apps for the iPhone X right away, or will you be holding off?