Preview: ビューのデザインと検証を効率化する

SwiftUIでは、Previewを使用してビューのデザインや挙動をリアルタイムに確認することができます。
この記事では、SwiftUI Previewの基本的な概念と使用法に焦点を当て、効率的なUI開発に役立つTipsを紹介します。

iOS：13.0以上
XCode（当サイトの環境）：15.0.1

Previewとは？
Previewの基本的な使い方
複数のプレビューの表示
プレビュー画面における動作の検証
その他のプレビュー機能
1. プレビューの一覧表示
2. プレビューの表示を切り替え
まとめ

Previewとは？

PreviewはXcode内で提供されているツールで、SwiftUIで開発しているビューをリアルタイムで確認するための画面です。
コードを修正する度にビルドしなくても、Preview上で変更を確認できるため、UI開発の効率が向上します。

Previewの基本的な使い方

SwiftUIのPreviewは、ビューの外観や動作をリアルタイムで確認するための簡便な方法です。以下は基本的な使い方です。

新しいビューを作成する: SwiftUIビューを新しく作成します。コード例ではSmpPreviewを作成します。
Previewを追加する: 同じファイル内に、Preview用のマクロを追加します。

import SwiftUI

struct SmpPreview: View {
    var body: some View {
        Text("Hello, SwiftUI Preview!")
    }
}

#Preview {
    SmpPreview()
}

プレビューが表示されないとき

これにより、ビューをビルドすることなく、実際のデバイスに相当する表示を確認できます。

複数のプレビューの表示

同じビューにおいて上位ビューからの入力などにより、表示が異なる場合など複数のプレビューを表示させることも可能です。

previewマクロのパラメータで”Input true”と”Input false”の名前を付与しておきます。

import SwiftUI

struct SmpPreview: View {
    var switchView: Bool
    var body: some View {
        if switchView {
            Text("Input is true")
        }
        else {
            Text("Input is false")
        }
    }
}

#Preview("Input true") {
    SmpPreview(switchView: true)
}


#Preview("Input false") {
    SmpPreview(switchView: false)
}

preview用のキャンバスの上部にパラメータで設定した名称が表示されます。タップして選択するとpreviewが切り替わります。