iPhone X 中的背景图像拉伸

Posted 2023-03-06

【中文标题】iPhone X 中的背景图像拉伸

【英文标题】：Background image stretching in iPhone X

【发布时间】：2018-01-22 13:29:16

【问题描述】：

目前我们正在使用带有@1x、@2x 和@3x 的图像资产，它将支持所有设备。但是当我们为 iPhone X 使用相同的图像资源时，@3x 图像在 iPhone X 中看起来被拉伸了。 所以请让我知道如何支持具有相同图像资产的 iPhone X 设备，或者是否有任何解决方案可以解决此问题。

【问题讨论】：

不要让背景图像拉伸填充然后，使用 aspect fill 到 aspect fit 内容模式，以更好地满足您的目的；您可以在 Apple 的 iPhone X HIG 页面上找到一些有用的提示。

【参考方案1】：

另一种方法是选择Aspect Fill。然后在属性检查器中向下选择Clip to Bounds。图片会填满你的 UIIMageView，但是会根据 Aspect Ratio 裁剪它以“移除”图片中不适合视图的部分。

避免这一切的唯一方法是让图像的纵横比（宽高比）与您的 UIImageView 的纵横比相匹配。

【参考方案2】：

只有在使用 scaleToFill 时，图像才会被拉伸。尝试更改 UIImageView 的内容模式或用于显示图像的任何内容。

【讨论】：

当我们将内容模式更改为宽高比时，我们会在底部和顶部看到一些空白区域。当内容模式设置为方面填充时，我们将面临左右两边的一些内容切割

这是意料之中的。您不能拥有适合所有纵横比的单个图像。我建议你修改一下你的形象策略。

【参考方案3】：

这是为不同屏幕尺寸（iPhone XS Max、iPhone XS、iPhone Xr）定义图像的非官方技巧。

我发现了一个窍门。在我的应用程序中，我们有所有 iPhone 设备的启动屏幕（见截图）。

Launch screen 之后出现的下一个屏幕是Login。它应该具有与Launch screen 相同的图像。 不幸的是，Xcode 在开箱即用的Assets 中创建了以下image set（iPhone 1x、2x、3、iPad 1x、2x - 见图）。

在从 Launch Screen 到 Login screen 的转换过程中，我看到了伪影，因为 iPhone X、Xs Max、iPhone Xr

上的图像拉伸

为了解决这个问题，我将LaunchImage.launchimage 文件夹中的Contents.json 文件复制到Finder 中的BackgroundImage.imageset 文件夹中（参见下图的步骤）

现在在Xcode 我看到以下模板。我可以为以下设备定义背景图像 Retina HD 4.7"(iPhone 6, iPhone 7, iPhone 8), Retina HD 5.5" (iPhone 6 Plus, iPhone 7 Plus, iPhone 8 Plus), iPhone Xr, iPhone X/iPhone Xs , iPhone Xs Max

【讨论】：

试过这个答案，但在应用程序中也没有在故事板中显示图像。