如何在所有可用的iPhone分辨率上处理图像缩放?


99

如果我们要使用此图像来覆盖所有分辨率的屏幕的全宽和半高,那么哪种尺寸最适合用于图像:background.png,background @ 2x.png和background@3x.png iPhone人像应用程序?

这就是我们现在所拥有的:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

iPhone分辨率

有人说,对于iPhone 6 Plus的边缘到边缘图像(如屏幕左下角的横幅),他们将准备宽度为1242的back@3x.png,而对于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。这意味着,如果我们希望每个屏幕都具有清晰的全宽图像,则可能应该创建宽度为414 3 = 1242px的back@3x.png,宽度为414 2 = 828px的back@2x.png和宽度为414px的back.png 。但是,这意味着在除iPhone 6 Plus之外的所有其他iPhone上,您都需要设置uiimage以使用“宽高比”内容模式,并且它们将被调低,因此,这并不是一个完美的解决方案,并且可能会减慢应用程序的运行速度我们在较旧的设备上使用了很多缩放比例。

那么您认为什么是解决此问题的最佳解决方案?


1
iPhone 6屏幕揭秘链接:bit.ly/1qHEBKk iPhone分辨率终极指南链接:bit.ly/1paVXLd
King-Wizard

iPhone 6 Plus 414 x 736点1242 x 2208像素3x比例1080 x 1920物理像素401物理ppi 5.5英寸iPhone 6375 x 667点750 x 1334像素2x比例750 x 1334物理像素326物理ppi 4.7“ iPhone 5320 x 568点640 x 1136像素2x比例640 x 1136物理像素326物理ppi 4.0“
King-Wizard

iPhone 4 320 x 480点640 x 960像素2x比例640 x 960物理像素326物理ppi 3.5英寸iPhone 3GS 320 x 480点320 x 480像素1x比例320 x 480物理像素163物理ppi 3.5“
King-Wizard

Answers:


49

如果不使用每个图像,则不必具有所有比例。仅制作所需尺寸,并根据其宽度命名。对于纵向全设备宽度的图像,您需要在1x和2x时宽320px,在2x时宽375px,在3x时宽414px。

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一直要求重建应用程序以支持新的显示器,因此我认为可以肯定的是,可以继续这样做会有些安全。


这就是苹果没有引入32 GB版本的新iphone,16 GB版本作为测试设备,64 GB使用率的原因之一。由于图形的原因,应用程序规模将急剧增加。
Ilker Baltaci 2014年

1
@IlkerBaltaci我知道他们是否只允许开发人员购买16 GB版本,但是这样,由于磁盘空间不足,许多人甚至无法升级其操作系统。
Filip Radelic 2014年

这就是即使有32 GB真的,我不得不等待一个星期的清理,使5 GB空间,IOS 8
Ilker Baltaci

2
如何在IB中使用这些?
Khawar 2014年

@FilipRadelic iPhone5呢?宽度为640,但高度与iPhone 4使用的高度不同
MeV 2015年

41

我个人将做:

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 /缩放模式


1
iPhone 6 plus中的“缩放模式”怎么样?我们是否还需要提供ImageName-667h @ 3x?
弗朗索瓦·弗里

@thewormsterror我认为您的图像命名约定中的最后一个已磨损
Hades

@thewormsterror很好的答案,您还可以添加应如何命名ipad图像。
卢卡斯

如果来自api的图像为1024 x 768,是否表示我可以使用的最大尺寸为256 @ 3x?
Mirko

8

对于@ 2x和@ 3x讨论,您实际上不必在乎。注意屏幕的点大小,并确保点大小的两倍的@ 2x资产和点大小的三倍@ 3x资产(以像素为单位)。设备将自动选择正确的设备。但是阅读您的文章我想您已经知道这一点。

对于边缘到边缘的图像,不幸的是,您必须针对所有屏幕分辨率进行调整。因此,对于肖像iPhone,它将分别为320点,375点和414点,其中414点必须为@ 3x。更好的解决方案可能是通过在界面构建器中设置切片来使图像可扩展(如果使用图像目录,则是)。但是,根据图像的不同,这可能是选项,也可能不是,这取决于图像是具有可重复部分还是可拉伸部分。这样设置的可伸缩图像对性能的影响很小。


1
我需要使屏幕宽度与uicollectionviewcell内的图像(显然在适合所有屏幕的uicollectionviewcell内)匹配。对于iphone 6 plus,我解决了将3倍尺寸(414x3 = 1242 px)换成2x尺寸的问题?它必须适合iphone4s / 5 / 5s和6屏...
jerrygdm

1
我有一个尺寸为222px x 260px的图标,看起来非常适合iPhone5 / 5s屏幕。现在,在使该应用程序兼容iPhone6和6plus屏幕的同时1)该图标的大小应该是多少?按照三次规则,应该是333px x 390px吗?2)我是否需要对xib中的图像应用任何自动调整大小的功能?
2015年

@ jerrygdm,我的​​情况和您差不多。一天结束时您做了什么?可以和我分享一下吗?
伦,2015年

@Ans,您是否为iphone6和iphone6Plus使用了3x图标。
JiteshW,2015年

@Jitesh我在问同样的问题...我应该将x3x图标做成多大的尺寸?我想补充,但应该是什么大小...这是我的问题..

2

@ 2和@ 3不是真实的图像缩放比例,而是仅代表多少真实像素代表屏幕上的一个虚拟像素,即来自Android Universe的某种hdpi / xhdpi / xxhdpi / blabla。它仅向系统显示应在某些设备屏幕上使用的图像。

因此,如果您需要使用全屏图像,请根据实际屏幕尺寸进行准备。


2

在某些情况下,根据图形的不同,当我们仅使用单个图像时,例如,横幅尺寸为414点宽x 100点高(可能的最大宽度和某些固定高度)的横幅广告,并将其放置在固定到屏幕的左右边缘具有固定的高度100,并为该UIImageView设置了宽高比填充模式。然后,在较小的设备上,将剪切图像的左侧和右侧,我们将仅看到图像的中心部分。


2

我为此创建了类别:

+ (UIImage *)sizedImageWithName:(NSString *)name {
    UIImage *image;
    if (IS_IPHONE_5) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
        if (!image) {
            image = [UIImage imageNamed:name];
        }
    }
    else if (IS_IPHONE_6) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
    }
    else {
        image = [UIImage imageNamed:name];
    }
    return image;
}

您可以在此处获取完整的代码:https : //gist.github.com/YGeorge/e0a7fbb479f572b64ba5


0

我认为边缘到边缘或全屏图像的最佳解决方案是关心像素的实际屏幕尺寸(不是点数),并且您必须在运行时检查设备的模型并选择适当的图像,即:

image-iphone4-4s.png (640x960/2) for 1/2 screen heightimage-iphone5-5c-5s.png (640x1136/2) for 1/2 screen heightimage-iphone6-6s.png (750x1334/2) for 1/2 screen heightimage-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height

在这种情况下,不需要@?x。


0

我认为我们应该为不同的设备使用不同大小的背景图片。只需使用@ 3x比例图像作为背景。

您可以使用以下几行来检测设备。

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0) 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.