iPhone X features the stunning 5.8-inch Super Retina display, enabling even more immersive app experiences. Start testing your apps now to make sure they are ready to take advantage of the Super Retina display by respecting safe areas, supporting adaptive layouts, and more. Let's learn how to design your app or game to look and feel great on iPhone X.
1. iPhone X Screen Size
In portrait orientation, the width of the display on iPhone X matches the width of the 4.7" displays of iPhone 6, iPhone 7, and iPhone 8.
The display on iPhone X, however, is 145pt taller than a 4.7" display, resulting in roughly 20% additional vertical space for content.
2. iPhone X Cutout (notch)
iPhone X features a cutout (or notch) at the top of the screen to accommodate the front facing camera, speaker, microphone and the new Face ID sensors.
3. Positioning Content Relative to the Safe Area
Safe Area is a layout guide. Safe areas help you place your views within the visible portion of the overall interface. Apple introduced the topLayoutGuide and bottomLayoutGuide as properties of UIViewController way back in iOS 7. They allowed you to create constraints to keep your content from being hidden by UIKit bars like the status, navigation or tab bar. In iOS 11, Apple is deprecating the top and bottom layout guides and replacing them with a single safe area layout guide.
Use these safe areas to make sure your app works properly with the new dimensions of iPhone X. Apps with custom layouts can also easily support iPhone X, especially if your app uses Auto Layout and adheres to these guidelines.
To use the new safe area, select Safe Area Layout Guides in the File inspector for the view controller, and then add constraints between your content and the new safe area anchors. This prevents your content from being obscured by top and bottom bars. Constraints to the safe area are converted to Top and Bottom when deploying to earlier versions of iOS.
Here is the simple reference as a comparison (to make similar visual effect) between Top and Bottom Layout Guide and Safe Area Layout Guide.
Top and Bottom Layout Guide
Safe Area Layout Guide
Creating Constraints in Code
If you create your constraints in code use the safeAreaLayoutGuide property of UIView to get the relevant layout anchors. Let’s recreate the above Interface Builder example in code to see how it looks:
Assuming we have the green view as a property in our view controller:
private let greenView = UIView()
We might have a function to set up the views and constraints called from viewDidLoad:
private func setupView() {
greenView.translatesAutoresizingMaskIntoConstraints = false
greenView.backgroundColor = .green
view.addSubview(greenView)
}
Create the leading and trailing margin constraints as always using the layoutMarginsGuide of the root view:
let margins = view.layoutMarginsGuide
NSLayoutConstraint.activate([
greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
])
Now unless you are targeting iOS 11 only you will need to wrap the safe area layout guide constraints with #available and fall back to top and bottom layout guides for earlier iOS versions:
if #available(iOS 11, *) {
let guide = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
])
} else {
let standardSpacing: CGFloat = 8.0
NSLayoutConstraint.activate([
greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
])
}
3.1 Status bar
Allow the proper amount of space below the status bar based on the safe area. Avoid assuming a value for the status bar height, as it may cause your content to be obscured or mispositioned below the status bar.
3.2 Rounded display corners and sensor housing
Keep content and controls away from the corners and sensor housing to allow your app to fill the screen without getting clipped.
3.3 Home Indicator
Make sure your app doesn’t interfere with Home Indicator, so your content and controls remain clearly viewable and tappable at all times.
3.4 Screen Edge Gestures
The display on iPhone X uses screen edge gestures to provide access to Home screen, app switcher, Notification Center, and Control Center. Avoid interfering with these gestures. Move controls into the safe area and adjust your UI. In rare cases, you may consider using edge protect, in which the first swipe invokes the app-specific gesture and a second-swipe invokes the system gesture.
4. Support Various Aspect Ratios and Orientations
4.1 Check that your code handles a different screen aspect ratio
Many apps position content based on a particular width, height, or aspect ratio. Verify that your content scales and is positioned correctly.
4.2 Test your app in landscape orientation
While you may discover some issues in portrait orientation, the majority of issues will likely appear in landscape orientation. Be sure to test all of your UI with the device rotated, both to the left and to the right.
4.3 Scale videos accordingly
Video content on iPhone X should fill the display. However, if this results in any cropping on the top or bottom, or too much cropping on the side, the video should be scaled to fit the screen. While AVPlayerViewController manages this automatically, custom video players based on AVPlayerLayer need to select an appropriate initial video gravity setting and allow users to switch between aspect and aspectFill viewing modes based on their preference.
5. Update for Face ID
Verify your Touch ID code works for Face ID. If your app currently uses Touch ID, update text strings to refer to Face ID when running on iPhone X — for example, "Sign in with Face ID".
References