12 Internationalization & Localization

Apps should look and feel local to the user’s region, so if you’re aiming to create apps that users can use globally, you need to keep internationalization and localization in mind.

As it turns out, Interfaces created with Auto Layout can support internationalization, and Xcode provides the tools to help you localize all of your resources.

In this chapter, you’ll learn how to test if your app is internationalization-ready. You’ll also learn about the things you need to consider while creating your constraints, so they can properly handle different languages.

What’s internationalization and localization?

Internationalization refers to creating apps that are agnostic to the language, which means they can handle changes in the content size — for example, displaying text in different languages. Localization, on the other hand, means translating the resources into different languages.

These two concepts are crucial to providing a good user experience, especially when users expect their apps to use their preferred language. As a developer, you must prepare your layouts to support internationalization and localization. Thankfully, with Auto Layout, developing your app for internationalization and localization support is reasonably easy to achieve.

Auto Layout and internationalization

Go to the starter project and open the TodoApp project. Now, build and run.

The app you’ll work with in this chapter is a to-do list app. It shows a list of tasks and marks the ones that are complete. On the left side, you’ll see an icon that indicates favorited to-do items.

Click the active scheme in the toolbar, and select Edit Scheme….

A modal window appears. Select the Options tab, and click the drop-down menu for Application Language. Here, you can select from a variety of languages. For this exercise, choose Arabic.

Open the app again, and you’ll see that the tasks are displayed incorrectly. Because you read Arabic from right-to-left, your layout is no longer correct: The checkmark icon and the star icon need to switch places, and the text needs to align to the right.

Go to the project, and inside the Views folder, open TaskTableViewCell.swift. In setupConstrainsts(), change all uses of leftAnchor to leadingAnchor, and all uses of rightAnchor to trailingAnchor. The updated method looks like this:

private func setupConstrainsts() {
  contentView.addSubview(taskNameLabel)
  contentView.addSubview(favoriteButton)

  taskNameLabel.translatesAutoresizingMaskIntoConstraints =
    false
  favoriteButton.translatesAutoresizingMaskIntoConstraints =
    false

  let constraints = [
    favoriteButton.leadingAnchor.constraint(
      equalTo: contentView.leadingAnchor, 
      constant: 20),
    favoriteButton.centerYAnchor.constraint(
      equalTo: contentView.centerYAnchor),

    taskNameLabel.leadingAnchor.constraint(
      equalTo: favoriteButton.trailingAnchor, 
      constant: 20),
    taskNameLabel.trailingAnchor.constraint(
      lessThanOrEqualTo: contentView.trailingAnchor, 
      constant: -20),
    taskNameLabel.centerYAnchor.constraint(
      equalTo: contentView.centerYAnchor)
  ]

  NSLayoutConstraint.activate(constraints)
}

By using leading and trailing anchors, you let the system deal with accommodating the user interface depending on the orientation of the selected language.

Build and run.

Excellent, now the tasks are correctly aligned.

Previewing languages in Interface Builder

Interface Builder helps you preview screens in different languages. For this project, the localization files already exist.

Go to Main.storyboard and select Settings View Controller. Press Command-Option-Enter to show the preview for the selected controller.

On the right side, you can see how the screen should look at runtime. On the bottom right, you can change the language for this preview. Click English and select Arabic.

The screen now shows all of the text in Arabic. Click the language button again, and select Bounded String Pseudolanguage. This setting adds some characters to all of the strings, which helps you visualize how the interface will handle larger content.

Notice that the version label is getting cut off. This display issue happens when there are constraints that force the label to have a fixed size. In the Document Outline, expand the Constraints under the version label:

Press delete to remove the width constraint.

Look at the preview again, and notice the label is now displaying properly:

Try the other options, Accented Pseudolanguage and Double-Length Pseudolanguage, to test how the app handles taller content:

Here’s the preview for Accented Pseudolanguage:

Here’s the preview for Double-Length Pseudolanguage:

You can also test apps without using the preview or changing the language directly on the simulator. Click the active scheme in the toolbar, and choose Edit Scheme….

A modal window appears. Click the drop-down for Application Language, and scroll to the bottom. Select Double-Length Pseudolanguage:

Build and run.

All of the text is duplicated, and notice the app handles it well. Switching the app’s language via the scheme editor is another tool you can use to test how your app handles content changes.

Key points

• Unless strictly necessary, don’t use rightAnchor or leftAnchor to create constraints; instead, use leadingAnchor and trailingAnchor.
• Use the preview on Interface Builder to test your apps for internationalization.
• Don’t use fixed constraints on elements that can contain text unless it’s absolutely necessary.