Zenn
🌏

SwiftUIでアプリ表示を多言語化する方法

2020/11/09に公開
SwiftUI
tech

SwiftUIでLocalization(多言語対応)を行う手順です。
日英対応です。

Localizationsの追加

PROJECT -> Info -> LocalizationsにJapanese (ja)を追加

Localizableファイルを作成

Strings Fileを選択

ファイル名をLocalizableで作成。
(※必ずファイル名はLocalizableにする必要があります)

画面右側のLocalization -> Localize...をクリックして

一旦EnglishでLocalizeをします。

Japaneseにもチェックを入れます。

EnglishとJapanese用のリソースファイルが生成されます。

各言語のリソースファイルを編集

Key-Value形式で書いていきます。

"Key" = "Value";
Localizable.strings(English)
/* 
  Localizable.strings
  PROJECTNAME

  Created by USERNAME on 2020/11/09.
  
*/

"Minutes" = "Min";
"TimeRequired" = "Time Required";
Localizable.strings(Japanese)
/* 
  Localizable.strings
  PROJECTNAME

  Created by USERNAME on 2020/11/09.
  
*/

"Minutes" = "分";
"TimeRequired" = "所要時間";

言語リソースの参照方法

シンプルにTextでKeyを指定するだけです。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("TimeRequired")   // <-----Keyを指定
            HStack {
                Text("5")
                    .font(.title)
                Text("Minutes")    // <-----Keyを指定
            }
        }
    }
}

プレビューを各言語で表示する

Watchアプリの例になりますが

ContentView.swift
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["en", "ja"], id: \.self) { id in
            ContentView()
            .previewDevice(PreviewDevice(rawValue: "Apple Watch Series 6 - 40mm"))
            .previewDisplayName("Apple Watch Series 6 - 40mm(\(id))")
                .environment(\.locale, .init(identifier: id)) // <----- 言語設定
        }
    }
}

これで各言語でのプレビューが同時に確認できます。

おまけ

テキストの一部を動的に変更するには、以下のようにします。

"Hello, @." = "Hello, @.";
"%lld Minutes" = "%lld Min";

呼び出し側

Text("Hello, \("Mike").")
Text("\(5) Minutes")

ただし、Xcodeのプレビュー画面では言語を指定しても切り替わらない。
シミュレーター上で言語設定に応じて表示が切り替わることは確認できました。

最後に

SwiftUIでのプレビューで、多言語を同時に確認できるのはほんと素晴らしい。
おまけで記載したバグはありますが😢

参考

Stack Overflow - Localization with String interpolation in SwiftUI

【SwiftUI】Localizable.stringsで、多言語対応する方法を解説

Discussion