Question

这是您所知道的iPhone分辨率；

Iphone Xs Max 414x896点以3x，1242x2688 px渲染
Iphone Xr 414x896点以2x，828x1792 px渲染
iPhone X，Xs 375x812点。以3x，1125x2436 px渲染
iPhone 6 +，6s +，7 +，8 + 414x716点，以3x，1242x2208 px渲染
iPhone 6、6s，7、8 375x667点，以2x渲染，750x1334px

假设我要创建一个整页背景图片。您可以确认x，@ 2x和@ 3x大小吗？

@x是否为375x667像素？
@ 2x是否为750x1334像素？
3倍尺寸怎么样？ 1242x2688（对于@ 3x尺寸，参考应该是iPhone Xs Max吗？）

Answer 1

这是定义不同屏幕尺寸（iPhone XS Max，iPhone XS，iPhone Xr）的图像的非正式技巧。

我发现了一个把戏。在我的应用程序中，我们为所有iPhone设备提供了启动屏幕（请参见屏幕截图）。

在Launch screen之后出现的下一个屏幕是Login。它应该具有与Launch screen相同的图像。不幸的是，Xcode开箱即用地在image set中创建了以下Assets（iPhone 1x，2x，3，iPad 1x，2x-如图）。

在从Launch Screen到Login screen的过渡过程中，我看到了伪像，因为图像在 iPhone X，Xs Max，iPhone Xr

上拉伸

要解决此问题，我将Contents.json文件从LaunchImage.launchimage文件夹复制到了 Finder 中的BackgroundImage.imageset文件夹中（请参见下图的步骤）

现在在Xcode中，我看到以下模板。我可以为以下设备定义背景图像：Retina HD 4.7“（iPhone 6，iPhone 7，iPhone 8），Retina HD 5.5”（iPhone 6 Plus，iPhone 7 Plus，iPhone 8 Plus），iPhone Xr，iPhone X / iPhone Xs ，iPhone Xs Max

Answer 2

为此，只需创建具有通用设备支持的图像集。

添加具有最新设备尺寸的单个图像我使用了 1242 × 2208。在 xib/storyboard 中添加带有 content-Mode AspectFit 的 imageview 并且它工作正常。

Answer 3

您可以使用更大的分辨率来解决此问题

1X-375x667 + Y

2X-（375 * 2）x（667 * 2）+ 2Y

3倍-（375 * 3）x（667 * 3）+ 3倍

手机会自动设置图像大小。

Answer 4

@Igor有一个有趣的答案:)排除一件事甚至还不错-然后您的项目的图像数量呈指数增长。相反，您可以拥有3张图片（如果要支持从5到XSMax的设备，甚至可以是2张图片）。因此对角线为4S的图像，然后为5，SE，6、7、8和Xr，X，Xs，XsMax。

当您需要选择合适的图像时，请使用以下代码：

extension UIImage {
    static func imageWithName(_ name: String) -> UIImage? {
        var finalName = name
        switch UIDevice.current.screenType {
        case .short: finalName += "@short"
        case .normal: finalName += "@normal"
        case .tall: finalName += "@tall"
        case .unknown: finalName = ""
        }
        return UIImage(named: finalName)
    }
}

extension UIDevice {
    enum DeviceType: String {
        case iPhones_4_4S = "iPhone 4 or iPhone 4S"
        case iPhones_5_5s_5c_SE = "iPhone 5, iPhone 5s, iPhone 5c or iPhone SE"
        case iPhones_6_6s_7_8 = "iPhone 6, iPhone 6S, iPhone 7 or iPhone 8"
        case iPhones_6Plus_6sPlus_7Plus_8Plus = "iPhone 6 Plus, iPhone 6S Plus, iPhone 7 Plus or iPhone 8 Plus"
        case iPhones_X_XS = "iPhone X or iPhone XS"
        case iPhone_XR = "iPhone XR"
        case iPhone_XSMax = "iPhone XS Max"
        case unknown
    }
    var deviceType: DeviceType {
        switch UIScreen.main.nativeBounds.height {
        case 960: return .iPhones_4_4S
        case 1136: return .iPhones_5_5s_5c_SE
        case 1334: return .iPhones_6_6s_7_8
        case 1792: return .iPhone_XR
        case 1920, 2208: return .iPhones_6Plus_6sPlus_7Plus_8Plus
        case 2436: return .iPhones_X_XS
        case 2688: return .iPhone_XSMax
        default: return .unknown
        }
    }

    enum ScreenType {
        case short, normal, tall, unknown
    }
    var screenType: ScreenType {
        switch deviceType {
        case .iPhones_4_4S: return .short
        case .iPhones_5_5s_5c_SE: fallthrough
        case .iPhones_6_6s_7_8: fallthrough
        case .iPhones_6Plus_6sPlus_7Plus_8Plus: return .normal
        case .iPhone_XR: fallthrough
        case .iPhones_X_XS: fallthrough
        case .iPhone_XSMax: return .tall
        default: return .unknown
        }
    }
}

您应将图像存储在这样的资产目录中-适用于通用设备的单一比例，并带有“ @short”，“ @ normal”，“ @ tall”后缀

用法： bgImageView.image = UIImage.imageWithName（“ main_bg”）

更新：另一个选择是使用@ 1x @ 2x @ 3x图像之类的常规方法，但使用内容模式比例纵横比填充：

bgImageView.contentMode = .scaleAspectFill

然后，您的图像将完美地填满整个屏幕，只有您需要准备好从侧面进行裁剪。如果它没有破坏图像的视图，那么它是最简单，最好的解决方案。

P.S .：我知道我不是在回答主题入门者，但要回答Igor的问题，但是由于苹果发布了新尺寸的屏幕，我到这里来寻找在资产目录中管理图像的解决方案。

更新2： 就我在本主题中遇到的主要问题和分辨率/比例解释了here而言，我认为使用XSMax分辨率对于@ 3x来说是好的，对于@ 2x-Xr分辨率来说，我认为这是很好的，因此它将被裁剪，但是看起来又好又清晰如上所述，在所有具有contentMode = .scaleAspectFill的设备上。对于导出图形，我将在下面的图片中进行操作：

对于@ 2x大小，Xr的宽度为1792w，对于@ 3x，宽度为2688w

发行新的Iphone型号后的全页背景图像尺寸（Xcode）

4 个答案: