LoginSignup
73

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-01-16

概要

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

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

BoolPreview

利用例

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

image.png

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

image.png

実装

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

利用例

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

image.png

実装

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

利用例

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

image.png

実装

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型をつくることができます。
それぞれのプロジェクトにあった必要なものを実装すると良いです。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
73