SwiftUI Version notification bar application development (4) — multi-language localization adaptation

It is estimated that we hope to develop multi-language version of APP, especially for iOS/Mac APP development, the launch of APP Store hope to be used in other regions, so today I mainly want to learn how to do some text and string text multi-language based on SwiftUI.

Believe that many such articles on the market for reference

The Project configuration

First, in the Project Info option, select Localization to add a Localization of “Chinese”. If you need another language, you can add the corresponding one:

Next, create the corresponding Group folder, such as the two groups in this article: en.lproj, zh-hans.lproj:

Create a Strings file with the same name in both groups: Localizable

The code

With that done, we create a Preferences demo:

Introduce the variable locale on our main View:

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

Then create a Text:

The Text (" Preferences "). The font (. Customf (22)). The padding (the bottom, 10.0)Copy the code

Let’s see what happens when we define en:

If we change to zh-hans:

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

The result is different:

Locale change function

Now that you’ve got the basic functionality, you just have to set a switch to change the Locale.

First, create a Picker:

Section(header: Text("localization")) {
    Picker("", selection: $localeViewModel.localeString) {
        ForEach(LocaleStrings.allCases) { localeString in
            Text(localeString.rawValue)
                .tag(localeString.suggestedLocalication)
        }
    }
    .pickerStyle(SegmentedPickerStyle())
}
Copy the code

Where, I define two enUms to make the selection type:

enum Localication: String, CaseIterable, Identifiable { case zh_Hans = "zh-Hans" case en = "en" var id: String { self.rawValue } } enum LocaleStrings: Identifiable {case zh_Hans = "中文" case en = "English" var id: 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 } } }Copy the code

This is easy to understand because the String displayed was inconsistent with the String provided for the locale. For example, the String displayed “Chinese” and the String provided for the locale was zh-Hans. I used suggestedLocalication to make a bridge conversion.

Finally, we create a Combine ViewModel variable localeString to change the localized string contents in real time.

class LocaleViewModel: ObservableObject {
    @Published var localeString: Localication
}
Copy the code

Finally, just add the localeString update to the ViewModel subscription variable in the specific View:

// 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))
    }
}
Copy the code

Ok, code written, let’s run to see the effect:

summary

It basically runs through the process of localization and multilingual adaptation, followed by the constant addition of new languages and translations.

To be continued