SwiftUIでのプレビューをより便利にする

概要

よく使うSwiftUIのプレビュー機能は実装を共通化しておくと便利です。
本記事では一例として以下の実装例を紹介します。

• BoolPreview｜Bool値のプレビュー
• ColorSchemePreview｜外観モードのプレビュー
• LocalizedPreview｜ローカライズ言語のプレビュー

BoolPreview

利用例

ViewのもつBool値の状態を切り替えてプレビューします。

こんなふうに入れ子にして利用するのも便利です。

実装

struct BoolPreview<Content>: View where Content: View {
    let content: (Bool) -> Content

    var body: some View {
        ForEach([true, false], id: \.self) { boolValue in
            content(boolValue)
        }
    }
}

プロジェクト全体でBoolPreviewを利用すると、必ずプレビューがtrue→falseなど順序を統一できるという効果もあります。

ColorSchemePreview

利用例

外観モード（ライト/ダーク）を切り替えてプレビューします。

実装

struct ColorSchemePreview<Content>: View where Content: View {
    let content: () -> Content

    private var colorSchemes: [ColorScheme] {
        [ColorScheme.light, ColorScheme.dark]
    }

    var body: some View {
        ForEach(colorSchemes, id: \.self) { colorScheme in
            content()
                .preferredColorScheme(colorScheme)
        }
    }
}

LocalizedPreview

利用例

プロジェクトに設定されたローカライズ言語を切り替えてプレビューします。

実装

struct LocalizePreview<Content>: View where Content: View {
    let content: () -> Content

    private var localizations: [Locale] {
        Bundle.main.localizations
            .map(Locale.init)
            .filter { $0.identifier != "base" }
    }

    var body: some View {
        ForEach(localizations, id: \.identifier) { locale in
            content()
                .environment(\.locale, locale)
        }
    }
}

最後に

本記事ではSwiftUIのプレビューを便利にする実装例の一部をご紹介しました。
他にも以下のようにいくらでもPreview型をつくることができます。
それぞれのプロジェクトにあった必要なものを実装すると良いです。

• OrientationPreview｜デバイスの回転のプレビュー
  • https://developer.apple.com/documentation/swiftui/view/previewinterfaceorientation(_:)
• DynamicTypePreview｜DynamicType設定に応じたプレビュー
  • https://developer.apple.com/documentation/swiftui/environmentvalues/dynamictypesize
• IsEnabledPreview｜ユーザー操作を許可しているかに応じたプレビュー
  • https://developer.apple.com/documentation/swiftui/environmentvalues/isenabled
• DevicePreview｜iPhoneとiPadなど、デバイス種別に応じたプレビュー
  • https://developer.apple.com/documentation/swiftui/view/previewdevice(_:)

参考

• https://developer.apple.com/documentation/swiftui/previews-in-xcode
• https://developer.apple.com/documentation/swiftui/environmentvalues
• https://developer.apple.com/documentation/swiftui/view-appearance