新 Iphone 型号发布后的整页背景图像大小 (Xcode)

Posted 2023-03-15

【中文标题】新 Iphone 型号发布后的整页背景图像大小 (Xcode)

【英文标题】：Full page background image sizes after new Iphone models has been released (Xcode)

【发布时间】：2018-09-17 05:27:27

【问题描述】：

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

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

假设我想创建一个整页背景图片。你能确认一下 x、@2x 和 @3x 的尺寸吗？

@x 的 375x667 像素是真的吗？ @2x 是 750x1334 像素吗？ 3x 大小呢？ 1242x2688（@3x 尺寸的参考应该是 iPhone Xs Max？）

【问题讨论】：

请看***.com/a/52888548/2892357回答

【参考方案1】：

这是为不同屏幕尺寸（iPhone XS Max、iPhone XS、iPhone Xr）定义图像的非官方技巧。

我发现了一个窍门。在我的应用程序中，我们有所有 iPhone 设备的启动屏幕（见屏幕截图）。

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

在从 Launch Screen 到 Login screen 的转换过程中，我看到了伪影，因为 iPhone X、Xs Max、iPhone Xr 上的图像拉伸

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

更新 AppImages.xcassets/BackgroundImage.imageset/Contents.json文件的内容：

  "images" : [
    
      "idiom" : "iphone",
      "scale" : "1x"
    ,
    
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    ,
    
      "idiom" : "iphone",
      "filename" : "retina4640x960.png",
      "scale" : "2x"
    ,
    
      "idiom" : "iphone",
      "filename" : "retina4640x1136.png",
      "subtype" : "retina4",
      "scale" : "2x"
    ,
    
      "idiom" : "iphone",
      "filename" : "retina47750x1334.png",
      "subtype" : "667h",
      "scale" : "2x"
    ,
    
      "idiom" : "iphone",
      "filename" : "iPhoneXr828x1792.png",
      "subtype" : "1792h",
      "scale" : "2x"
    ,
    
      "idiom" : "iphone",
      "scale" : "3x"
    ,
    
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "3x"
    ,
    
      "idiom" : "iphone",
      "filename" : "retina551242x2208.png",
      "subtype" : "736h",
      "scale" : "3x"
    ,
    
      "idiom" : "iphone",
      "filename" : "iPhoneX1125x2436.png",
      "subtype" : "2436h",
      "scale" : "3x"
    ,
    
      "idiom" : "iphone",
      "filename" : "iPhoneXSMax1242x2688.png",
      "subtype" : "2688h",
      "scale" : "3x"
    ,
    
      "idiom" : "ipad",
      "filename" : "ipad1024x768.png",
      "scale" : "1x"
    ,
    
      "idiom" : "ipad",
      "filename" : "ipad2048x1536.png",
      "scale" : "2x"
    
  ],
  "info" : 
    "version" : 1,
    "author" : "xcode"
  

现在在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

【讨论】：

如果你能分享你修改后的 contents.json 文件会很棒

【参考方案2】：

@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 的回答，但是由于 Apple 发布了新的屏幕尺寸，我来到这里寻找管理资产目录中图像的解决方案。

更新 2： 至于我在这个主题中遇到的主要问题和分辨率/比例解释here，我认为@3x 最好使用 XSMax 分辨率和@2x - Xr 分辨率，所以它会被裁剪但看起来很好而且很清晰contentMode = .scaleAspectFill 的设备，如上所述。对于导出图形，我会喜欢下面的图片：

Xr 的宽度为 1792w，@2x 尺寸和 2688w，@3x

【参考方案3】：

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

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

【参考方案4】：

你可以使用更大的分辨率来解决这个问题

1X - 375x667 + Y

2X - (375*2)x(667*2) + 2Y

3X - (375*3)x(667*3) + 3Y

手机自动设置图片大小。

【讨论】：

作为您的评论，3x 高度大小将是 2001px。这将是质量损失，因为 iPhone Xs Max 需要 2688 像素的高度才能获得清晰的视野。谢谢回复。 @Ali Ihsan URAL

然后您可以使用更大的图像进行分辨率。这不是尺寸问题，是分辨率问题

我读过这个。我再说一遍。它不是尺寸问题。您不必为图像提供这些尺寸。您可以将 1000x1000 用于 1X ， 2000x2000 用于 2X ， 3000x3000 用于 3X 。因此，您不必考虑分辨率。只需为每张图片使用更大的分辨率。

我们需要给问题命名吗？我们没有。大小或分辨率，没关系。此外，我没有写“这是尺寸问题”或“这是分辨率问题”，我只是想为整页背景显示清晰的图像。如果我们在 iPhone Xs Max 中显示 2001 px(height)。质量不会好。因为此设备需要 2688 像素（高度）才能显示清晰的图像。这就是为什么你的回复可能是错误的。我写了这个。然后你说我，'然后你可以使用更大的图像来解决'。这是无稽之谈。因为我希望人们已经在我的问题中关注这个问题。

我的问题很简单：1242x2688 px 适合 @3x 吗？ @3x 尺寸的参考应该是 iPhone Xs Max 吗？就是这样。是或否。如果答复为“否”，那么@3x 的参考设备/尺寸是多少？ (iPhone)