Swift로 간편한 다국어 미리보기 Extension

소개

Swift UI 최고군요!

매우 직관적이며 코드와 UI가 직접 연결되어 있습니다.

Swift UI로 개발할 때 다언어(라고 해도 영어와 일본어이지만)로 미리보기를 표시하고 싶어졌기 때문에 쉽게 쓸 수 있도록 했습니다

일반 미리보기

이런 느낌의 코드일 때

import SwiftUI

struct ExampleView: View {
    var body: some View {
        Text("hello")
            .font(.title)
    }
}

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
    }
}

다음과 같이 언어를 설정했다면

Localizable.strings (English)

  "hello" = "Hello";

Localizable.strings (Japanese)

  "hello" = "こんにちは";

미리보기는 다음과 같습니다.



이것이라면 영어 때는 알고도 일본어 때 어떻게 될지 모릅니다.

제대로.

확장

매번 언어를 지정하면 힘들기 때문에 다음과 같은 Extension을 준비합니다.

import SwiftUI

extension View {
    func en() -> some View {
        self.environment(\.locale, .init(identifier: "en"))
    }

    func ja() -> some View {
        self.environment(\.locale, .init(identifier: "ja"))
    }
}

그런 다음 미리보기를 다음과 같이 변경합니다.

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView().en()
        ExampleView().ja()
    }
}

그러면 미리보기에서 각 언어 버전이 세로로 나란히 표시됩니다.

모듈화

언어가 늘어나면 매번 .strings와 .en()를 쓰는 것도 번거롭고 새는 것 같습니다.

그래서 다음과 같이 모듈화합니다.

import SwiftUI

struct MultiLanguagePreview<Content>: View where Content: View {
    var content: () -> Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    var body: some View {
        SwiftUI.Group {
            VStack(content: self.content).en()
            VStack(content: self.content).ja()
        }
    }
}

struct MultiLanguagePreview_Previews: PreviewProvider {
    static var previews: some View {
        MultiLanguagePreview {
            Text("hello")
        }
    }
}

미리보기를 다음과 같이 바꾸면 다국어 미리보기를 할 수 있습니다.

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        MultiLanguagePreview {
            ExampleView()
        }
    }
}

요약

Extension을 사용하면 미리보기 설명을 깔끔하게 만들 수 있습니다.

앞으로도 여유가 있을 때 편리한 Extension을 소개하고 싶습니다.