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

Question

在2017年主题演讲和iPhone X发布之后，我同样担心新iphone的兴奋。 这个问题更多是关于用户界面，设计指南或界面设计方法而不是技术问题。

我的问题是如何支持1125px×2436px（375pt×812pt @ 3x）分辨率？

如苹果公司针对iPhoneX的人机界面指南所示 ，这里的图片显示它将支持3倍图像扩展。 但是在顶部还有185分额外，考虑到414 * 736分，iphone 7加分辨率为414 - 375 =宽度减少了39分。

您可以在此处查看分辨率比较：​​ - https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 。

我们怎么可能为这个新的设计分辨率设计我们的应用程序？

一些问题场景：

如何支持：

1. 水平图像视图缩放设备的整个宽度和固定高度。
2. ImageViews缩放整个宽度和高度（如电子商务应用程序中的整页产品图像）。
3. 还有额外的185点高度，如果我在页面上显示有限的内容，将显示很多空白。 例如，如何设计高度为400像素并缩放整个宽度的视图。 我应该保持顶部对齐的中心垂直对齐吗？

我认为185分是很多高空的房地产。 我们需要重新考虑很多设计和屏幕。 我们如何设计和解决这些情况？ 我希望我的问题现在已经足够清楚了。

我个人的看法： -再苦或杂乱是，最终用户体验将是更好的， 更大的 ，当我们习惯了这项决议。

请分享很棒的技术和设计过程。 干杯!!!

Answer 1

在查看针对不同UI问题的可能解决方案之后，我发现苹果与iOS 11引入的安全区域布局指南可以提供很多帮助。

注意 ： - 即使您的部署目标小于iOS 11，也可以使用安全区域布局指南。

safeAreaLayoutGuide将topLayoutGuide和bottomLayoutGuide替换为在视图和superview之间创建约束的新方法。

1. 为iPhone X添加1125px×2436px分辨率的启动图像

2. 转到您的界面文件，选择身份检查器。 启用安全区域，如下所示。

3. 如果您将uiview固定在视图的顶部，则可以将其顶部约束链接到安全区域而不是超级视图。

4. 类似地，对于底部视图，给出安全区域而不是superview的底部约束。

如果您知道如何创建编程约束，则可以使用布局锚点在顶视图上方包含安全区域。 因此，您可以以编程方式将布局链接到安全区域。

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

更新：另一种情况 - 假设您在屏幕顶部有一个UIView。 你希望这个视图从iPhoneX的缺口开始。 我们需要计算iOS 11以下所有iOS 11设备和设备的最高保证金，如下所示： -

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;
    }

进一步阅读： - 这里

Answer 2

在iOS 11中更换Top和Bottom布局指南时，我们在设计或更新iPhone X的自动 Safe Layout Guides时要记住Safe Layout Guides 。

有用的资源（Apple Dev。）适用于iPhone X显示器：

• 为iPhone X设计
  
• 为iPhone X构建应用程序

根据Apple的说法，尊重Safe Layout Guide将解决iPhone X的大多数自动布局问题。另外根据Apple的上述视频，横向布局通常会导致iPhone X出现问题。但是，它似乎并不太难应对iPhone X显示屏。