swiftでのコードのみのレイアウトの際に画面のプレビューを見たい

Question

swiftでコードのみで画面のパーツなどを配置しています。

現在はレイアウトを確認する際にいちいちビルドして確認しているのですが、SwiftUIのようにコードを変えた瞬間に画面のレイアウトのプレビューを表示する機能はXcodeにはありますか？調べてもSwiftUIの記事ばかりでしたのでSwiftを使う場合のプレビューの表示方法をご教授願いたいです。

Answer 1

そんな機能があったらいいなぁ、と思って調べていたらありました。

私自身まだよくわかっていませんが、SwiftUI で従来の UIKit を表示させる方法があるようです。
Xcode Previewsという機能のようです（ViewControllerのほか、Viewを表示させることも可能のようです）。

日本語だと

• メルカリのブログ - Xcode Previewsを用いたUIKitベースのプロジェクトの開発効率化

英語で簡潔に説明してあるのは

• Xcode Previews for View Controllers

あたりでしょうか。
私は英語版を参考にしました（正直、メルカリのブログはまだ十分理解していません。理解できればもっと応用が効くようになります）。

ちなみに、このような感じでプレビューできます。
ある程度の動作ならば（ボタンを押したときの機能なども）確認できるようです。

基本的には

• 通常と同じようにプロジェクトを作成（SwiftUIを選択しないこと）
• 表示したいViewController を UIViewControllerRepresentable に準拠させ、必要なメソッドを実装する。

という流れになるようです。

最初からプレビューの画面をだすことはできませんが、一度 StoryBoard などに切り替えて、コード 編集画面に戻るとプレビューが表示されるようです（ビルドさせても表示できるかもしれません）。

スクリーンショットは「逆引き Swift - UILabelで文字を表示」のコードを引用しましたが、プレビューを表示させる部分は先に挙げたXcode Previews for View Controllersのコードを流用して使いました。

#if DEBUG
import SwiftUI

extension ViewController: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> ViewController {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        // ViewController をインスタンス化できれば別の方法でも良い
        guard let viewController =  storyboard.instantiateViewController(
            identifier: "ViewController") as? ViewController else {
                fatalError("Cannot load from storyboard")
        }

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

struct ViewControllerPreviews: PreviewProvider {
    static var previews: some View {
        ViewController()
    }
}
#endif

様々な端末によるプレビュー方法については、メルカリのブログの方が詳しいです。

Comments

[TsukubaDepot]

もちろん、コード中でパラメータを変更したらリアルタイムでプレビューに反映されます。

[fuzzball]

あぁ、メルカリさんの記事見た記憶がある‥。失礼しました。

Answer 2

@IBDesignable とかはどうでしょうか。
現在の運用だとプレビュー用のStoryboardやxibファイル等を作る必要があるかと思いますが、、
あと、前に使っていた時はPCのスペックかXcodeの性能か、「瞬時に」というほどレスポンスはよくなかったです。汗
[参考]
https://techracho.bpsinc.jp/wingdoor/2020_02_13/87782
https://qiita.com/ShoichiKuraoka/items/228b9e3fc4f886f94f16
https://qiita.com/stastaahaha/items/e45e7559255fb7666fd8

Answer 3

ないです。。。。。。