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

如果我们想使用这个图像来覆盖所有分辨率的屏幕的全宽和半高,那么最好使用什么尺寸的图像: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的决议

有人说,对于iPhone 6 Plus来说,对于边缘到边缘的图像(如屏幕从左到右的底部的横幅),他们将准备back@3x.png,宽度为1242,iPhone 6为back@2x.png宽750匹配iPhone 6的屏幕尺寸,但我不认为这是一个好主意,因为1242/3 = 414和750/2 = 375因此命名为@ 2x和@ 3x没有意义。 那么宽度应该有多大?375或414?

graphics名称使用@ 2x和@ 3x后缀,例如,如果image@3x.png具有30×30分辨率,则逻辑思考image@2x.png应该有20×20分辨率,image.png应该是10×10。 这意味着如果我们希望每个屏幕都有锐利的全宽图像,那么我们可能应该创build宽度为414 * 3 = 1242px的back@3x.png,宽度为414 * 2 = 828px的back@2x.png,以及back.png宽度414px。 然而,这意味着除了iPhone 6 Plus之外的每一个iPhone上,你都需要设置你的uiimage来使用例如方面适合的内容模式,并且它们将被调低,所以这再次不是一个完美的解决scheme,并且可能会真的减慢应用程序的速度我们在旧设备上使用了大量的缩减。

那么你认为解决这个问题最好的解决办法是什么?

如果不使用的话,你不需要在每个尺度上都有图像。 只做你需要的尺寸,并根据它们的宽度命名。 对于纵向全设备宽度的图像,您需要1x和2x的320px宽,2x的375px宽和3x的414px宽。

4“设备使用”-568h“后缀命名他们的启动图像,所以我build议一个类似的命名scheme:

  • 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]; 

如果将来会增加其他宽度,这可能会中断,但到目前为止,苹果一直要求重新构build应用程序来支持新的显示,所以我猜想假设他们会继续这样做是有点安全的。

我个人会做:

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资产和@ 3倍资产,三倍点像素大小。 该设备将自动select正确的一个。 但是阅读你的文章我猜你已经知道这一点。

对于边缘到边缘的图像,不幸的是,你必须为所有的屏幕分辨率。 所以,对于一个肖像iPhone来说,这将是320点,375点和414点,其中414点必须是@ 3x。 一个更好的解决scheme可能是通过在界面构build器中设置切片(如果使用图像目录)来使图像可缩放。 但是,根据图像的不同,这可能是也可能不是一个选项,取决于图像是否具有可重复或可拉伸的部分。 这样设置的可缩放图像对性能的影响非常小。

@ 2和@ 3不是真正的图像缩放比例,而只是表示一个真实像素代表了屏幕上的一个虚拟像素,来自android universe的某种hdpi / xhdpi / xxhdpi / blabla。 它只显示系统应该使用什么图像的一些设备屏幕。

所以如果你需要使用整个屏幕的图像 – 准备它依赖于真正的屏幕大小。

根据某些情况下的graphics,当我们仅使用单个图像(例如414点宽×100点高的横幅)(最大可能宽度和一些固定高度)的横幅时,它可以正常工作,并将其放置在固定到屏幕的左右边缘,具有固定高度100,并为该UIImageView设置纵横填充模式。 然后在较小的设备左侧和右侧的图像将被剪切,我们将只看到图像的中心部分。

我为此创build了一个类别:

 + (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

我认为边缘到边缘或全屏幕图像的最佳解决scheme是关心像素(而不是点)的真实屏幕大小,并且您必须在运行时检查设备的模型并select合适的图像,即:

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。

我认为我们应该为不同的设备使用不同大小的背景图像。 只需使用@ 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) 

我个人会做:

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

这背后的逻辑是它显示了所有设备之间的差异,而widthiPhone 5siPhone 4s共享相同的值。

这只是我正在使用的设备相关资源的命名约定,例如整个屏幕的背景图像,大部分时间您只需要:

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