ios - 关于@2x @3x Xcode 图像的困惑

Question

苹果指南在这方面并没有给我太多帮助，但我开始认真对待 IOS 开发，当我看到图像从 @1x 变为 @3x 时，我吃了一惊。

我发现的一位消息人士说，它们是基于尺寸的。例如:

如果您正在处理推断的 VC 尺寸并且您的图像是 30x30 并且您在 iPhone6 上运行它，那么您的图像应该是 @3x 的 30x30、@2x 的 20x20 和 @1x 的 10x10。

我说的另一个消息来源提到它是基于图像分辨率而不是图像的大小。

有人可以帮我解决这个问题并解释如何确保我的图像在所有屏幕上看起来都很专业吗？

提前致谢!

Answer 1

当第一部 iPhone(和 SDK)问世时，所有图像都是 1x(图像的 1 个像素 = 屏幕的 1 个像素)，因为这就是我们必须关心的全部。在那部手机上，每英寸有 166 个水平或垂直像素 (dpi)。因此，要显示从左边缘延伸到右边缘的图像，我们的图像需要是 320 宽(因为这是 Apple 告诉我们的——我们不必计算像素)任意高度。假设高 100 像素。我们将该图像命名为 MyPhoto.png(因为 Apple 告诉我们 iPhone 操作系统最适合 PNG 图像)并且我们会显示它。

当 iPhone 4 推出 Retina 显示屏时，其 Retina 显示屏的水平分辨率是旧款手机的 2 倍，垂直分辨率是旧款手机的 2 倍。所以现在我们需要更高分辨率的图像来获得最好看的界面。我们仍然只显示一个 2"宽的图像，但它需要两倍数量的水平像素和两倍数量的垂直像素(像素总数的 4 倍)来填充相同的空间。所以现在我们的图像需要640 x 200 像素。由于我们的应用程序仍然需要支持旧手机和新手机，我们不想只是用新手机替换旧图像。我们需要一种支持两者的方法。所以旧图像保持与以前相同的名称(我们没有附加“@1x”)，新图像具有“@2x”文件扩展名，表示它们的分辨率是原来的两倍。所以我们将这个更大的图像命名为 MyPhoto@ 2x.png。

一个常见的问题是为什么不在新旧手机上都使用更高分辨率的图像？通过缩放，两者看起来都很好。问题主要在于 iPhone，尤其是较旧的手机，可使用的内存非常有限。在有限的内存上使用比所需大小大 4 倍的图像真的很困难。这就是为什么我们必须在我们的应用程序中同时拥有 1x 和 2x 图像的原因。

为了我们的理智，我们在设计界面时仍然只使用 1x。所以在我们的代码中屏幕仍然是 320 像素宽，即使我们要在 640 像素宽的视网膜显示器上显示它们。如果我们想在视网膜显示器上画一条 1 像素宽的线，我们会在代码中将其设为半像素宽。

由于 iPhone 6 Plus 的屏幕更大，Apple 不得不在屏幕上填充更多像素，以保持客户所期望的高分辨率。所以现在我们进入了 3x 图像。然而，iPhone 6 Plus 的水平或垂直像素数量并没有真正达到三倍。但是苹果再次让我们保持理智，只要求我们提供“@3x”图像，它担心在设备上缩小它们。和以前一样，我们仍然需要支持更小的屏幕分辨率，所以我们仍然在我们的应用程序中包含“@2x”和 1x 图像。

因此，继续我们的示例，@3x 图像需要是 1x 图像宽度和高度的三倍。所以现在我们需要一个 960 宽 x 300 像素高的图像。我们将其命名为 MyPhoto@3x.png。

请注意，虽然我之前提到了一些关于 166 dpi 显示的内容，但在创建这些图像时这并不重要。在您的照片编辑应用程序中，您并不真正关心图像是 166 还是 72 dpi 或其他任何东西。唯一重要的部分是我们导出的最终图像的宽度和高度像素数。

因此，为了回答您的问题(希望如此)，您需要将所有这三个图像都包含在您的 iPhone 兼容应用程序中。对于仅限 iPad 的应用程序，您可以跳过 @3x 图像，因为 iPad 还没有 3x 屏幕。但是在使用 Interface Builder 和代码时，请继续只考虑 1x 大小。

例如，现在要在 iPhone 6 Plus 上显示 1 像素宽的线，您需要绘制 0.33 宽的线而不是 1 磅的线。当然，你仍然想支持所有其他的屏幕分辨率，所以你会使用这样的代码来设置你的线宽:

let lineWidth = 1.0 / UIScreen.mainScreen().scale

这将为非视网膜 iPhone 提供 1.0，为 iPhone 4、5 和 6 提供 0.5，为 iPhone 6 Plus 提供 0.33。