iOS App Localization with Xcode

Pictograph iOS Application

Pictograph is a steganography application (app) available for iOS and macOS. Users can hide a message and an image within another image that can also be encrypted with a password so that information will be transmitted securely to others who can decrypt messages via Pictograph. Here are the open-source files that can be downloaded from GitHub.

Localization Process

Preparation

To localize this app from English into Simplified Chinese, My team first downloaded CocoaPods to build a project in Xcode 11.

Internationalization & Translation

After playing around with the English version, we found out all the user-facing strings. See the English demo below.

All the strings were wrapped with an NSLocalizedString method for Swift before we created the Xcode Localization Catalog (.xcloc) for translation.

We set a key as the first parameter of the method. By specifying the key which is the actual string as the first parameter, the method can pull out the corresponding value from the Localizable.strings file and returns the value. After completing translations with Memsource, we imported localizations back into Xcode.

Customization

To show different features of the localized app, we changed the background color from red to blue, designed a new app icon with blue as theme color, and added a Chinese font to fit Chinese characters.

Background color

We found that the background color was controlled in a file called PictographViewController.swift by searching related keywords, and then selected blue as the new mainAppColor. As the following images show, both two versions have a key called mainAppColorNight, whose value is the background color when users turn on Dark Mode. The color scheme of the dark mode can be changed in the same way.

Icon

There are two icons to be localized: one is the iOS app icon, the other is the icon in Settings. After designing a new icon with a similar style as the original, we simply replaced two original icons in the .xcloc folder and imported it back into our Xcode project.

• 

• 

Font

First things first, find a free font online and download it. Most commonly, the font format would be TTF or OTF. Our custom font named SkyGarden.ttf was added to the project through the next three steps.

1. Drag the font into the XCode project.
2. Check if the font is included as a resource in the bundle.
   • Highlight the XCode project file in the solution explorer and go to the project Build Phases pane on the right-hand side. One of the sections that can be expanded is Copy Bundle Resources. Open that list to ensure the font is included.
3. Add the font in the app’s property list.
   • The property list file is named as Info.plist by default in the Supporting Files folder. Open it and add a new row called Fonts provided by application that will be an array where the filename of the font will be added as an Item.

Below is an example that the word “Pictograph” appears on the launch screen has been localized into “象形密码” with a custom Chinese font (SkyGarden.ttf).

We explored UIFont in source code to try to make the custom font work for the whole app, but the font cannot be seen once the project is launched. However, we have learned how to find the font name that hardly matches the font filename by adding the snippet of code as follows to log all the fonts available in the console.

for family in UIFont.familyNames.sorted() {

    let names = UIFont.fontNames(forFamilyName: family)

    print("Family: (family) Font names: (names)")

}

To be more resourceful, we figured out an easier way to get the font name by searching for the font name in Font Book after installing the font. The PostScript name is the actual font name to be used in code.

Localized App

Final Thoughts

According to the speech Creating Great Localized Experiences with Xcode 11, compared to adding a language switcher within the app in iOS 13, it would be better to launch into Settings where users can change the language of the app and then relaunch the app in the target language.