Internationalization and localization of Apps in Xcode 6 and Swift

Internationalisation and Localization of apps is essential when you want the apps to seamlessly support different languages and region. Internationalization refers to process of providing a framework to the app for supporting multiple languages. And Localization refers to the process of making your app to support a particular locale such as German

In this tutorial, we are going to see an example app that supports text, number, date, currency and image localisation for English and German languages. This is done by following the below mentioned steps

  • Use NSNumberFormatter, NSDateFormatter for Number, Currency and Date values.
  • Internationalization of Storyboard.
  • Internationalization of text.
  • Internationalization of images.

English

201408072015.jpg

German

 

201409302136.jpg

Download source code from GitHub

Create a new project by clicking File menu -> New -> Project

201408071400.jpg

Select the template for the Project as Single View Application.

201408071401.jpg

In the next screen, provide a name for the project as “Localisation Demo” and select the Language as “Swift” then specify a location and save the project.

User Interface changes – UILabels and UIImageView on ViewController

 

Navigate to Main.storyboard, click default View Controller. Drag and drop 9 Labels and 1 ImageView from Object Library on to Storyboard. These labels are used for displaying the caption and values as shown in the below screenshot.

201408071642.jpg

Declaring IBOutlets for UIControls

Click ViewController.swift in project navigator and add the following IBOutlets after the class declaration.

[code language=”swift”]@IBOutlet var textLabel: UILabel!

@IBOutlet var numberLabel: UILabel!

@IBOutlet var currencyLabel: UILabel!

@IBOutlet var dateLabel: UILabel!

@IBOutlet var imageView: UIImageView!
[/code]

Navigate back to Main.storyboard and connect labels and imageView to the respective outlets.

201408071658.jpg

Populate values for the controls.

 

Click ViewController.swift in Project Navigator and create a new function with name as populateValues

[code language=”swift”]func populateValues() {
textLabel.text = “Good Morning”
numberLabel.text = “9999999.999”
currencyLabel.text = “50000”
dateLabel.text = “07/08/2014”
imageView.image = UIImage(named: “hello”)
}[/code]

The above function populates values for all the controls. The values which are assigned for the fields will be displayed in the screen without localization format. Then add this function as part of ViewDidLoad function.

[code language=”swift”]override func viewDidLoad() {
super.viewDidLoad()
populateValues()
}[/code]

Using Add Files to option, add the image hello.png to the Project folder.

201408071755.jpg201408071756.jpg

Now if you compile and run the project on iOS simulator, you should see the follow screen with values for the labels and image view.

201408071759.jpg

We do not see any formatting applied for Number, Date and Currency Values. Now let us see how to use NSNumberFormatter for formatting number and currency field and NSDateFormatter for formatting date field. Add the following properties after populateValues function in ViewController.swift file.

[code language=”swift”]var numberFormatter: NSNumberFormatter {
let formatter = NSNumberFormatter()
formatter.numberStyle = .DecimalStyle
return formatter
}
[/code]

[code language=”swift”]
var currencyFormatter: NSNumberFormatter {
let formatter = NSNumberFormatter()
formatter.numberStyle = .CurrencyStyle
return formatter
}[/code]

 

[code language=”swift”]var dateFormatter: NSDateFormatter {
let formatter = NSDateFormatter()
formatter.dateStyle = .MediumStyle
formatter.timeStyle = .MediumStyle
return formatter
}
[/code]

 

In the above functions, we are creating respective formatter instances and setting the corresponding styles such DecimalStyle, CurrencyStyle then MediumStyle for date and time values. Now we need to update populateValues function to use these properties for displaying the values.

[code language=”swift”]func populateValues() {
textLabel.text = “Good Morning”
numberLabel.text = numberFormatter.stringFromNumber(9999999.999)
currencyLabel.text = currencyFormatter.stringFromNumber(5000)
dateLabel.text = dateFormatter.stringFromDate(NSDate())
imageView.image = UIImage(named: “hello”)
}

[/code]

Now after applying the correct format, iOS Simulator will use the default system region to display the values for number, currency and date fields

201408071834.jpg

Adding support for another language to your Xcode Project

In order to enable support for German language, first we need to add that language to the Project. This can be done by using the option available as part of Project target. Select the Project folder then the Project target.

201408071715.jpg

Navigate to the Localization section and click the + sign then select German (de) from the list.

201408071718.jpg

Choose the default files listed in the below screen and click Finish.

201408071720.jpg

Now you should see support German language under Localizations section.

201408071720.jpg

Add Localization for controls in Storyboard

First let us see how to add support for another language for the Caption controls in Main.storyboard.

201408071728.jpg

Expand Main.storyboard and click Main.strings (German) . Now enter the German equivalent for Date, Currency, Number and Image as Datum, Währung, Anzahl and Bild. And for rest of the controls, localization will be done in the code.

201408071735.jpg[code language=”plain”]

/* Class = “IBUILabel”; text = “Date :”; ObjectID = “0sh-CK-26C”; */
“0sh-CK-26C.text” = “Datum :”;

/* Class = “IBUILabel”; text = “Number :”; ObjectID = “AeO-ot-XWj”; */
“AeO-ot-XWj.text” = “Anzahl :”;

/* Class = “IBUILabel”; text = “number”; ObjectID = “XDV-eF-gQk”; */
“XDV-eF-gQk.text” = “number”;

/* Class = “IBUILabel”; text = “Image :”; ObjectID = “bvG-x6-Tpx”; */
“bvG-x6-Tpx.text” = “Bild :”;

/* Class = “IBUILabel”; text = “Currency :”; ObjectID = “tVi-KF-Xgb”; */
“tVi-KF-Xgb.text” = “Währung :”;[/code]

Testing Localization changes in iOS Simulator

The changes to Main.storyboard (German) and NSNumberFormatter and NSDateFormatter will have no effect until we set the language and region to German in Xcode debug environment. Click Set the active scheme option and select Edit Scheme from the list.

201408071850.jpg

Navigate to Options under Debug Environment and select German and Germany for Application Language and Application Region.

201408071852.jpg

Now running the app on the iOS simulator should display the captions in german language and apply formats for number, date and currency fields based on German region.

201408071855.jpg

Internationalization of Text using NSLocalizedString

“Good Morning” has to be displayed in the corresponding German language i.e “Guten Morgen”. Add a new File to the project of type Strings and provide a name as Localizable.strings.

201408071912.jpg201408071913.jpg

Select Localizable.Strings in Project Navigator and click Localize button available under File Inspector.

201408071915.jpg

Then Select English in the Localize drop down and make sure to mark German in the Localization section under File Inspector.

201408071917.jpg201408071918.jpg

Now you should be able to expand Localizable.Strings under Project Navigator and see separate files for English and German.

201408071921.jpg

Add the following line in Localizable.Strings (English)

GOOD_MORNING=“Good Morning”;

Add the following line in Localizable.Strings (German)

GOOD_MORNING=“Guten Morgen”;

Now add the corresponding code to use the values from Localizable.Strings file. Click ViewController.swift and change

textLabel.text = “Good Morning”

to

textLabel.text = NSLocalizedString(“GOOD_MORNING”,comment:“Good Morning”)

NSLocalizedString will lookup for the corresponding entry in Localizable.Strings file for the supplied key. Running the app on iOS simulator should not display the German equivalent for “Good Morning”

201409302137.jpg

Internationalization of Images

In the above screenshot, you could see that text in the image is still in English. So we need to add the corresponding image that contains German text and make changes to pick up the entry based on the Application Language. After selecting hello.png in Project navigator, click Localize button under File Inspector. This should provide you with the option to Localize the file in English and German.

201408071954.jpg

Make sure to tick both English and German under Localization section in File Inspector.

201408071955.jpg

Open the Project folder in Finder tool and this should contain two folder for the languages de and en.

201408072004.jpg

Now copy hello.png with german text to de.lproj folder. Do a clean build and run the app on iOS simulator with language and region set to German.

201409302137.jpg

Download source code from GitHub


Comments

25 responses to “Internationalization and localization of Apps in Xcode 6 and Swift”

  1. Thank you so much for the tutorial. I think this is the first and currently the only tutorial on internationalization and localization in Swift. I’ve been looking for one for the past couple of weeks. Learned a lot. Thank you again.

  2. On Xcode6’s changelog appears this: “Implicit .strings file. Xcode automatically generates the base language .strings file directly from your source code—now you no longer need to manage this .strings file by hand.”

    Do you know how to generate this file automatically?

  3. Thank you for this very helpful tutorial !

    However, I do have one question:

    In some string, I have so interpolation, such as “At\(currentWeather.currentTime!) it is”

    If I do the translation in French of this sentence, I put in my localizable file: “À \(currentWeather.currentTime!) il fait”

    However, this prints me in the simulator, the exact text, and not the currentTime I am looking for by interpolation…
    any solution?

    1. I have not tried this but just a thought. How about separating “At\(currentWeather.currentTime!) it is” in to three parts, “At” + “\(currentWeather.currentTime!)” + “it is”. Then add the first and last string to the localised file. Will that work?

  4. In Germany were are saying “Guten Morgen”, not “Guten Morgan”

    1. Thanks, now the tutorial is update with correct spelling.

  5. Samin Shams Avatar
    Samin Shams

    With your demo, when I change the iOS Deployment Target to 7.0 and change the Devices to Universal, the Main.storyboard stops localising. Is it just my Xcode that does that?

  6. Thanks a lot! Simple and great tutorial

  7. John Belbute Avatar
    John Belbute

    Great article! One suggestion though. The file Localizable.strings above has the .Strings file with a capital S. That will not work, the s has to be lower case

    1. Thanks for the suggestion.

  8. Thanks for the article. One note: In Xcode 6, you can actually export and import XLIFF (https://en.wikipedia.org/wiki/XLIFF) files.

    Select the project and then: Editor (Menu) → Export for/Import localization(s)…

    This makes it very easy to have others help you to iteratively localise your apps without requiring access to the Xcode project.

  9. Great article and very helpful!
    But in my special case I have a string array with about 50 strings in it. Each string of the array is displayed by random. How can I translate this (string) array?

    For example:
    var days = [“Monday”, “Tuesday”, “Wednesday”]

    How do I write this in the localizable.strings and how I write

    textLabel.text = NSLocalizedString(“GOOD_MORNING”,comment:“Good Morning”) with and (index) for my random generation?

    1. Isn’t that just to replace your array initialisation with the localized version, add the strings and use the array as before?

      var days = [
      NSLocalizedString(“MONDAY”, comment: “Monday”),
      NSLocalizedString(“TUESDAY”, comment: “Tuesday”),
      NSLocalizedString(“WEDNESDAY”, comment: “Wednesday”),
      ]

  10. i need to change app language
    programmatically , make the user choose his preferred language

  11. NSLocalizedString(“GOOD_MORNING”,comment:”Good Morning”)
    had return key “GOOD_MORNING”

    1. I am facing the same problem, did you find how to fix it?

  12. Hi it’s Really Great article ThankQ soooo much!

    i faced one problem after creating the Localization.string file i am trying to add some text(TESTING=“Hi dis is german Language”) to that file i am getting error like “/Users/XXXXXX/Desktop/FirstDemo/FirstDemo/en.lproj/Localizable.strings:0: error: read failed: The data couldn’t be read because it isn’t in the correct format.” where i did the mistake please help me some one

    in Advance Thanks

    1. you need to add ; at the end. like this

      TESTING=“Hi dis is german Language”;

  13. Great step-by-step tutorial! Really clears things on localization in Swift. Thank you Ravi.

  14. Thanks, this article helped me a lot.

  15. About the localization of images, at least in Xcode 7 if you use the xcassets for storing your images for instance, there’s no way to localize from the GUI. ( at least I didn’t found one)

    Here’s a nice workaround

    http://stackoverflow.com/questions/21310819/how-to-localize-the-images-in-images-xcassets

    1. Thanks for sharing this info.

  16. I followed your tutorial , everything is ok , after i change app and restart app , the language changes .But how do i change the app in runtime without restarting the app ? Am using swift . Please help , thanks !!!

  17. Martin Moser Avatar
    Martin Moser

    Thank you for writing this tutorial. It help me.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.