How to support iPhone X resolution

After 2017 keynote today and iPhone X launch i am equally worried as excited about new iphone. This article will help you decide design guidelines or approach on interface designs than technical issues.

As shown in this image by apple on its Human Interface Guidelines for iPhoneX.

It is told here that it will support 3x image extension. But there are 185 points extra at the top as well as considering 414 * 736 points for iphone 7 plus resolution it is 414–375 = 39 points less in width.

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 percent additional vertical space for content.

You can check out resolution comparison here.

How can we possibly design our app for this new design resolution ?

After Looking at possible solution for different UI Problems i found that Safe Area Layout guide introduced by apple with iOS 11 can help a lot.

The safe area of a view reflects the area not covered by navigation bars, tab bars, toolbars.

Note :- Safe area layout guide can be used even if your deployment target is less than iOS 11.

safeAreaLayoutGuide replaces topLayoutGuide and bottomLayoutGuide as a new way to create constraints between your views and a superview.

1. Add a launch image for iPhone X with 1125px × 2436px resolution
2. Make sure your deployment target is iOS 9 and above. This is because safe areas are supported in iOS 9 and above.
3. Go to your interface file, select identity inspector. Enable Safe area as shown below.

1. if you have a uiview pinned to the top of your view you can link its top constraint to safe area rather than superview.
2. Similarly for bottom view give bottom constraint to safe area instead of superview.

If you know how to create programmatic constraint you can use layout anchors to include safe area above your top view. You can thus link your layout to safe area programmatically.

topView.topAnchor.constraint(
+  equalTo: view.safeAreaLayoutGuide.topAnchor
).isActive = true
bottomView.bottomAnchor.constraint(
+  equalTo: view.safeAreaLayoutGuide.bottomAnchor
).isActive = true

Safe Area Insets

You obtain the safe area for a view by applying the insets in this property to the view’s bounds rectangle. If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the edge insets in this property are 0

If you want to calculate the height of top safe area, you can use safeAreaInsets property. These insets can be used to modify the content of views at run time.

UIView *topView;
if (@available(iOS 11.0, *)) {
UIEdgeInsets insets = self.view.safeAreaInsets;
topView = [self createViewWithFrame:CGRectMake(0, insets.bottom , self.view.frame.size.width , 60) withBgColor:WhiteColor];
} else {
// Fallback on earlier versions
topView = [self createViewWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 60) withBgColor:WhiteColor];
}