什么尺寸最适合用于图像:background.png、background@2x.png 和 background@3x.png 如果我们想使用这个图像,例如在所有分辨率下覆盖屏幕的全宽和半高iPhone人像应用?
这就是我们现在所拥有的:
Device Points Log. Res. Sc. Real Res. PPI Ratio Size
iPhone 12 Pro Max, 13 Pro Max 926x428 2778x1284 3x 2778x1284 458 19.5:9 6.7"
iPhone 12, 12 Pro, 13, 13 Pro 844x390 2532x1170 3x 2532x1170 460 19.5:9 6.1"
iPhone 12 mini, 13 mini 812x375 2436x1125 3x 2340x1080 476 19.5:9 5.4"
iPhone XS Max, 11 Pro Max 896x414 2688x1242 3x 2688x1242 458 19.5:9 6.5"
iPhone XR, 11 896x414 1792x828 2x 1792x828 326 19.5:9 6.1"
iPhone X, XS, 11 Pro 812x375 2436x1125 3x 2436x1125 458 19.5:9 5.8"
iPhone 6+, 6S+, 7+, 8+ 736x414 2208x1242 3x 1920x1080 401 16:9 5.5"
iPhone 6, 6S, 7, 8, SE2 667x375 1334x750 2x 1334x750 326 16:9 4.7"
iPhone 5, 5S, 5C, SE1 568x320 1136x640 2x 1136x640 326 16:9 4.0"
iPhone 4, 4S 480x320 960x640 2x 960x640 326 3:2 3.5"
iPhone 3GS 480x320 480x320 1x 480x320 163 3:2 3.5"
https://i.stack.imgur.com/0jwdF.png
有人说,对于 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。这意味着如果我们想为每个屏幕创建清晰的全宽图像,那么我们可能应该创建宽度为 4143=1242px 的 back@3x.png、宽度为 4142=828px 的 back@2x.png 和宽度为 414px 的 back.png。然而,这意味着在除 iPhone 6 Plus 之外的每台 iPhone 上,您都需要设置 uiimages 以使用例如宽高比匹配内容模式,并且它们将被缩小,因此这又不是一个完美的解决方案,并且可能真的会减慢应用程序的速度我们在旧设备上使用了大量缩放。
那么您认为解决这个问题的最佳解决方案是什么?
如果不使用,您不必拥有所有比例的每个图像。只制作您需要的尺寸并根据它们的宽度命名。对于纵向全设备宽度图像,您需要 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 一直需要重建应用程序以支持新显示器,所以我想假设他们会继续这样做是有点安全的。
我个人会做:
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/缩放模式
对于@2x 和@3x 的讨论,您不必真正关心这一点。关心屏幕的点大小,并确保有两倍点大小的@2x 资源和点大小三倍的@3x 资源(以像素为单位)。设备会自动选择正确的。但是阅读您的帖子,我想您已经知道这一点。
对于边缘到边缘的图像,不幸的是,您必须使其适用于所有屏幕分辨率。因此,对于纵向 iPhone,它将是 320 点、375 点和 414 点,其中 414 点必须是 @3x。更好的解决方案可能是通过在界面生成器中设置切片来使您的图像可扩展(如果您使用图像目录,那就是)。但是,根据图像,这可能是也可能不是一个选项,具体取决于图像是否具有可重复或可拉伸的部分。像这样设置的可扩展图像对性能的影响很小。
@2 和 @3 不是真正的图像缩放,而只是表示有多少真实像素代表屏幕上的一个虚拟像素,某种来自 android 世界的 hdpi/xhdpi/xxhdpi/blabla。它只向系统显示某些设备屏幕应该使用什么图像。
因此,如果您需要使用整个屏幕图像 - 根据实际屏幕尺寸进行准备。
在某些情况下,根据图形,当我们仅使用单个图像时它可能会正常工作,例如大小为 414 点宽 x 100 点高(最大可能宽度和一些固定高度)的横幅并将其放在固定到的 UIImageView 中屏幕的左右边缘,具有固定高度 100 并为该 UIImageView 设置宽高比填充模式。然后在较小的设备上,图像的左侧和右侧将被剪切,我们将只看到图像的中心部分。
我为此创建了类别:
+ (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
我认为边缘到边缘或全屏图像的最佳解决方案是关心以像素为单位的实际屏幕尺寸(而不是点),并且您必须在运行时检查设备的型号并选择合适的图像,即:
image-iphone4-4s.png (640x960/2) for 1/2 screen height
、image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height
、image-iphone6-6s.png (750x1334/2) for 1/2 screen height
、image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height
、
在提问者的这种情况下不需要@?x。
我认为我们应该为不同的设备使用不同大小的背景图像。只需使用@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)