Integrating Multi-Language Support (Localization) to the iOS App
Hi, everyone. This is Yuşa and I am working at WeWALK as the iOS Developer. In this article, we will learn how to integrate multi-language support for our iOS app. You can apply the same method to either Storyboard or your SwiftUI project. Your app might be an excellent app with great features, but I’m sure its growth will be limited if there is no multi-language support. Adding multi-language support will noticeably grow your app and increase interest. Adding multi-language support will grow your app. To prove it, let’s jump into the research of the Distomo. According to research by Distomo, apps experience an average of 128% growth in downloads shortly after adding localization.
If you follow me on GitHub, you surely know that I am an open sourceror. In one of my open source iOS projects, I started using multi-language support so that my application can appeal to the whole world. Now, I will show you some code snippets from this project where I use multi-language support. You can apply all the lines of code in the story for an existing project or a brand new project. The choice is yours! Additionally, you can also find this open source project at the end of the post! Cool, right? So let’s get started!
Adding Localization Files
To add localization files, let’s select your project file in Project Navigator, and select your project in the PROJECT and TARGETS list. Let’s open the Info tab, and click the“+” button under the Localizations section. Then let’s choose a language we want to support from the dropdown list shown.
Xcode will open a dialog showing resources to be added for the new language. We can click the Finish button. It will create the file under the new language project. (In this example I added Spanish support, so es.lproj folder is created.)
To add a new Strings File, let’s right-click to the folder whatever we want (for me, it will be the Localizable) and select New File…. Under the Resource section, there is the Strings File under there. Let’s select it and press the Next. In the end, let’s choose the folder we want to save it, then choose a name (for me, it will be the Localization), and click the Create.
Let’s open the Localization.strings, Show the Inspectors on the right side of the Xcode. Let’s click Show the File Inspector. Under the Show the File Inspector section, there is a section called Localization. Under the Localization, there is a button called Localize…. Let’s click that, and select the language we want to localize (for me, it will be Spanish).
Let’s create our localization files for both English and Spanish. We will define all words (or phrases) as in the following line:
// An example
"hello_world" = "Hello World!";Now let’s fill our files with our contents and see the English and Spanish localization files respectively.
We are ready now. Let’s install the library.
Installing the Library
So, let’s dive into the programming! The first job is installing our localization library. For this, we will use Localize-Swift. Localize-Swift is a library that allows you to add multi-language support to your iOS app. To install it, let’s follow the following steps:
- Let’s select File > Swift Packages > Add Package Dependency. Let’s enter
https://github.com/marmelroy/Localize-Swift.gitin the "Choose Package Repository" dialog. - On the next page, let’s specify the version resolving rule as “Up to Next Major” with “3.2.0”.
- After Xcode checked out the source and resolving the version, we can choose the “Localize-Swift” library and add it to our app target.
Importing Localize-Swift
In my project, which is a COVID-19 tracking app, there are two different Views as the RecentsView and the WorldDataView. The RecentsView represents general information about COVID-19, while the WorldDataView represents detailed information about a country’s COVID-19. Let’s localize the application now.
We can import the multi-language support using the following line in Swift:
import Localize_SwiftWe will use .localized() at the end of all keywords to localize. We can implement the keyword(s) as in the following line:
// NavigationView will cover the RecentsView.NavigationView {... // The title of the NavigationView.
.navigationBarTitle("Spreat - \(("recent").localized())", displayMode: .inline)
}
Now, the language of our application can change automatically according to the language of our phone. To test this, we can update the language on our phone by following Settings> General> Language & Region> iPhone Language.
Changing the Current Language within the App
As a second option, we have the opportunity to change the application language within the app.
For this, let’s create a Picker and add the existing languages to the Picker. Let’s notify the language selected in Picker and the code of this language to Localize-Swift and Notification Center.
NOTE: After setting the new language with the Localize.setCurrentLanguage(x) method, the localized() methods will start working according to the new language. However, when you return to the UIViewControllers (or Views) that were loaded before changing the language with the navigation back, you will observe that the texts on these screens do not change. To prevent this, we throw a local notification called changeLocale. The UIViewControllers (or Views) behind have to listen to the changeLocale notification while loading. Make sure you call your localized() methods in the declaration method so that the text in the corresponding UIViewControllers (or Views) that captures this notification changes according to the new language.
import Localize_Swift ... // Current languages that have been support by Spreat.
private let languages: [String] = Localize.availableLanguages() // Store the selected language from the picker.
@State private var selectedLanguageIndex: Int = 0 var body: some View {
NavigationView { ... Picker("", selection: $selectedLanguageIndex) {
ForEach(0..<languages.count) {
Text(self.languages[$0])
}
}
.pickerStyle(WheelPickerStyle()) if #available(iOS 14.0, *) {
Button(action: { ... // Set the current language.
Localize.setCurrentLanguage( self.languages[self.selectedLanguageIndex]) // To update the UI in the View where a language change can take place, observe LCLLanguageChangeNotification.
NotificationCenter.default.addObserver(self, selector: Selector(("changeLocale")), name: NSNotification.Name(rawValue: LCLLanguageChangeNotification), object: nil)
self.showRecents.toggle()
}) {
Text("ok".localized())
}
.fullScreenCover(isPresented: $showRecents) {
// Go to the "RecentsView".
RecentsView()
}
} else {
// Fallback on earlier versions
} ...
}
Let’s localize the related fields of the View and see the results:
