6

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

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

正如苹果在其iPhoneX 人机界面指南中的这张图片所示，这里被告知它将支持 3x 图像扩展。但是顶部有 185 点额外的点，考虑到 iphone 7 的414 * 736点加上分辨率，它的宽度减少了 414 - 375 = 39 点。

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

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

一些问题场景：

如何支持：

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

我认为 185 分对于身高来说是一个很大的空间。我们需要重新考虑很多设计和屏幕。我们如何设计和解决这些场景？我希望我的问题现在已经足够清楚了。

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

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

4

2 回答 2

9

在查看了针对不同 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;
    }

进一步阅读：-这里

于 2017-11-05T14:23:43.393 回答
1

在为iPhone X设计或更新自动布局时，我们必须牢记iOS 11 中的替换Top和布局指南。BottomSafe Layout Guides

用于适应 iPhone X 显示器的有用资源 (Apple Dev.)：

根据苹果的说法，尊重Safe Layout Guide将解决 iPhone X 的大部分自动布局问题。另外根据苹果的上述视频，横向布局通常会导致 iPhone X 出现问题。不过，处理 iPhone 似乎并不难X 显示。

于 2017-09-12T21:34:22.320 回答