Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@AkkeyLab

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

More than 1 year has passed since last update.

はじめに

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

欠点

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

最後に

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

17
Help us understand the problem. What is going on with this article?
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
AkkeyLab
I love Swift : )
planningdev
九州工業大学 ITサービス開発・運用団体

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?