Preparing Your App for iPhone X and iOS 11
A new layout guide may call for some small edits to your app
Now that Xcode 9 GM is available for download it is an excellent time to begin prepping your app for the launch of the iPhone X.
Safe Area Layout Guides
With the new rounded edges of the iPhone X and the always present (unless you force it to hide) bottom indicator to allow dismissing your app, there are a few issues that you may experience when running your app on this new screen. This is where Apple’s new iOS 11 Safe Area Layout Guides come in handy, which will help avoid clipping views and having iOS UI elements like the bottom indicator cover important user content. Storyboards and Xibs pre-iOS 11 will need to manually turn this layout guide on, but new views should automatically enable this.
Fixing A Real App
In order to demonstrate how to make some of the common changes you’ll need to make in preparation for the iPhone X, I’ll step through how I solved issues that presented themselves in iOS 11 on one of my own apps, My Voice, an app to sign White House Petitions.
Here’s the main screen of the app running in the iPhone X simulator. It’s a fairly simple UITableView and the cells properly sized in portrait mode. The one issue you will notice is at the bottom of the screen. My tableview content is stopping at the safe area where the indicator lives. According to Apple’s guide to designing for the iPhone X:
Vertically scrolling views should extend all the way to the bottom of the display rather than being constrained by the safe area.
Let’s go ahead and fix this issue below.
Common Issue #1: Vertically Scrolling Content and the Bottom Indicator
The first step to fix this issue is by going into the .storyboard file that contains my View Controller, tapping the top level View Controller object that is managing my tableview, then enabling the Use Safe Area Layout Guides option in the File Inspector.
Now there is a Safe Layout object present in the View Controller hierarchy and when viewing the constraints on my TableView I can now see that they are adjusted to use this guide:
The Bottom Space to: Safe Area is the one I need to adjust. This is telling the TableView to sit on top of the Safe Area, which is the white space at the bottom of the screen which houses the bottom indicator. I’m going to change that constraint, and instead of being set to the Safe Area, I’m going to set it to the Superview:
Now the content is showing up correctly! Note: even though the content is behind the indicator, this does not block normal tap gestures, so didSelectRow will work normally.
Alternatively, if you have a static feature, such as a button or page indicator sitting at the bottom of your View Controller, and the bottom indicator is covering it, you will want to reverse this logic. So instead of having the view in question’s bottom constraint equal to the superview, it should be equal to the safe area.
Common Issue #2: UIBarButtonItem Frames
In the previous screenshots I removed this problem to focus on one thing at a time. As you can see below, I have a right navigation bar button, but it is incorrectly sized.
This only occurs in iOS 11 because now the navigation bar is using AutoLayout, so just setting a frame for my button is not enough. This solution is a fairly simple one. How I setup my UIBarButtonItem is by using using initializing it with a customView
let plusButton = PlusButton()
plusBarButtonItem = UIBarButtonItem(customView: plusButton)Here, plusButton is just a subclass of UIButton. All I need to do is set a width and height constraint for the button with just a couple lines of code:
plusButton.widthAnchor.constraint(equalToConstant: NavigationBarButtonWidth).isActive = trueplusButton.heightAnchor.constraint(equalToConstant: NavigationBarButtonHeight).isActive = true
Now I get the results I want:
Perfect! Now my app is ready to be displayed on the iPhone X! Hopefully the adjustments to your own apps are just as simple.
For even more on this subject, here are a few resources to look at:
