iPhone X Development Considerations
Though the iPhone X may not have been the greatest kept secret prior to its September 12, 2017 announcement, it is still a radical departure from the norm for iOS developers and users. It turned out that many of the leaked pictures were quite real. iPhone X is a new breed of iPhone; or maybe, it is THE new breed of iPhone.
The first thing that jumps out to users with the iPhone X is the notch at the top. It’s there for a reason — to house the fantastic new sensors included with the device. It can, however, be off-putting to some, which presents a challenge for developers. Moving beyond the northern peninsula, the corners are very rounded. This is a familiar feature with the newest line of high-end Samsung Galaxy devices, but the corners of the iPhone X are curved at a whole new level. Lastly, the home indicator at the bottom is a critical iOS system UI element, so this part of the view is nearly off-limits. It seems that Apple is taking a larger role in the development and design process by introducing hardware that is so aggressively styled. Some design approaches will simply look funny.
Developers had some interesting adjustments when the 4” iPhone 5 was introduced, but the iPhone X will likely prove to be the greatest adjustment. It is more than a change in aspect ratio; it is a significant change in geography.
Specs of Note
Aside from the sensor housing, curved corners, and home indicator, there are some specifications of which we should note.
iPhone X does not use the familiar Touch ID; rather, it used Face ID. This is the native Biometric Authentication method for the iPhone X, and taking advantage of it is quite manageable using the Local Authentication framework. The following is an example allowing users to authenticate using biometrical means in an app.
let laContext = LAContext()let reasonString = "We'd like to authenticate you as a user in the app."var authError: NSError?if #available(iOS 8.0, *) {if laContext.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &authError) {laContext.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, localizedReason: reasonString) { success, evaluateError inif success {// It worked!} else {// Didn't work - error hunting time}}} else {// Show error and/or alternate authentication method}} else {// Fallback on earlier versions}
Moving from the new biometric authentication on the iPhone X to the screen, we see that it is using a 5.8” Super Retina display. This requires the use of 3x image assets which can be placed manually in the app or the use of PDFs.
For comparative purposes, the following illustrates the size of 4”, 4.7”, 5.5”, and 5.8” iPhones in points and in pixels.
4” iPhone
320 x 568 points
640 x 1136 pixels
4.7” iPhone
375 x 667 points
750 x 1334 pixels
5.5” iPhone
414 x 736 points
1080 x 1920 pixels
5.8” iPhone X
375 x 812 points
1125 x 2436 pixels
Some more specs that should be noted are as follows.
The status bar 44 points versus 20 points. The toolbar in Portrait is 83 points versus 44 points. The toolbar in Landscape is 53 points versus 44 points. Layout margins in Landscape are 64 points compared to 20 points on other iPhone models.
Managing iPhone X’s Challenges
Apple did provide developers with a new tool for laying out UIs in iOS apps, and it is called the Safe Area. On iPhone 5 through iPhone 8 Plus, the safe area is the area of the screen minus the status bar. It’s a bit more complicated on the iPhone X. In portrait mode on the iPhone X, the safe area excludes the status bar and slightly below in addition to the area of the home indicator. In landscape, however, on the iPhone X, the area around the sensor housing and status bar region, an equal sized area on the opposite side, and area at bottom, just a bit taller than the home indicator are excluded. Apples reason for leaving these area in the danger zone is due to the likelihood of visual obstruction, user interaction interference, and the possible conflict with iOS system gestures.
It is generally a best practice to keep within the safe area; however, it can, is, and will be done by some developers for any number of reasons. Keeping in the safe area, the developer has a rectangular view with which to work that will feel like the good old views of prior models. In other words, a UITableView will fit well and display nicely from corner to corner; although, there won’t be any cells running into the curved corners — outside of the safe area.
There is some design appeal in the challenges presented with the iPhone X. It is a tremendously spacious screen, and the corners of the screen are curved so perfectly with those of the device itself. Designing and building to take advantage of iPhone X’s entire screen can surely be done.
The previously mentioned UITableView will be partially obscured at the bottom, top and at the sensor housing point. As long as all cells can be viewed, and interaction is fully possible, it can work. An idea for working with this challenge while using the entire iPhone X screen is to mess with the contentOffset of the UITableView. Begin the UITableView so that the first cell is below the base of the sensor housing as opposed to the true top of the view. Though, it will scroll to the true top. Then, at the bottom of the UITableView, allow the last cell to be scrolled to a point comfortably above the home indicator. This way, all cells will be seen and may be affected by the user, and the entire display is used. It is important, however, to make a decision on displaying the status bar.
A tricky challenge, though, is presented by the curved corners. It almost seems that UICollectionViewCells should have a complimentary radius as they enter and exit the corners. This, however, is a choice for the designer.
iPhone X relies on gestures for use of the device to a greater degree than other iPhone models, as there is no Home button. These gestures include swipes in from the top, bottom, and sides of the screen. Building in UIGestureRecognizers that conflict with those iOS system recognizers will cause problems. The first generally accepted and effective approach is to bring the app’s swipe gestures in from the edges. The other, which is likely easier, is to use preferredScreenEdgeDeferringSystemGestures(). Here, the first gesture will be received by the app, and the next will be received by the operating system. For example, if an app involves an up-swipe from the bottom, a user will need to up-swipe twice to initiate interaction with the home indicator. The first swipe will go the the app’s UIGestureRecognizer.
Final Recommendations
Managing a good UI on iPhone X as well as other iPhone models will take some testing, planning, and some constraint outlets. It’s a quick and reliable way to ensure that values are set specifically for the iPhone X and default to fit other iPhone devices.
Testing a UI on iPhone X will require careful attention to portrait and landscape, and all views should be tested in both modes. This is going to be particularly important for an app that was not developed for the iPhone X or was developed prior to the availability of an iPhone X simulator.
In conclusion, the iPhone X is a bold statement by Apple, and it is likely the shape of things to come. Personal opinions may vary on the peculiarities, but one thing is for sure: developers can do a lot with design to accent or hide the aggressive styling of the iPhone X. It will be very fun to see new products come to market in 2018 that utilize the iPhone X screen in new and creative ways.
