如何在 SwiftUI 视图中显示应用图标和版本

前言

在应用中显示应用图标和版本是为用户提供快速识别应用版本和变体的好方法，无论是内部用户（如测试人员或利益相关者）还是外部用户。

在本文中，我将展示如何创建一个可访问的 SwiftUI 视图，既能显示应用图标和版本，又能在各种文本大小和外观下看起来都很好：

获取应用图标

构建视图的第一步是从主包中获取应用图标。可以通过检索应用的 Info.plist 文件中的一组键值来完成，如 Stack Overflow 上的这个答案所示：

AppIconProvider.swift
import Foundation

enum AppIconProvider {
    static func appIcon(in bundle: Bundle = .main) -> String {
        guard let icons = bundle.object(forInfoDictionaryKey: "CFBundleIcons") as? [String: Any],
              let primaryIcon = icons["CFBundlePrimaryIcon"] as? [String: Any],
              let iconFiles = primaryIcon["CFBundleIconFiles"] as? [String],
              let iconFileName = iconFiles.last else {
            fatalError("Could not find icons in bundle")
        }
        return iconFileName
    }
}

让我们逐步了解以上代码：

1. 我们检索 Info.plist 文件中 CFBundleIcons 键的值。这个值是一个包含应用图标信息的嵌套字典。
2. 我们检索 CFBundleIcons 字典中 CFBundlePrimaryIcon 键的值。这是一个包含应用主图标信息的字典。
3. 我们检索 CFBundlePrimaryIcon 字典中 CFBundleIconFiles 键的值。这是一个包含应用图标文件名的数组。这些文件名可用于创建命名的 UIImage。
4. 最后，我们检索 CFBundleIconFiles 数组中的最后一个值。

获取应用版本

现在我们有了应用图标，让我们检索应用版本字符串。类似之前的步骤，我们需要读取应用 Info.plist 中 CFBundleShortVersionString 键的值：

AppVersionProvider.swift
import Foundation

enum AppVersionProvider {
    static func appVersion(in bundle: Bundle = .main) -> String {
        guard let version = bundle.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String else {
            fatalError("CFBundleShortVersionString should not be missing from info dictionary")
        }
        return version
    }
}

如果你想在视图中包含版本号和构建号，可以检索 CFBundleVersion 键的值。

创建 SwiftUI 视图

现在让我们将所有内容结合起来，创建一个 SwiftUI 视图，显示应用图标和版本：

AppVersionInformationView.swift
import SwiftUI

struct AppVersionInformationView: View {
    let versionString: String
    let appIcon: String

    var body: some View {
        HStack(alignment: .center, spacing: 12) {
            if let image = UIImage(named: appIcon) {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .clipShape(RoundedRectangle(cornerRadius: 8))
            }
            VStack(alignment: .leading) {
                Text("Version")
                    .bold()
                Text("v\(versionString)")
            }
            .font(.caption)
            .foregroundColor(.primary)
        }
        .fixedSize()
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("App version \(versionString)")
    }
}

让我们逐步了解以上代码：

1. 该视图需要两个参数：应用版本和应用图标。这些值通过我们之前创建的提供者传递给视图。
2. 我们在一个水平堆栈中显示应用图标和版本，间距为12点。
3. 我们在 Image 视图中显示应用图标。但是，应用图标只能作为命名的 UIImage 检索，所以我们需要先创建 UIImage，然后再转换为 SwiftUI Image。
4. 我们在一个垂直堆栈中显示应用版本，包括一个标签和应用版本字符串。
5. 我们使用 fixedSize() 修饰符确保应用图标和 VStack 视图的高度相同。
6. 最后，我们将所有子视图组合成一个可访问的元素，并为其提供标签，以便为 VoiceOver 用户提供更好的体验。

最终结果是一个在各种文本大小下都看起来很好的视图：

在应用中显示版本信息视图

Copy code
ContentView.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        AppVersionInformationView(
            versionString: AppVersionProvider.appVersion(),
            appIcon: AppIconProvider.appIcon()
        )
    }
}

总结

在这篇文章中，我们学习了如何在 SwiftUI 应用中显示应用图标和版本信息。这对于用户（无论是内部测试人员还是外部用户）来说，是一种快速识别应用版本和变体的有效方法。我们通过从主包中检索 Info.plist 文件中的相关键值，获取应用图标。具体步骤包括读取 CFBundleIcons、CFBundlePrimaryIcon 和 CFBundleIconFiles 键的值，并获取图标文件名。接着，我们采用类似的方法，通过读取 Info.plist 文件中的 CFBundleShortVersionString 键的值，获取应用版本信息。

在获取到应用图标和版本信息后，我们创建了一个 SwiftUI 视图来展示这些信息。该视图使用水平堆栈（HStack）布局，将应用图标和版本信息并排显示。同时，我们通过使用 fixedSize() 修饰符确保视图高度一致，并使用 accessibilityElement 使其对 VoiceOver 用户友好。通过这些步骤，开发者可以轻松实现一个兼具功能性和可访问性的版本信息视图。