Question

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

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

如苹果在其Human Interface Guidelines for iPhoneX上的图片所示，这里告诉它它将支持3倍图像扩展。但是在顶部还有185分，并考虑到iphone 7加分辨率的 414 * 736 分，它是414 - 375 =宽度减少了39分。

您可以在此处查看解决方案比较： - https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions。

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

一些问题场景：

如何支持：

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

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

我的个人意见： - 无论多么艰难或多乱，当我们习惯这个解决方案时，最终用户体验会更好，更大。

请分享精彩的技巧和设计流程。干杯!!!

Answer 1

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

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

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

为iPhone X添加1125px×2436px分辨率的启动图像
转到您的界面文件，选择身份检查器。启用安全区域，如下所示。
如果您将uiview固定在视图的顶部，则可以将其顶部约束链接到安全区域而不是超级视图。
同样，对于底部视图，给出安全区域的底部约束而不是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;
    }

进一步阅读： - Here

Answer 2

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

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

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

如何支持应用的iPhone X分辨率或屏幕尺寸？

2 个答案: