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

时间:2015-05-31 22:47:49

标签: ios xcode

苹果指南对此并没有太大的帮助,但我开始认真对待IOS开发,当我看到图像从@ 1x到@ 3x时,我吃了一惊。

我找到的一个来源说它们是基于尺寸的。例如:

如果您正在处理推断的VC大小并且图像是30x30并且您在iPhone6上运行该图像,则对于@ 3x,您的图像应为30x30,20x20用于@ 2x,10x10用于@ 1x。

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

有人可以为我解释这一点,并解释如何确保我的图像看起来适合所有屏幕吗?

提前致谢!

1 个答案:

答案 0 :(得分:10)

当第一个iPhone(和SDK)问世时,所有图像都是1x(图像的1个像素=屏幕的1个像素),因为我们不得不关心它们。在那部手机上,每英寸有166个水平或垂直像素(dpi)。因此,为了显示从左边缘到右边缘延伸的图像,我们的图像需要宽320(因为那是Apple告诉我们的 - 我们没有必须计算像素)无论高度如何我们要。让我们说100像素高。我们将该图像命名为MyPhoto.png(因为Apple告诉我们iPhone OS最适合PNG图像)并且我们会显示它。

当iPhone 4推出视网膜显示器时,其视网膜显示器的水平度是旧电话的2倍,垂直分辨率的2倍。所以现在我们需要更高分辨率的图像来获得最佳的界面。我们还在展示一个2"宽图像,但它需要两倍的水平像素数和两倍的垂直像素数(4倍的总像素数)来填充相同的空间。所以现在我们的图像需要640像素乘200像素。由于我们的应用程序仍然需要支持旧手机以及新手机,我们并不想用新手机替换旧手机。我们需要一种方法来支持两者。因此,旧图像与之前的名称保持相同(我们没有附加" @ 1x")并且新图像得到了" @ 2x"文件扩展名表示它们是分辨率的两倍。所以我们将这个更大的图像命名为MyPhoto@2x.png。

一个常见的问题是为什么不在旧手机和新手机上只使用更高分辨率的图像?通过缩放,两者似乎都很有效。问题主要在于iPhone,特别是旧手机,内存非常有限。使用比它们需要大4倍的图像对于有限的内存来说真的很难。这就是我们在应用中同时拥有1x和2x图像的原因。

为了我们的理智,我们在设计接口时仍然会使用1x。因此,即使我们要在640像素宽的视网膜显示器上显示屏幕,我们的代码中的屏幕仍然是320像素宽。如果我们想在视网膜显示器上绘制1像素宽的线,我们会在代码中将其设置为半像素宽。

随着iPhone 6 Plus的更大屏幕,Apple必须在屏幕上包含更多像素,以保持客户所期望的高分辨率。所以现在我们进入了3x图像。但是,iPhone 6 Plus的水平或垂直像素数量确实不到三倍。但是,Apple再一次要求我们供应" @ 3x"图像,它担心在设备上缩小它们。和以前一样,我们仍然需要支持更小的屏幕分辨率,所以我们仍然包括" @ 2x"和我们的应用程序中的1x图像。

因此,继续我们的例子,@ 3x图像需要是1x图像宽度和高度的三倍。所以现在我们需要一个960宽×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

这将为你提供1.0非视网膜iPhone,0.5为iPhone 4,5和& 6,iPhone 6 Plus为0.33。