如何在所有可用的iPhone分辨率上处理图像比例？

Question

如果我们想要使用此图像覆盖所有分辨率的屏幕的全宽和半高,那么最适合图像的尺寸是:background.png,background @ 2x.png和background@3x.png iPhone肖像应用？

这就是我们现在拥有的:

Device          Points    Pixels     Scale  Physical Pixels   Physical PPI  Size
iPhone X        812x375   2436x1125  3x     2436x1125         458           5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401           5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326           4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326           4.0"
iPhone 4        480x320   960x640    2x     960x640           326           3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163           3.5"

有人说,对于iPhone 6 Plus,对于边缘到边缘的图像(如屏幕左下边缘的横幅),他们会准备back@3x.png,宽度为1242,iPhone 6为back@2x.png,宽度750以匹配iPhone 6的屏幕尺寸,但我不认为这是一个好主意,因为1242/3 = 414和750/2 = 375所以将它们命名为@ 2x和@ 3x没有意义.然后应该有什么宽度back.png - 375或414？

图形名称使用@ 2x和@ 3x后缀,因此如果例如image@3x.png具有30x30分辨率,则逻辑上认为image@2x.png应具有20x20分辨率,image.png应为10x10.这意味着如果我们想要为每个屏幕设置清晰的全宽图像,那么我们可能应该创建back@3x.png,宽度为414*3 = 1242px,back @ 2x.png,宽度为414*2 = 828px,back.png为宽度414px.然而,这意味着除了iPhone 6 Plus之外的每一部iPhone都需要设置你的uiimages以便使用例如适合内容的内容模式,并且它们将被缩减,因此这又不是一个可行的解决方案,如果可能真的会减慢应用程序的速度我们在旧设备上使用了大量的scalling.

那么您认为解决这个问题的最佳解决方案是什么？

Answer 1

如果不使用,您不必将所有图像都放在所有比例中.只制作您需要的尺寸,并根据宽度命名.对于纵向全设备宽度图像,您需要320x宽1x和2x,375px宽2x和宽414px宽3x.

4"设备使用"-568h"后缀来命名他们的发布图像,所以我建议使用类似的命名方案:

• ImageName-320w(@ 1x&@ 2x)
• ImageName-375w(@ 2x)
• ImageName-414w(@ 3x)

然后找出运行时需要的图像:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

如果将来添加其他宽度,这可能会中断,但到目前为止,Apple一直需要重建应用程序以支持新显示,所以我猜他们会继续这样做是有点安全的.

Answer 2

我个人会这样做:

ImageName @ 2x iPhone 4/4s
ImageName-568h @ 2x iPhone 5/5s
ImageName-667h @ 2x iPhone 6
ImageName-736h @ 3x iPhone 6Plus

这背后的逻辑是它显示了所有设备之间的差异,而宽度在iPhone 5s和iPhone 4s上共享相同的值

编辑:

这只是我用于依赖于设备的资源的命名约定,例如占据整个屏幕的背景图像,大部分时间你想要的是:

ImageName @ 2x iPhone 4/4s/5/5s/6
ImageName @ 3x iPhone 6Plus/Zoom模式

Answer 3

对于@ 2x和@ 3x的讨论,你真的不必关心它.关心屏幕的点大小,并确保有两倍点大小的@ 2x资产和@ 3x资产,点数大小为三倍.设备将自动选择正确的.但阅读你的帖子我猜你已经知道了.

对于边对边图像,遗憾的是你必须为所有屏幕分辨率制作它.因此,对于iPhone的肖像,它将是320点,375点和414点,其中414点必须是@ 3x.更好的解决方案可能是通过在界面构建器中设置切片来使图像可伸缩(如果使用图像目录,则可以).但是,根据图像,这可能是也可能不是一种选择,取决于图像是否具有可重复或可伸缩的部分.像这样设置的可伸缩图像对性能影响很小.