Published: March 29, 2018
6 min read
Last updated: May 2, 2022
📲 Changes to Storyboards
🤳 Safe Area Layout Guide
💻 Safe Area Insets
🔋 Status Bar
👨💻 Navigation Bar
🔎 Search Controller
📱 Launch Images
It’s impossible to deny that Apple Special Event became the most awaited annual event in the mobile world. Of course, it would be even more thrilling if we hadn’t almost 100% accurate rumors ahead of time. Yet, anyway, new products still amaze and excite us. And that’s why we love Apple!
Last year the company presented many great products including iPhone 8 and iPhone 8 Plus, Apple TV 4K, Apple Watch Series. However, the headliner of the event was iPhone X. Undoubtedly, the most eye-catching device’s feature is a brand new design with an edge-to-edge screen.
iPhone X mockup (image by Sandor)
Yet, while for users it is a new fascinating experience, for developers it turned out to be a tough task. Or — let’s not be too pessimistic — a tricky challenge. Here’s what I’m talking about:
However, there is always a way out 😊
Together with our iOS developer Daniil Tyshchenko we decided to share with you several useful tips on updating your app for iPhone X. Let’s get it started!
Since iPhone X has a bit different screen design, old-school storyboards may not work as well as they used to. When developing a mobile app for this device, you should take into account following points:
Note: if your app works only in the portrait mode, top and bottom layout guides are still applicable. Yet, we strongly recommend to avoid them and work with the safe area instead.
How to reflect it in your storyboards?
Starting from iOS 11 UIView has only one property — safeAreaLayoutGuide. This property replaced well-known topLayoutGuide and bottomLayoutGuide. When creating apps for iPhone X, it’s deprecated to use old properties so try to use the new one instead.
Safe Area for iPhone X
However, safeAreaLayoutGuide is supported only starting from iOS 11. Thus, there are 2 options when updating your app for iOS 11:
It’s worth mentioning that every UIView has safeAreaLayoutGuide and as it is written in the Apple documentation:
“For the view controller's root view, the layout guide accommodates the status bar, other visible bars, and any additional insets that you specified using the additionalSafeAreaInsets property of your view controller. For other views in the view hierarchy, the layout guide reflects only the portion of the view that is covered by other content. For example, if a view is entirely within the safe area of its superview, the layout guide edges are equal to the edges of the view.”
The same is true for the next paragraph as well.
The key idea: always try to use this property to prevent overlapping of status bar, home indicator and so on with your views and actions.
This property is useful when working with events that need to be processed dynamically.
An important point here is that in the usual UIViewController's lifecycle this property can still be (0, 0, 0, 0). So if you have any subviews that are based on values of this property, all the changes must be processed inside the following UIViewController's method — viewSafeAreaInsetsDidChange.
As safeAreaLayoutGuide, this property is also available starting only with iOS 11. Therefore, if you want to keep compatibility with earlier versions, we recommend using the following snippet:
The idea behind this point is simple as that: don’t use any magic hardcoded numbers (like 20 in the case with the Status Bar).
Status Bar in iPhone X
If you need to find out the height of the status bar for any reason, we can offer you this workflow:
Avoid hardcoded numbers here as well. Specifically, don’t use the value 44 (or 64, if together with the Status Bar) since the Navigation Bar can have different height. When? There are plenty of possible options. For example, in the Landscape mode, or when it has searchController or supports “large title” etc.
Navigation and Status Bar in iPhone X
By the way, the same is true for the Status Bar.
We strongly recommend to use Auto Layout together with SafeArea so as not to overlap the Navigation Bar. Yet, if you still need to know the height of the Nav Bar, you can do it like that:
With the release of iOS 11 Apple added a new property — searchController — to the Navigation Bar. Now if you use the SearchBar with TableView and want to make it look good on iPhone X, you should use this new property.
Yet, as you might have already guessed, searchController is also available starting from iOS 11. Therefore, your code should look as follows:
If for any reason you use Launch Images, then most likely you don’t have an icon for iPhone X. To fix this, you should:
Assets.xcassets, right click on middle pane, select
App Icons & launch Images ->
New iOS Launch Image. Then move the old
LaunchImage.launchimage images to the new one, and add the image size with
1125×2436 px for the iPhoneX.
Guide: How to Find and Hire Expert Remote iOS Developers for Your App?
These were the most significant changes that affected adaptation for iPhone X. Consider them when creating a mobile app for this device and then everything should go smoothly!
We hope this article was useful. Any questions left about iPhone X update? Just hit the button below and we’ll be there to help.
Was it helpful?
How to Make your React Native Application Accessible to ALL, not just to MANY
Which Payment Providers should I use for my SaaS Product?
What makes React the best option for SaaS Apps?
Our clients say
They were a delight to work with. And they delivered the product we wanted. Stormotion fostered an enjoyable work atmosphere and focused on delivering a bug-free solution.
David Lesser, CEO