Previewing Localizations in SwiftUI

Localization is a crucial aspect of modern app development, ensuring that your app can reach a global audience. In iOS development, both SwiftUI and Interface Builder provide robust tools for localizing your app. This article will guide you through the process of previewing localizations in SwiftUI - allowing you to see how your app's interface adapts to different languages and regions.

Adding Support for Languages and Regions

Before you can preview localizations, you need to add support for the desired languages and regions in your project. This involves:

1. Editing the Project Settings: Go to your project's settings and under the 'Localizations' section, add the languages you want to support.
2. Localizing Assets and Strings: Ensure that your app's assets, like images and strings, are localized. This usually involves creating .strings files for different languages. You can also use the new Strings Catalogs instead now too - I wrote another article about this a little while back.

Previewing Localizations in SwiftUI

SwiftUI provides a straightforward way to preview localizations by setting the locale environment variable.

Example: Setting Locale

Here's how you can set the locale to Japanese:

Copycopy code to clipboard
1struct ExampleView_Previews: PreviewProvider {
2    static var previews: some View {
3        ContentView()
4            .environment(\.locale, .init(identifier: "ja"))
5    }
6}
7
8// Or the alternative new syntax that uses macros:
9
10#Preview {
11  ContentView()
12    .environment(\.locale, .init(identifier: "ja"))
13}

In this example, ContentView is previewed with the Japanese locale, allowing you to see how your interface will look to users that have set their device language to Japanese.

Bonus: Previewing Localizations in Interface Builder

Interface Builder offers a different approach, allowing you to preview localizations using pseudolanguages before adding actual translations.

Steps for Previewing in Pseudolanguages

• To start, select a view controller in Interface Builder.
• Click the "Adjust Editor Options" button in the upper-right corner and select "Preview" to see a layout preview.
• In the preview area, either select a specific preview or click the background to apply changes to all previews.
• Change the language by clicking the language button (e.g., "English") in the lower-right corner of the preview area.
• From the pop-up menu, choose the desired localization or pseudolanguage.