如何为Apps支持iPhone X分辨率或屏幕尺寸？

Question

After 2017 keynote today and iPhone X launch i am equally worried as excited about new iphone. This question is more about user interface, design guidelines or approach on interface designs than technical issues.

My question is how to support the 1125px × 2436px (375pt × 812pt @3x) resolution ?

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.

You can check out resolution comparison here:- https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions .

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

Some problem scenarios:

How to support:

1. horizontal imageviews scaling the whole width of the device and a fixed height.
2. ImageViews scaling whole width and height (like full page product images in ecommerce apps).
3. There is extra 185 points height which will show a lot of blank space if i show a limited content on the page. for example, How do i design a view that is 400 pixel in height and scaling whole width. Should i keep it top aligned centre aligned vertically ?

I think 185 points is a lot of real estate for height. We need to reconsider a lot of designs and screens. How can we design and address these scenarios? i hope my question is clear enough now.

My Personal opinion:- No matter how tough or messy it is, End user experience is going to be better and bigger when we get used to this resolution.

Please share awesome techniques and design process. Cheers !!!

Answer 1

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.

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. Go to your interface file, select identity inspector. Enable Safe area as shown below.

3. if you have a uiview pinned to the top of your view you can link its top constraint to safe area rather than superview.

4. 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

UPDATE: Another scenario - Suppose you have a UIView at top of your screen. you want this view to start below the notch in iPhoneX. We need to calculate top margin on all iOS 11 devices and devices below iOS 11 as follows:-

if (@available(iOS 11, *)) {
        UIWindow *window = UIApplication.sharedApplication.keyWindow;
        toppadding = 0.0;
        if (window.safeAreaInsets.top > 0)
        {
            toppadding = window.safeAreaInsets.top - 20;
        }
        //        CGFloat topPadding = window.safeAreaInsets.top;
        bottomPadding = window.safeAreaInsets.bottom;
        self.navigationViewTopConstraint.constant = toppadding;

    }
    else
    {
        bottomPadding = 0;
        self.navigationViewTopConstraint.constant = 0;
    }

Further Reading:- Here

Answer 2

Replacing Top and Bottom Layout guides in iOS 11 we have Safe Layout Guides to keep in mind when designing or updating autolayout for iPhone X .

Helpful resources (Apple Dev.) for adapting to iPhone X Display:

• Designing for iPhone X
  
• Building apps for iPhone X

According to Apple, respecting Safe Layout Guide will solve most of the auto-layout problems for iPhone X. Also according to the above videos from Apple, Landscape orientation layout would usually cause issues for iPhone X. Nevertheless it doesn't seem too difficult to cope with iPhone X display.