UIKit でのライブ プレビューの使用

Xcode に Live Preview を実装して以来、SwiftUI コードをテストおよびデバッグするための非常に効率的で便利な方法であることがわかりました。アニメーションをリアルタイムでプレビューできるようになったことで、開発時間が大幅に短縮され、SwiftUI での作業に理想的なツールになりました。ライブ プレビューはシームレスで直感的なエクスペリエンスを提供するため、シミュレーターや物理デバイスに依存してコードをテストする必要がなくなりました。

UIKit は、リッチでインタラクティブなユーザー インターフェイスを作成するための強力なツールです。シミュレーターまたはデバイスでアプリをビルドして実行しないと、ビューのデザインとレイアウトをすばやく反復するのは難しい場合があります。そこで登場するのがライブプレビューです。

UIKit でライブ プレビューを使用するには、UIViewControllers と UIViews を SwiftUI ビューにラップする必要があります。これは、プロトコルおよびを使用して実現できます。UIViewControllerRepresentableUIViewRepresentable

UIViewControllerRepresentableとは、SwiftUI 環境でそれぞれまたはUIViewRepresentableを表現できるようにする SwiftUI フレームワークのプロトコルです。これらのプロトコルは、SwiftUI 環境でまたはインスタンスを作成および管理するために必要なメソッドとプロパティを定義します。UIViewControllerUIViewUIViewControllerUIView

ラッパーのセットアップ

新しいファイルを作成し、名前を付けますLivePreview。SwiftUI フレームワークをインポートし、このファイル内でUIViewControllerPreviewandという名前の 2 つの構造体を定義します。それぞれおよび にそれぞれUIViewPreview準拠UIViewControllerRepresentableUIViewRepresentable

UIViewControllerPreviewおよびUIViewPreviewは、型パラメーターを取り、それぞれ および プロトコルに準拠する汎用ViewController構造体ですView。UIViewControllerUIView

struct UIViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable
struct UIViewPreview<View: UIView>: UIViewRepresentable

UIViewControllerRepresentable の署名は次のようになります。

protocol UIViewControllerRepresentable : View where Self.Body == Never

• makeUIViewController(context:) -> UIViewController: このメソッドは、プレビューで使用される UIViewController インスタンスを作成するために使用されます。
• updateUIViewController(_:context:): このメソッドは、SwiftUI ビュー階層が変更されたときに UIViewController インスタンスを更新するために使用されます。

UIViewControllerRepresentable の署名は次のようになります。

protocol UIViewRepresentable : View where Self.Body == Never

• makeUIView(context:) -> UIView: このメソッドはUIView、プレビューで使用されるインスタンスを作成するために使用されます。
• updateUIView(_:context:): このメソッドはUIView、SwiftUI ビュー階層が変更されたときにインスタンスを更新するために使用されます。

実装

以下のように、前に述べた構造体に必須関数を設定します。

struct UIViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable {
    let viewController: ViewController

    init(_ viewController: ViewController) {
        self.viewController = viewController
    }

    func makeUIViewController(context: Context) -> ViewController {
        viewController
    }

    func updateUIViewController(_ uiViewController: ViewController, context: Context) { }
}

struct UIViewPreview<View: UIView>: UIViewRepresentable {
    let view: View

    init(_ view: View) {
        self.view = view
    }

    func makeUIView(context: Context) -> UIView {
        return view
    }

    func updateUIView(_ view: UIView, context: Context) {
        view.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        view.setContentHuggingPriority(.defaultHigh, for: .vertical)
    }
}

struct ViewController_Preview: PreviewProvider {
    static var previews: some View {
        UIViewControllerPreview(ViewController())
    }
}

これを設定したら、Command + Option + Return をクリックして Canvas モードを開くことができます。これにより、アシスタント エディター ウィンドウで Canvas が開き、ViewController のライブ プレビューを表示できます。

ビューの背景色を更新するなど、ViewController に変更を加えると、私が共有した上記の gif のように、それらの変更がリアルタイムでライブ プレビューに反映されているのを確認できます。

UIViewController要約すると、プロトコルに準拠する構造体でUIKit をラップするUIViewControllerRepresentableことにより、Live Preview を に拡張できUIViewController、ユーザー インターフェイスの設計と反復の際により効率的なワークフローを実現できます。

この記事を楽しく読んで役に立った場合は、拍手してください。今後もこのようなコンテンツをフォローしてください❤️