iOS12 以下をサポートするプロダクトで SwiftUI の恩恵を得る方法

はじめに

SwiftUI に注目が集まる一方、iOS13 未満をサポートバージョンから切り捨てるまで導入が困難なのも事実です。今回はこの問題点に着目し、 iOS12 以下も今までどおりサポートしつつ SwiftUI と Xcode11 を利用したプレビュー機能を実装する方法をご紹介します。

参考に

AkkeyLab/StoryboardPreviewsBySwiftUI
この記事は、サンプルからの抜粋となります。詳細はこちらをご覧ください。

Storyboard Preview by SwiftUI
WWDC 報告会にて同様の内容で発表も行っております。ぜひご覧ください。

環境

Xcode 11 β
macOS Catalina β

実現すること

• iOS12 以下をサポートしつつ Xcode Previews を利用する
• 既存の Storybord や xib ファイルをプレビューさせる

実現方法

• Xcode Previews 専用のターゲットを作る
  • プレビューさせる画面に関連するソースコードとプレビュー用の swift ファイルが含まれており、 iOS13 以降をターゲットバージョンとする
• 対象のクラスを UIViewRepresentable に準拠させる
  • updateUIView メソッド内で施した変更がプレビューに即時反映される
• PreviewProvider に準拠させた struct を定義
  • static var previews: some View でプレビューに必要な処理を施す

※ UIViewController をプレビューさせる場合はそれぞれ UIViewControllerRepresentable, updateUIViewController となります。

import SwiftUI
import UIKit

#if DEBUG
// Create new for preview
struct UserDetailBasicInfoCellPreviews: PreviewProvider {
    static var previews: some View {
        Group {
            // Sets the format of the preview
            UserDetailBasicInfoCell()
                .previewLayout(.fixed(width: 320, height: 100))
                .previewDevice(PreviewDevice(rawValue: "iPhone SE"))
            UserDetailBasicInfoCell()
                .previewLayout(.fixed(width: 414, height: 100))
                .previewDevice(PreviewDevice(rawValue: "iPhone XS Max"))
        }
    }

    static var platform: PreviewPlatform? = .iOS
}

// UserDetailBasicInfoCell.swift
// UserDetailBasicInfoCell.xib
extension UserDetailBasicInfoCell: UIViewRepresentable {
    typealias UIViewType = UserDetailBasicInfoCell

    func makeUIView(context: Context) -> UserDetailBasicInfoCell {
        return Self.instantiate()
    }

    func updateUIView(_ uiView: UserDetailBasicInfoCell, context: Context) {
        // Make parameter change for preview
    }
}
#endif

利点

• 表示・非表示が切り替わるパーツが多い場合のデバッグ強化
• 複数端末（画面サイズ）でのレイアウト確認が一度に行える

※サンプルの README を見ればもっとイメージしやすいかもしれません。

欠点

• 前準備がある程度必要になる

最後に

今年の秋が楽しみですね！