Help us understand the problem. What is going on with this article?

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 を見ればもっとイメージしやすいかもしれません。

欠点

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

最後に

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした