SwiftUI - 설정창을 만들어 언어 설정하기

environment에서 \.locale key path를 사용하면 사용자한테 보여줄 언어를 설정할 수 있게 됩니다

 

 

매우 간단하며 아래에 방법을 순서대로 설명하겠습니다.

 

1.

File -> New -> File을 선택합니다.

 

2. 

String Catalog 를 선택 후 생성해줍니다.

 

3.

다음은 좌측 하단에 + 버튼을 통해 언어를 추가해줍니다.

 

4. 

추가한 후 코드를 빌드해주면 프로젝트 View에서 사용되는 문자들을 번역할 수 있도록 보여줍니다. 번역된 내용이 어느정도인지는 %로 나타내주며 모든 문자들이 번역이 된다면 ✅ 로 완료되었음을 확인할 수 있게 됩니다.

 

5. 

다음으로는 environment에서 locale 키 경로를 통해서 특정 국가의 언어로 바꿀 수 있습니다. 

@main
struct LocaleExampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .environment(\.locale, .init(identifier: "en"))
    }
}

 

6.

설정 창을 통해서 바꾸기 위해 다음과 같은 뷰를 만들어줄 것입니다.

 

먼저 변경한 값을 저장하기 위해 AppStorage를 사용하였습니다, 이후 앱을 들어올 때마다 init을 통해 이전에 설정한 언어를 동일하게 설정해줍니다.

@main
struct LocaleExampleApp: App {
    @State private var language = LanguageSetting()
    @AppStorage("userLanguageKey") private var locale = "en"

    init() {
        language.locale = Locale(identifier: locale)
    }
    var body: some Scene {
        WindowGroup {
            SettingView()
        }
        .environment(\.locale, language.locale)
        .environment(language)
    }
}

 

다음은 뷰에서 코드를 쉽게 작성하기 위한 enum입니다.

enum Language: String, CaseIterable {
    case en
    case ko

    var value: String {
        switch self {
        case .en:
            return "en"
        case .ko:
            return "ko"
        }
    }
}

 

다음으로는 뷰를 만드는 코드입니다.

import SwiftUI

struct SettingView: View {
    @Environment(LanguageSetting.self) var languageSettings
    @AppStorage("userLanguageKey") private var locale = "en"
    @State var language: Language = .ko

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Setting")) {
                    Picker("Select Language", selection: $language) {
                        Text("Korean").tag(Language.ko)
                        Text("English").tag(Language.en)
                    }
                }
            }
        }
        .onChange(of: language, { oldValue, newValue in
            languageSettings.locale = Locale(identifier: newValue.value)
            locale = newValue.value
        })
    }
}

#Preview {
    SettingView()
        .environment(LanguageSetting())
}