iOS：为应用程序准备背景图像

Question

大多数iOS应用程序都有一个以图像为背景的视图。那里有图像尺寸指南吗？例如，这是在Sketch中设计的iOS屏幕：

如您所见，有一个背景图像。现在每个应用程序都应该支持许多Apple设备。新的iOS 10支持从iPhone 5到iPhone 6s Plus的所有设备。它们具有不同的屏幕尺寸和分辨率。在创建Xcode资产时，我给出了3个不同大小的背景图像 - @1x, @2x, @3x。它们的尺寸应该是多少？

Answer 1

我看到它的方式你有2个选择：

1. 在here你会发现iPhone的分辨率：

• 您不需要@1 image，因为您不支持iPhone 4和4s（iOS 10）。
• @ 2适用于iPhone 5,5c，5S，6和6s，因此基本上你可以创建最高分辨率的@ 2图像，即iPhone 6，这个图像适用于iPhone 5系列。
• 或者，您可以为每个iPhone创建具有分辨率的图像，并使用硬编码逻辑为每个手机设置图像。即：if iphone5c { setImage("iphone5cImage") }等等..

---

2. 最简单的解决方案是创建具有最高分辨率的1张图像。 @ 3是iPhone 6S +中最高的，其余部分看起来都很棒。不要忘记将图像视图设置为纵横填充。

另外，不要忘记检查this线程：如何在所有可用的iPhone分辨率上处理图像比例？它将为您提供您正在处理的具体线索。 TL; DR，这是我写的选项。

Answer 2

您只需要提供的背景图像是@ 2x和@ 3x，因为@ 1x设备现在已经在历史的尘封页面中消失了。

说到@ 2x和@ 3x，你给开发者的图像分辨率应该与使用给定大小的最高分辨率的iPhone相同。

对于@2x，即iPhone 6，即750x1334，对于@3x，iPhone 6+是1242x2208。

缩小应该不是问题，因为支持iOS 10的所有iPhone的宽高比是相同的（16：9）。

开发人员注意事项）：

The UIImageView will then down-scale the images appropriately,
provided: 

1. you created an image set with the provided @2x and @3x images, 
2. correctly constrainted the UIImageView to the edges of the superview, and
3. selected the Content Mode of the UIImageView as Scale to Fill or Aspect Fill.

Answer 3

在全尺寸背景图像中存在设计细微差别。如果尺度方面对于不同尺寸的填充足够好，则需要设计最大的设备尺寸，而不是其余部分按比例缩放以适应它。有时候某些部分背景需要保持可见或者为了在小型设备中保持低内存打印，您需要创建更小的替代品。

每当您决定资产的设计大小时，您需要创建@ 3x，@ 2x变体。

还有一件事我需要指出矢量设计。如果你的设计只用矢量你可以选择pdf矢量export.Storyboard可以接受矢量资产，他们在完整背景缩放时做得很好。

Answer 4

我在我的应用程序中使用背景图像。为了解决这个问题，我使用一个分辨率的图像来覆盖所有iPhone和除了大型iPad之外的所有iPad。图像尺寸为2048x2048 points或1024x1024 pixels at @2x，以覆盖9.7英寸iPad。

图像压缩JPG以保持尺寸缩小。请注意，我允许它扩展为iPhone 6 Pluse（@ 3x）和12.7英寸iPad Pro（@ 2x），因为质量似乎没有受到影响。我可以为更大的设备进行扩展，因为如果我为12.7英寸的iPad Pro提供图像，它将是5464x4096 points（@ 2x）和2732x2048 pixels，然后JPG压缩必须如此之高（如果我想保持无论如何，与缩放相比，图像质量低。

如果您需要高质量，请尝试使用JPG和PNG进行比较，因为PNG对于复杂图像会变得非常大，但会提供最佳质量。

Answer 5

在文档中查看the page，有静态启动屏幕图像，您可以从那里捕获大小。

您可以使用获取设备屏幕大小

CGSize screenSize = [UIScreen mainScreen].bounds.size // (Objective-C)


let screenSize: CGSize = UIScreen.mainScreen().bounds.size // (Swift)

并且可以通过编程方式从捆绑中的图像集中选择所需的图像。或者使用文档中的知识和相应的resize an image制作一个用于调整大小的大图像。或者......你的选择。

不同的“尺寸”@ 2x，@ 3x是scale。和here is很好的解释。

Answer 6

如果你仍有同样的问题，那么你可以尝试这个。为此，您只需添加一个具有良好分辨率和低于代码的图像。

UIImage *bgImage = [UIImage imageNamed:@"[email protected]"];
CGSize screenSize = [UIScreen mainScreen].bounds.size;
UIGraphicsBeginImageContextWithOptions(screenSize, NO, 0.f);
[bgImage drawInRect:CGRectMake(0.f, 0.f, screenSize.width, screenSize.height)];
UIImage * resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIColor *backgroundColor = [UIColor colorWithPatternImage:resultImage];
self.view.backgroundColor = backgroundColor;

Answer 7

有三种Apple设备（iPhone和iPad）

普通设备，1像素= 1点@ 1x（较旧的iPhone和iPad设备）

视网膜设备，4像素（2 x 2）= 1点@ 2x（iPhone 5+）

Retina iPhone6和iPad，其中9像素（3 x 3）= 1点@ 3x（iPhone6 +）

对于不支持iPhone 4s的iOs 10，因此您只需要@ 2x和@ 3x图像。

如上图所示，iPhone 6也支持@ 2x Scale，因此使用@ 2x的图像尺寸为750 * 1334，对于图像模式，@ 3x的图像尺寸为1242 * 2208。