24 Apr How do I implement Localization in iOS apps?
We know that, all the apps in the Apple App Store are English-speaking, i.e. the menu, information, settings and everything else is in English. However, the apps become almost useless for the consumers from non native English speaking countries. Hence, it becomes essential for the developers to release apps with multiple language support. This is where internationalization and localization comes in handy which facilitates the iOS application developers to support numerous native languages that greatly increase the global user experience.
What exactly is internationalization and localization?
- Internationalization and localization means adapting the software product to different languages, regional differences and technical requirements of a targeted market.
- Internationalization is the process of designing a software application, so that it can be adapted to various languages and regions without engineering changes.
- Localization is the process of accommodating internationalized software product for a specific region or language by adding locale-specific components and translating text.
Here is an example to help you grasp the concept:
Let’s say there is an iPhone/iPad application made for Brazilian client and he needs to localize that product to Portuguese language so that every users of Brazil can use it.
Each and every application must contain some hardcoded strings. We need to pull all of these hardcoded strings into a separate file so that we can localize them.
To do this, create a “.strings” file in the Xcode to contain all of the strings that your project needs. Then the hardcoded strings should be replaced with a function call to look up the appropriate string from the “.strings” file based on the current language.
To create a “.string” file, follow below mentioned steps
- Select the Project group in Xcode, and navigate to File >>New >>New File.
- Choose iOS >>Resource >>Strings File, and click Next, as shown in the below snapshot.
- Name the new file Localizable.strings, and then click Save.
Note that the “Localizable.strings” is the default filename; iOS looks for when dealing with localized text. If you rename the file, you’ll need to specify the name of the .strings file every time.
The format for the strings file is:
[sourcecode]"KEY" = "CONTENT";[/sourcecode]
For our ‘Account’ text add in:
[sourcecode]"TITLE" = "Account";[/sourcecode]
Now switch to “ViewController.m”, and find the “viewDidLoad” method. Now you can set the text as below:
[sourcecode]self.titleLabel.text = @"Account";[/sourcecode]
We want it to read from our “.strings” file. For this, you need to change the current line to use a macro called “NSLocalizedString” as shown below:
[sourcecode]self.titleLabel.text = NSLocalizedString(@"TITLE", nil);[/sourcecode]
Adding a Portuguese Localization
Steps to add a Portuguese localization are as follows:
- You need to select “Localizable.strings”, and open the Info pane.
- You can do this by selecting the 3rd tab in the top toolbar of the View section, and selecting the 1st tab in the top section, as shown in the below screenshot.
To add support for another language execute following steps:
- You need to simply click on the ‘+’ (Plus) in that ‘Localization’ pane on the right of the view.
- At first it will create localization for English.
- If the “Localizable.Strings” deselect after your click then select the “Localizable.Strings” again. After the “Localizable.Strings” selected click the ‘+’ button once again and choose ‘Portuguese(pt)’ from the dropdown.
Now, Xcode has set up some directories containing a separate version of “Localizable.strings” for each language that you selected, behind the scenes. To view this for yourself, go to your project folder in Finder and open it. There you’ll get the following:
- ‘en.lproj’ and ‘pt.lproj’ contain language-specific versions of files.
- ‘en’ is the localization code for English, whereas ‘pt’ is for Portuguese.
To change the text for Portuguese, select ‘Localizable.strings (Portuguese)’ and change the text as follows:
[sourcecode]"TITLE" = "Conta";
“Back” = “Voltar”;
It’s all about how to localize a string. But you also need to localize the UI, as the text length for a button may vary in different languages.
How to adjust UI Elements:
Let’s discuss about how to localize the button text.
- For Portuguese let’s say the button text is ‘MODIFICAR’.
- The problem is that you need your button border to be relatively tight around the text. This isn’t a problem for title label because there is no constraint on its width, but here you’ll need to adjust the size of the button to make it look perfect.
- If you simply change the text in “viewDidLoad” it will look odd, as the text of that button may or may not fit into it.
So you need to add localization to your “xib” and make the button bigger in Portuguese.
- Go to “ViewController.xib” and in the info pane on the right of the view, click the ‘+’ button to add a Localization and choose Portuguese.
- Note you may need to scroll down in the Info pane as it has some Interface Builder content in that side.
- Now we have copy of “ViewController.xib” in our Portuguese folder (pt.lproj).
- Select “ViewController.xib (Portuguese)”, and edit the button text in that version to say ‘MODIFICAR’.
- It will resize the button by default.
Once, all the set up is done perfectly, delete the application from simulator/device and select Project>>Clean to get a fresh build and install. Then build and run your app.
How to apply localization for Images:
If you have text in your image you need to localize it.Follow the steps mentioned below.
- Select the .jpg file and add localization for Portuguese.
- Check out the project folder.
- The ‘.jpg’ image file has been added to the English folder (en.lproj) and then copied to the Portuguse folder (pt.lproj).
- To make a different image for the Portuguese version, you need to overwrite the image in the Portuguese folder.
- Rebuild and get the final result!
It is better to have localization in your apps to target the global users. The app will display the contents according to the visitor’s language.
- Same information can be shared across the world.
- Great user experience.