Localization of IOS App in swift 4 and Xcode 9
In this tutorial, I will walk us through building a simple app that will enable us localize the app’s text content and images to suit the languages or region the app will be supporting. But before going further, I should explain what localization is all about in iOS app development.
Localization is simply the process of translating your app into multiple languages. However, before you can localize your app, you first need to internationalize it. Hmm! I know you are asking, “What the heck is internationalization?!” Hold on, you will get the hang of it in a moment. Internationalization is the process of making your app able to adapt to different languages, regions, and culture. Simple enough, I guess.
So, let’s get started. In this tutorial, I’m using Xcode 9.1, which is the latest version of Xcode at the time of this writing.
First of all, let’s create a new Xcode project. Open up your Xcode, select File, then select New, and then Project… Choose Single View App and click Next. Let’s use LocalizationApp as the project name. Click Next after typing the name of the project. Make sure you select Swift as your Language.
This is what we’ve got so far:
From the object library, drag two labels and an image view onto the storyboard. We will be using Auto Layout to position these UI objects on the storyboard in precisely the way we want.
Note: Auto Layout is based on the idea that each object in your interface can define constraints to control how it reacts to the parent view and other interface controls
So, this is what we have got:
Let’s change the text on the labels and also add an image to the image view. We’ll add text to the first label directly in the storyboard, but programmatically add text to the second label. Thus, we need to delete the default text (“Label”) for the second label. Let’s do this and also add some constraints to our UI objects below.
For the image, drag your custom image to the project root folder and click Finish.
Next, we create a New Group where we’ll keep the image we added to our project root. Right click on the root folder and select New group. Then change the folder name to images.
After renaming the folder, drag your image into the images folder as shown:
We are good to go now. Let’s add the image to our storyboard and add the needed constraints using Auto Layout.
NOTE: When adding constraints to your labels that will display text, do not add a fixed width constraint. This avoids the problem of some parts of your text being clipped when localizing your app to another language that may require longer text.
If you’ve gotten to this point, then you are good to go. The running app is shown in the screenshot below:
Now, let’s get to the business of actually localizing the app. You may remember we said that before localizing the app we first need to internationalize it, right? Yeah, so, let’s get started on the internationalization process.
We can connect our UI elements to code through the assistant editor. The assistant editor helps us interact with our storyboard and the ViewController.swift file at the same time. So, when you are on assistant editor, click on the first label and Ctrl+Drag to the ViewController.swift file on the right side to connect the outlet to the label.
Next, click on the storyboard so that we can add a new language to the base selection which is the default. Click on the file inspector as shown in the screenshot below and check English:
Once you select English, it will generate a file for you. Check the Main.storyboard file. You will notice that it is a folder now with files Main.storyboard(base) and Main.strings(English). The Main.Strings file contains the strings extracted from the storyboard.
Add the following lines of code to your viewDidLoad method in ViewController.swift file
let greetingsMessage = NSLocalizedString("seasonsGreetings", comment: "Seasons greeting")let attributedText = NSMutableAttributedString(string: greetingsMessage, attributes: [NSAttributedStringKey.font : UIFont.boldSystemFont(ofSize: 18), NSAttributedStringKey.foregroundColor: UIColor.white])message!.attributedText = attributedText
Note: The need for attributed text is to have associated attributes for portions of your text.
So create a string file to hold the value of our text in the NSLocalizedString macro.
Name the file Localizable and put it in the en.lproj folder. Note: You should name the file Localizable.
When you click on Create, the file might be hidden. To see the file, right click the ViewController.swift file and select Show in Folder and click on the en.lproj folder to see the Localizable.string file. Open it and add the following code snippet to it.
"seasonsGreetings" = "Compliment of the season from all of us";One more thing, lets delete greetingsLabel because we won’t be needing that variable in our code. We will only be adding text programmatically to the second label. But wait, you have to delete it the proper way, otherwise you will be getting SIGNAL SIGABRT runtime error when you try to run your app. So, click the first label on the storyboard and click on the Connection Inspector as shown below. After deleting as shown below, you can then delete it from your code.
Shown below is what we have achieved so far. At this stage we are good to go on localizing our app to support another language — in this case, French.
So, let’s finish up. Follow the steps on the screenshot below to add French language support to our project.
Once you choose French, select all as shown below and click finish.
We’re almost done. It’s time to add the translated version of our UI text to the file for French support. To finish up, I used Google Translate in translating from English to French.
Let’s see what we’ve got so far. Click on the scheme editor and change the language to French as shown below.
Now when we run the app we should have:
YES, we made it! We now have our app supporting French. But wait a minute! The text on the image is still in English. That text might not make sense to a French national. We need to localize the image as well so that we can display a French version of the image if our language is French.
To localize our image, in the images folder, click on the image. Under Localization in the file inspector, click on Localize and finally click Localize.
Once you check French, Xcode will generate some files for you. Check your image now and you should see some new files.
Finally, open the images folder and open the fr.lproj folder. Then replace the image there with a French version of the image and make sure you don’t rename the image file. Use same name for both the English and French versions of the image.
At this point, we are finally done. Let’s run the app again and see our handiwork:
Hurray!!! At this point, congratulate yourself for a job well done. We did it together.
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
