SwiftUI版通知栏应用开发(4) ——多语言本地化适配

开发多语言版本的 APP，估计是大家希望的，尤其对于 iOS/Mac APP 的开发，上线 App Store 多希望在其它地区也能使用，所以今天主要想学习怎么基于 SwiftUI 做一些文本和字符串文字多语言化。

相信市面上不少这样的文章可供参考

Project 配置

首先，在 Project Info 选项中，选择 Localization 增加一个「中文」本地化配置，如果你需要其他语言，可以相对应的添加：

接下来，新建对应的 Group 文件夹，如本文的两个 Group：en.lproj、zh-Hans.lproj：

在这两个 Group 里，同时创建同名的 Strings 文件：Localizable：

代码编写

创建完成之后，我们分别创建一个 Preferences demo：

在我们的主 View 上引入变量 locale：

popOver.contentViewController?.view = NSHostingView(rootView: MainView().environment(\.locale, .init(identifier: "en")))

然后创建一个 Text：

Text("Preferences")

    .font(.customf(22))

    .padding(.bottom, 10.0)

刚开始我们定义的是 en，执行看看效果：

如果我们改为 zh-Hans：

MainView().environment(\.locale, .init(identifier: "zh-Hans"))

结果也就不一样了：

Locale 变化功能

基本功能实现了，接下来就是设置一个开关来变化 Locale 了。

首先，创建一个 Picker：

Section(header: Text("localization")) {

    Picker("", selection: $localeViewModel.localeString) {

        ForEach(LocaleStrings.allCases) { localeString in

            Text(localeString.rawValue)

                .tag(localeString.suggestedLocalication)

        }

    }

    .pickerStyle(SegmentedPickerStyle())

}

其中，我定义两个 enum 来做选择的类型：

enum Localication: String, CaseIterable, Identifiable {

    case zh_Hans = "zh-Hans"

    case en = "en"

    var id: String { self.rawValue }

}


enum LocaleStrings: String, CaseIterable, Identifiable {

    case zh_Hans = "中文"

    case en = "English"

    var id: String { self.rawValue }

}


extension LocaleStrings {

    var suggestedLocalication: Localication {

        switch self {

            case .zh_Hans: return .zh_Hans

            case .en: return .en

        }

    }

}

这个好理解，因为显示的 String 和提供给 locale 的字符串不一致，如显示的是「中文」，提供给 locale 的是 zh-Hans，这里我借助 suggestedLocalication 做桥梁转换。

最后，我们创建一个 Combine ViewModel 变量 localeString，以供实时变化改变本地化字符串内容。

class LocaleViewModel: ObservableObject {

    @Published var localeString: Localication

}

最后，只需要在具体的 View 里加入 ViewModel 订阅变量 localeString 的更新：

// ContentView.swift


import SwiftUI


struct ContentView: View {

    @ObservedObject private var timerViewModel: TimerViewModel

    @ObservedObject private var localeViewModel: LocaleViewModel

    init(timerViewModel: TimerViewModel, localeViewModel: LocaleViewModel) {

        self.timerViewModel = timerViewModel

        self.localeViewModel = localeViewModel

    }


    var body: some View {

        Text("localization")

            .font(.customf(14))

            .padding()

            .environment(\.locale, .init(identifier: localeViewModel.localeString.rawValue))

    }

}

好了，代码编写完毕，我们运行看效果：

小结

基本跑通本地化多语言适配流程，接下来就是不断增加新的语言和翻译工作。

未完待续