使用 SwiftUI 在多个 iOS 设备上显示具有准确尺寸的标尺图像

Question

我正在寻找一种以英寸或毫米而不是点或像素来定义图像大小的方法。 我想在白色背景上显示标尺的图像。 无论使用何种设备（即 iPad air、iPad pro、iPhone se、iPhone 11、iPhone 11 pro 等），我都希望在使用物理标尺测量时屏幕上的图像填充一致的尺寸。

我见过以为每个设备创建单独图像为中心的解决方案，但我真的很高兴发现一种方法，我可以使用它在所有 iOS 设备上缩放单个图像的大小。

如果我的任何语言有错误或令人困惑，请随时指出/要求澄清。 我是一个渴望批评的绿色开发者。

Answer 1

这通常比它应该的更难。 Apple 不希望您为特定设备设计界面，但是对于此应用程序，您必须知道您正在运行的特定设备，以便您可以查找该设备的每英寸点数。 当我说查找时，您需要提供自己的表（字典），将设备名称映射到每英寸点数。

先说第一件事。 你如何获得设备名称？

您可以通过以下方式获得：

UIDevice.current.name

要查找各种设备返回的内容，请运行以下命令：

struct ContentView: View {

    var body: some View {
        HStack {
            Text(UIDevice.current.name)
        }
    }
}

在各种设备模拟器上发现它们返回的内容。 最近的一些是"iPhone 11 Pro Max" 、 "iPhone 11 Pro" 、 "iPhone 11" 、 "iPad Pro (12.9-inch) (4th generation)" 。

在 SwiftUI 中，当您指定帧大小时，您使用的是points ，而不是pixel 。 所以你需要知道所有设备的每英寸点数。

此表包含有关许多设备及其分辨率和点尺寸的大量信息。 通过一些工作，您可以得出各种设备的每英寸点数。 在大多数情况下，每英寸点数只是每英寸像素数除以图像资产乘数（ @2x或@3x ）。 例外是 5.5 英寸 iPhone（6S+、7+、7S+、8+），它们的分辨率没有它们应有的那么高，所以那里有一个额外的1.15比例因子。

一旦获得了每英寸点数，我建议创建一个字典，将设备名称映射到每英寸点数。

let pointsPerInch: [String : CGFloat] = [
    "iPhone 8": 163,                               // 326 ppi / 2
    "iPhone 8 Plus": 153.716,                      // 401 ppi * 1.15 / 3
    "iPhone 11": 163,                              // 326 ppi / 2
    "iPhone 11 Pro": 152.66,                       // 458 ppi / 3
    "iPhone 11 Pro Max": 152.66,                   // 458 ppi / 3
    "iPad Pro (12.9-inch) (4th generation)": 132   // 264 ppi / 2
]

最后，您将获得一些标尺图像。 您需要在图像资产中提供这些图像的 @2x 和 @3x 版本。 我建议@2x 图像使用 326 ppi，@3x 图像使用 458 ppi。 iOS 将自动加载适合您设备的 @2x 或 @3x 版本。

在您的应用程序中，您需要查找设备名称，然后使用您的字典查找每英寸的点数。 然后您将每英寸点数乘以您将显示的图像的大小（例如，12 英寸的标尺将是每英寸点数 * 12）。 这将为您提供用于图像帧大小的点尺寸。

Answer 2

有一个用于设备 PPI 检测的包： Clafou/DevicePpi

let ppi: Double = {
    switch Ppi.get() {
    case .success(let ppi):
        return ppi
    case .unknown(let bestGuessPpi, let error):
        // A bestGuessPpi value is provided but may be incorrect
        // Treat as a non-fatal error -- e.g. log to your backend and/or display a message
        return bestGuessPpi
    }
}()