如何从 Xcode 8 中的 Assets.xcassets 添加不同屏幕尺寸的图像？答案

【问题标题】：How to add Images for different screen size from Assets.xcassets in Xcode 8?如何从 Xcode 8 中的 Assets.xcassets 添加不同屏幕尺寸的图像？
【发布时间】：2017-10-15 03:46:49
【问题描述】：

我为我的登录屏幕创建了不同大小的背景图像。
我参考了苹果链接https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/
但我没有做启动屏幕，我只想为登录屏幕添加背景。

我想知道 1x 、2x 和 3x 是什么？

另一个问题是当我创建图像集时，应该将哪个尺寸的图像拖到哪个位置。我对此一无所知。还是我们只需要 3 张图像（在通用行中）？
然后，横向图像怎么样？我应该把这个放在哪里？

【问题讨论】：

在stackoverflow.com/a/52888548/2892357查看我的回答

标签： ios swift uiimage image-size launchimage

【解决方案1】：

我会创建以下尺寸：

iPhone：

@1x - 640 x 1136 (iPhone SE)
@2x - 750 x 1334（iPhone 7、6S）
@3x - 1242 x 2208（iPhone 7 Plus、iPhone 6S Plus）

iPad：

@2x - 2048 x 1536（iPad Air、Retina iPad 第 1 代和第 2 代/第 3 代和第 4 代以及 Pad Mini 第 2 代和第 3 代）

【讨论】：

兄弟 iPad 兄弟怎么样？
兄弟@RashwanL，你也为 Landscape 创作了吗？
对于横向来说，iPhone 7 @2x 纵向是相反的，它是 750 x 1334，对于横向是 1334 x 750。你明白了吗？
是的，兄弟。但我不知道该拖到哪里。那么，对于纵向版本，我应该创建另一个图像资产吗？
@MayPhyu，我认为只需将它们拖到资产目录中就足够了。

【解决方案2】：

实际上，您需要为此编写代码。

首先，您将图片分别放在不同名称的资产中。

第二，使用如下代码：

    var backgroundImageName = ""
    switch UIScreen.main.bounds.height {
        case 480:
            //for iPhone4s,
            backgroundImageName = "background_iPhone4s"
            break;
        case 568:
            //iPhone SE, iPhone5, iPhone 5s
            backgroundImageName = "background_iPhone5"
            break;
        case 667:
            //iPhone 6, 6s, 7
            backgroundImageName = "background_iPhone6"
            break;
        case 736:
            //iPhone 6 plus, 6s plus, 7 plus
            backgroundImageName = "background_iPhonePlus"
            break;
        default:
            break;
    }
    backgroundImageView.image = UIImage(named: backgroundImageName)

【讨论】：

那么，您创建了 4 个图像资产？并且在每个图像资源中，会有 1x、2x 和 3x？
是的，4 个图像资源。对于 plus 设备，将图像放入 3x，为 2x 和 1x 保留空白。对于其他人，将图像放入 2x，3x 和 1x 保持空白。永远不需要 1x（旧设备现在非常罕见）
好的。我可以知道您创建了哪些尺寸，包括 ipad
对于非视网膜 iPad，高度为 512. Retina iPad', 1024. iPad pro 12.9", 1366。最好在模拟器上测试。
@YunCHEN 请看我的回答stackoverflow.com/a/52888548/2892357

【解决方案3】：

我同意 Yun CHEN 的观点，因为我认为最安全的解决方案是为每个分辨率设置一个 Image Set，从而避免在设备上执行图像缩放。

同样正确的是，根据设备的渲染因子（2x、3x 等）（例如 4.7 英寸 iPhone 上的 2x，如 iPhone 8），您只需放置适当大小的图像在相应的插槽中。例如，iPhone 8 的图像集只需要 2x 图像。

但是，请注意以下几点：

UIScreen.main.bounds.height 返回逻辑分辨率的高度 - 即点，与返回实际分辨率的高度 - 即像素（实际上，UIScreen.main.nativeBounds.height 始终返回设备在纵向模式下的像素高度，即使您处于横向模式也是如此）。 您应始终使用与实际分辨率（即像素）相匹配的图像，即使您检查点也是如此。
从 iOS 8 开始，无论您的设备处于纵向还是横向模式，UIScreen.main.bounds.height 都会返回不同的值。因此，如果您想使用它来区分设备，您应该检查您的 App 可以使用的所有值，并且您应该为每个值设置一个单独的 Image Set。

例如，对于同时在纵向和横向模式下工作的应用程序：

    var backgroundImageName = ""
    if UIDevice().userInterfaceIdiom == .phone
    {
        switch UIScreen.main.bounds.height
        {
        case 812:   // 5.8" (iPhone X) (3x) (Portrait)
            backgroundImageName = "background_1125x2436"
        case 736:  // 5.5" (iPhone 8+, 7+, 6s+, 6+) (3x) (Portrait)
            backgroundImageName = "background_1242x2208"
        case 414:  // 5.5" (iPhone 8+, 7+, 6s+, 6+) (3x) (Landscape)
            backgroundImageName = "background_2208x1242"
        case 667:  // 4.7" (iPhone 8, 7, 6s, 6) (2x) (Portrait)
            backgroundImageName = "background_750x1334"
        case 375:
            // 5.8" (iPhone X) (3x) (Landscape)
            if (UIScreen.main.bounds.width == 812) {
                backgroundImageName = "background_2436x1125"
            }
            // 4.7" (iPhone 8, 7, 6s, 6) (2x) (Landscape)
            else if (UIScreen.main.bounds.width == 667) {
                backgroundImageName = "background_1334x750"
            }
        case 568:  // 4.0" (iPhone SE, 5s, 5c, 5) (2x) (Portrait)
            backgroundImageName = "background_640x1136"
        case 320:  // 4.0" (iPhone SE, 5s, 5c, 5) (2x) (Landscape)
            backgroundImageName = "background_1136x640"
        default:
            break
        }
    }
    else if UIDevice().userInterfaceIdiom == .pad
    {
        switch UIScreen.main.bounds.height
        {
        case 1366:  // 12.9" (iPad Pro 12.9) (2x) (Portrait)
            backgroundImageName = "background_2048x2732"
        case 1112:  // 10.5" (iPad Pro 10.5) (2x) (Portrait)
            backgroundImageName = "background_1668x2224"
        case 834:  // 10.5" (iPad Pro 10.5) (2x) (Landscape)
            backgroundImageName = "background_2224x1668"
        case 1024:
            // 12.9" (iPad Pro 12.9) (2x) (Landscape)
            if (UIScreen.main.bounds.width == 1366) {
                backgroundImageName = "background_2732x2048"
            }
            // 9.7" & 7.9" (iPad Pro 9.7, iPad Air 2, iPad Air, iPad 4, iPad 3, iPad Mini 4, iPad Mini 3, iPad Mini 2) (2x) (Portrait)
            else if (UIScreen.main.bounds.width == 1366) {
                backgroundImageName = "background_1536x2048"
            }
        case 768:  // 9.7" & 7.9" (iPad Pro 9.7, iPad Air 2, iPad Air, iPad 4, iPad 3, iPad Mini 4, iPad Mini 3, iPad Mini 2) (2x) (Landscape)
            backgroundImageName = "background_2048x1536"
        default:
            break
        }
    }
    self.backgroundImageView.image = UIImage(named: backgroundImageName)

如果需要包含其他设备（例如 Apple Watch），则依此类推。

【讨论】：