2014年如何支持不同尺寸的iPhone屏幕?

6
我快要完成我的第一个iPhone应用程序了,现在想添加一个背景图片,但是有点困惑,因为不同的iPhone版本有3或4个不同大小的屏幕,并且分辨率也不同。虽然我知道整个“image@2x.png”的事情,但我仍然不知道我真正需要什么。如果我想让我的应用程序在iPhone 4 / 4s、5s / 5c、6 / 6+上运行,我需要多少个不同版本的背景图像,以及它们的尺寸和分辨率是多少?我已经搜索过了,但是没有找到2014年的相关答案。另外,如果iPhone 6是1334x750 @3x,那么我是否应该包括一个4002x2250的背景?然后对于1920x1080的iPhone 6+ @3x,需要一张5760 x 3240的图片吗?那太大了!我感觉我一定理解错了。

你的背景图片是某个物品的照片还是一个重复的图案? - Rick
只需使用约束条件并按照您的需求缩放图像。 - soulshined
我看到了,但是下面的人告诉我我需要一张3726 x 6624的图片。所以1224x2208 @3x意味着1224x2208已经是屏幕大小的3倍,而不是需要将这些尺寸乘以3? - temporary_user_name
这意味着如果你只支持 iPhone 4 及以上版本,那么你只需要 @2x@3x 图片,不需要基础图片吗? - temporary_user_name
兄弟,如果你想回复我的评论,需要用 @ 召唤我。而 iPhone 6 不是 @3x,这是错误的。请看下面的答案。如果你有问题,也应该在答案下评论。 - wcd
显示剩余3条评论
5个回答

5
我认为最简单的方法是使用一个适合iPhone 6+的图片,然后将UIImageViewcontentMode设置为UIViewContentModeCenter。至少我认为是这个方法,结果应该是在iPhone 6+上有一个居中的图像,但在其他屏幕上只会显示部分图像。
iPhone 6+的降采样意味着覆盖整个屏幕的@3x资源应该是2208x1242(也就是说,这个分辨率已经是3x了,"真实"分辨率是736x414)。这是需要的最大分辨率,然后可以使用我描述的方法为@2x和@1x资源使用相同的图像。

这真不是一个坏主意。但仍需要找到/创建一张3726 x 6624的图片...非常庞大。 - temporary_user_name
是的,但你不能简单地生成已有图像的更高分辨率版本吗? - Rick
如问题评论中所述,我之前回复需要一张 3726 x 6624 的图片是错误的。我已经相应地更新了答案。 - Rick
736 x 414是逻辑尺寸,而不是“真实”分辨率。 “真实”分辨率为2208 x 1242,采样约为87%。请参见下面的答案。 - wcd
如果您不同意我的措辞,您本可以编辑回复。 - Rick

5
如果你想支持iPhone 6/Plus的本地分辨率,你需要添加启动图像(iOS 8之前)或启动屏幕xib(iOS 8)。iPhone 4/4S:640 x 960,iPhone 5/5S:640 x 1136,iPhone 6:750 x 1334,iPhont 6 Plus:1242 x 2208。这意味着如果你想要支持这些设备,你需要准备4个具有上述分辨率的启动图像。你可以使用iOS模拟器来捕获不同分辨率的截图。如果找不到特定分辨率的启动图像,则你的应用程序将在新分辨率设备上运行在兼容模式下。兼容模式意味着当仍然具有相同的逻辑大小时,你的视图将被缩放以适应新的屏幕尺寸。
编辑:我认为操作者误解了@2x和@3x的含义。iPhone 6的分辨率是750(像素)x 1334(像素),326像素每英寸。这是真实分辨率。如果支持本地分辨率,则375(点)x 667(点)是逻辑大小。iPhone 6 Plus的分辨率为1242(像素)x 2208(像素),401像素每英寸,逻辑大小为414(点)x 736(点)。
这是在iOS设备上使用不同分辨率的图像的工作原理:假设你想在iPhone 4s,iPhone 5/5S,iPhone 6/Plus上运行应用程序。首先,你应该提供4个启动图像以支持这些设备的本地分辨率。当iOS启动你的应用程序时,它将检查应用程序是否提供了正确的启动图像来支持当前设备的本地分辨率。如果iOS找到它,则在启动时使用它,屏幕的逻辑大小是正确的,你的应用程序会正常运行。否则,你的应用程序将在兼容模式下运行,在此模式下,所有视图都将被缩放。
假设你的应用中有一张名为foo.png的图片,其逻辑尺寸为100(points) x 100(points)。你希望在所有设备上该图片看起来都一样。因此,你需要提供两个版本的这张图片。其中一个是200(pixels) x 200 (pixels)的,并且应该被命名为foo.png@2x;另一个是300(pixels) x 300(pixels)的,并且命名为foo.png@3x。如果你使用[UIImage imageNamed:@"foo"]来加载该图片,在iPhone 6 plus以外的设备上,应用程序将会加载名为foo.png@2x的图片。否则,应用程序将会加载foo.png@3x并将其缩小到300 * 84%(pixels) x 300 * 84%(pixels)的大小。
如果你从URL加载一张图片并需要在运行时渲染它,假设你得到的尺寸为{width:100, height:100},缩放比例为1.0。这意味着这张图片的实际尺寸为100 * 1.0(pixels) x 100 * 1.0(pixels)。如果你不想让它被缩放,你需要自己计算逻辑尺寸。你可以像这样计算:
UIImage *image = ... // you get it from an url
CGFloat scale = [UIScreen mainScreen].scale;
CGFloat width = image.size.width / scale; 
CGFloat height = image.size.height / scale;
CGRect frame = CGRectMake(50.0f, 50.0f, width, height)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.contentMode = UIViewContentModeCenter;
imageView.image = image;
[self.view addSubview:imageView];

1
这非常有帮助。谢谢。 - temporary_user_name

2
您需要三个版本的背景图片(1x,2x,3x)。一个好的实践方法是制作一个大小为您视图大小的3倍的图像,然后通过缩小来制作2x和1x版本。
苹果提出了一个新概念叫做“尺寸类”,以支持不同的设备尺寸。要使用尺寸类,您需要最新版本的Xcode(Xcode 6)。在界面构建器中,您可以为不同的尺寸类设置不同的约束集。这样就更容易支持所有屏幕尺寸。要了解有关尺寸类的更多信息,请观看WWDC 2014视频“使用UIKit构建自适应应用程序”。

但是比例不同吗?我不能在1x/2x/3x上有相同的X乘以Y,因为屏幕的形状不同... - temporary_user_name
而且,明确一点,例如iPhone 6+需要1242 x 2208 @3x,这是否意味着我应该包含一个3726 x 6624的图像?那太大了... - temporary_user_name
@Aerovistae 你说得对。不同屏幕尺寸的比例会有所不同。当我为具有固定纵横比的子视图设置图像时,通常会使用我提到的方法。在你的情况下,你可以编辑不同屏幕尺寸的图像,并为每个尺寸类别设置适当的图像。对于每个纵横比,都有1x、2x和3x版本。 - Varoon
你的意思是我需要为每个纵横比都有1x/2x/3x版本的背景图片,总共需要9个版本?这对我来说没有意义,我是否误解了? - temporary_user_name
这将是一个安全的方法。基本上,视网膜显示器使用2x,iPhone 6 Plus使用@3x,其余使用1x。让我为您完成工作,并提供一个分辨率列表,以覆盖所有iPhone设备,作为另一个答案。 - Varoon

1

您使用的游戏引擎是哪个? 如果您使用的是cocos2d或cocos2dx,则可以使用960 * 640的背景图像。以下代码将根据屏幕大小缩放图像。

CCSize frameSize = pEGLView->getFrameSize();
    CCSize designSize = CCSizeMake(480, 320);
    vector<string> searchPaths;

    CCSize resourceSize;

    Utility :: isPad = true;
    searchPaths.push_back("hd");
    resourceSize = CCSizeMake(960, 640);

    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width , designSize.height, kResolutionExactFit);
    pDirector->setContentScaleFactor(resourceSize.width/designSize.width); 

0

以下是您需要为背景图像使用的不同分辨率。

  1. iPhone 4/4S - 640 * 960
  2. iPhone 5/5S - 640 * 1136
  3. iPhone 6 - 竖屏750 x 1334,横屏1334 x 750
  4. iPhone 6 Plus - 竖屏1242 x 2208,横屏2208 x 1242

iPhone 4的分辨率为640 x 960。 - wcd

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接