如何支持iPhone X的分辨率或屏幕尺寸以适配应用程序？

Question

在2017年的主题演讲和iPhone X发布后，我对新iPhone感到既担忧又兴奋。我的问题更关于用户界面、设计指南或接口设计方法，而不是技术问题。

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

正如苹果在其iPhoneX人机界面指南中展示的那样，它将支持3倍图像扩展。但是，在顶部有185个额外点，并且考虑到iPhone 7 Plus分辨率的414 * 736点，宽度比375少39个点。

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

我们如何为这个新的设计分辨率设计我们的应用程序？

一些问题场景：

如何支持：

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

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

我的个人意见：无论有多难或杂乱，当我们习惯于这种分辨率时，最终用户体验将更好，也将更加美观大方。

请分享令人惊叹的技巧和设计过程。干杯！！！

- Ashish P

---

这与支持所有其他设备尺寸没有什么区别。你的问题并不是很清楚。你真正期望在iPhone X上遇到什么问题？ - rmaddy

我已经编辑了我的问题，以分享一些场景。 - Ashish P

Answer 1

在研究不同UI问题的可能解决方案后，我发现由苹果在iOS 11中引入的安全区域布局指南可以很好地帮助解决问题。

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

safeAreaLayoutGuide取代了topLayoutGuide和bottomLayoutGuide，成为在视图和父视图之间创建约束的新方法。

1. 添加iPhone X启动图，分辨率为1125px × 2436px 2. 转到您的界面文件，选择身份验证检查器。如下所示启用安全区域。 3. 如果您有一个固定在视图顶部的uiview，则可以将其顶部约束链接到安全区域而不是父视图。 4. 同样，对于底部视图，请将底部约束给安全区域而不是父视图。

如果您知道如何创建编程限制，您可以使用布局锚点来包含顶部视图上方的安全区域。因此，您可以通过编程方式将布局链接到安全区域。

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

进一步阅读：- 这里

- Ashish P

Answer 2

在iOS 11中，我们有安全布局指南来代替顶部和底部布局指南，设计或更新自动布局时需要考虑。

适应iPhone X显示的有用资源（Apple Dev.）：

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

根据苹果公司的说法，尊重安全布局指南将解决大多数iPhone X的自动布局问题。此外，根据上述苹果公司的视频，横向布局通常会导致iPhone X出现问题。然而，似乎并不难应对iPhone X的显示。

- badhanganesh

---

没错。关于安全区域指南的内容，需要补充一点...看起来很多应用程序在更新故事板以适应安全区域指南时会做正确的事情，但要注意那些子视图实际上想要全屏幕的应用程序，比如3D游戏。 - rickster