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

iOS: Preparing background images for applications

提问by Nikita Zernov

Mostly every iOS application has a view with an image as background. Is there any image sizing guide out there? For example here is an iOS screen designed in Sketch:

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

As you can see there is a background image. Now there are lots of Apple devices every application should support. The new iOS 10 supports all devices from iPhone 5 to iPhone 6s Plus. They have different screen sizes and resolutions. When creating Xcode assets, I am giving 3 background images with different sizes - @1x, @2x, @3x. What sizes should they be?

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

回答by OhadM

The way I see it you have 2 options:

在我看来，您有 2 个选择：

1. In hereyou will find the resolutions of the iPhone's:

1. 在这里你会找到 iPhone 的分辨率：

• You don't need the @1 imagesince you don't support iPhone 4 and 4s (iOS 10).
• @2 is for iPhone 5,5c,5S,6 and 6s so basically you can create @2 image of the highest resolution which is the iPhone 6 and this image will work well for the iPhone 5 family.
• Or, you can create an image with resolution for each iPhone and using hard coded logic set the image for eachphone. i.e: if iphone5c { setImage("iphone5cImage") }etc etc..

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

---

---

1. The simplest solution is to create 1 image with the highest resolution. The @3 is the highest for the iPhone 6S+ and it will look amazing for the rest. Don't forget to set the image view as aspect fill.

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

Also, don't forget to check thisthread: How to handle image scale on all the available iPhone resolutions?. It will give you clues of what exactly you are dealing with. TL;DR, It's the options I wrote.

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

回答by sergeng

The background images you only need to give are @2x and @3x, because @1x devices are now long gone in the dusty pages of history.

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

Speaking of @2x and @3x, the image resolutions you give to the developer should be the same with the highest resolution iPhone that uses that given size.

说到@2x 和@3x，您提供给开发人员的图像分辨率应该与使用该给定尺寸的最高分辨率 iPhone 相同。

For @2x, that is the iPhone 6, which is 750x1334, and for @3x, the iPhone 6+ which is 1242x2208.

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

Down-scaling shouldn't be a problem because the aspect ratios of all iPhones that support iOS 10 are the same(16:9).

缩小比例应该不是问题，因为所有支持 iOS 10 的 iPhone 的纵横比都是相同的 (16:9)。

Note for Developer(s):

开发商注意事项：

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.

回答by Ali K?ran

There is design nuance in full size background images. Mostly if the scale aspect fill good enough for different sizes you need to design only for the biggest device size after that the rest of them scale to fit. Sometimes some part of background needs to remain visible or if want to keep a low memory footprint for small device sets you need to create smaller alternatives.

全尺寸背景图像有设计上的细微差别。大多数情况下，如果缩放方面对于不同尺寸的填充足够好，您只需要为最大的设备尺寸进行设计，然后其余的尺寸都可以缩放以适应。有时背景的某些部分需要保持可见，或者如果想要为小型设备集保持较低的内存占用，您需要创建较小的替代方案。

Whenever you make a decision with the design size of asset you need to create @3x,@2x variants.

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

One more thing I need to point out about vector designs. If your design is made only with vectors you can choose pdf vector export. Storyboards can accept vector assets and they are doing very good when scaling in full backgrounds.

关于矢量设计，我还需要指出一件事。如果您的设计仅使用矢量制作，您可以选择 pdf 矢量导出。故事板可以接受矢量资源，并且在全背景缩放时表现非常好。

回答by Rishabh

If you still have the same problem then you can try this one. For this you have to add only one image with good resolution and below code..

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

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;

回答by Bhoomi Jagani

There are 3 kinds of Apple Devices (iPhone and iPad) that is

有 3 种 Apple 设备（iPhone 和 iPad）

Normal device which terms to 1 pixel = 1 point@1x (Older iPhone and iPad devices)

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

Retina device which terms to 4 pixels(2 x 2) = 1 point@2x (iPhone 5+)

相当于 4 个像素（2 x 2）= 1 点@2x（iPhone 5+）的 Retina 设备

Retina iPhone6 and iPad which terms to 9 pixels (3 x 3) = 1 point@3x (iPhone6+)

Retina iPhone6 和 iPad 相当于 9 像素 (3 x 3) = 1 点@3x (iPhone6+)

For iOs 10 that will not support iPhone 4s so you only require @2x and @3x images.

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

As you can see above attached image iPhone 6 also support @2x Scale so use image size for @2x is of 750*1334and for @3x is of 1242*2208with image mode.

如上图所示，iPhone 6 也支持@2x 比例，因此@2x 使用的图像大小为750*1334，@3x使用图像模式为 1242*2208。

回答by Ilya Byshevski

Take a look at the pageon documentation, there is Static Launch Screen Images, and you can catch sizes from there.

查看文档页面，有静态启动屏幕图像，您可以从那里获取尺寸。

You can get a device screen size, using

您可以获得设备屏幕尺寸，使用

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


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

And after you can programmatically select an image you want, from set of an images from the bundle. Or to make a big one image for resizing, using knowledges from documentation, and to resize an imageaccordingly. Or...your choice.

在您可以以编程方式从捆绑包中的一组图像中选择所需图像之后。或者使用文档中的知识制作一个大图像以调整大小，并相应地调整图像大小。或者……你的选择。

Different "sizes" @2x, @3x is scale. And here isthe nice explanation.

不同的“大小”@2x，@3x 是scale。而这里是漂亮的解释。

回答by Sverrisson

I use background images in my Apps. To solve this problem I use one image that has the resolution to cover all iPhones and all the iPads except the large one. The image size is 2048x2048 pointsor 1024x1024 pixels at @2xto cover the 9.7 inch iPad.

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

The image is compressed JPG to keep the size down. Note that I allow it to scale for iPhone 6 Pluse (@3x) and 12.7 inch iPad Pro (@2x) as the quality doesn't seem to be affected. I can justify the scaling for the larger devices, because if I provided image for the 12.7 inch iPad Pro, it will be 5464x4096 points(@2x) and 2732x2048 pixelsand then the JPG compression would have to be so high (if I wanted to keep the size down), that the quality of the image was low anyway compared with scaling.

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

If you need high quality try both JPG and PNG for comparison, because the PNG becomes very large for complex images, but gives the best quality.

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