[Swift] iOS UIKitプロジェクトでPreviewを簡単に使う方法

XCode preview はUIの変更点を容易に見ることができる機能で、SwiftUIでは簡単に使えます。

私は今度、UICollectionViewCompositionalLayoutを勉強しながら、

UIKitでXcode Previewを書いてみたいと思いました。

今回の掲示板ではiOS UIKitプロジェクトでPreviewを簡単に使う方法について紹介します。

UIViewController

import UIKit

#if canImport(SwiftUI)
import SwiftUI

@available(iOS 13.0, tvOS 13.0, *)
public struct UIViewControllerPreview<Content>: UIViewControllerRepresentable where Content : UIViewController {
    let builder: () -> Content

    public init(_ builder: @escaping () -> Content) {
        self.builder = builder
    }

    public func makeUIViewController(context: Self.Context) -> Content {
        return builder()
    }

    public func updateUIViewController(_ uiViewController: Self.UIViewControllerType, context: Self.Context) {}
}
#endif

UIView

import UIKit

#if canImport(SwiftUI)
import SwiftUI

@available(iOS 13.0, tvOS 13.0, *)
public struct UIViewPreview<Content>: UIViewRepresentable where Content : UIView {
    let builder: () -> Content

    public init(_ builder: @escaping () -> Content) {
        self.builder = builder
    }

    public func makeUIView(context: Self.Context) -> Content {
        return builder()
    }

    public func updateUIView(_ uiView: Self.UIViewType, context: Self.Context) {}
}
#endif

~Representableを順守するUIViewPreviewとUIViewPreviewControllerをそれぞれ作ります。

updateUIViewは共通に空けておきます。

詳しくはこちらをご参考ください。

TestViewController

import UIKit

class SampleViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let vc = TestViewController()
        addChild(vc)
        view.addSubview(vc.view)
    }
}

#if canImport(SwiftUI) && DEBUG
import SwiftUI
import SwiftPreview

struct SampleViewController_Previews: PreviewProvider {
    static var previews: some View {
        UIViewControllerPreview {
            SampleViewController()
        }
    }
}
#endif

実際の使用例は以下の通りです。
~UIViewController -> UIViewControllerPreview
~UIView or Cell -> UIViewPreview

すると、iOS UIKit環境でもXode Previewが正常に動作するようになります。

もっと簡単に使う方法

ファイルを作る度に次のような様式を貼り付けるのが不便に感じました。

それでSwiftPreviewというオープンソースを製作することになりました。

Custom File Templateを通じてより簡単にXCode Previewを使用できます。

関心がございましたら、一度訪問していただければ幸いです。

お読み頂きましてありがとうございます。