SwiftUIでモーダル遷移を実装する

参考

【iOS】遷移方法まとめとエンジニア1年生の独り言
SwiftUIでモーダル表示する方法【SwiftUI入門】
【SwiftUI】シートの使い方（sheet）

画面遷移について

1. モーダル ... 下から画面が出現
2. プッシュ ... 右から画面が出現
3. タブ ... 瞬時の切り替わり(タブアイテムのタップ)
4. ページ ... 左右から画面が出現(左右スワイプ)

モーダル遷移の実装

動画

モーダル遷移 pic.twitter.com/ig7RKLCgpo

— APPLE (@applecoder6) April 7, 2021

コード

ContentView.swift

import SwiftUI

struct ContentView: View {
    // showingModalはContentViewで管理する値型のデータ
    @State private var showingModal = false
    var body: some View {
        Button("Show ModalView.") {
            // ボタンアクション:
            // ContentViewが持つshowingModal(self.showingModal)の切り替え
            self.showingModal.toggle()
        }.sheet(isPresented: $showingModal) {
            ModalView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ModalView.swift

import SwiftUI

struct ModalView: View {
    @Environment(\.presentationMode) private var presentationMode
    var body: some View {
        Button("Close ModalView.") {
            self.presentationMode.wrappedValue.dismiss()
        }
    }
}

struct ModalView_Previews: PreviewProvider {
    static var previews: some View {
        ModalView()
    }
}

学習結果

SwiftUIにおけるデータ管理

Viewに紐付くデータの管理方法を決定するのがProperty Wrapperです。
SwiftUIでは全10種類のデータ管理方法が存在し、どのProperty Wrapperを使用するか決める際の方針は以下の3つの問いに集約されます。

• データとは何か
  → データが値型・参照型のどちらであるか　
• データをどのように処理するか
  → データが読み取り専用・読み書き可能のどちらであるか
• データはどこから来るか
  → Source of Truthの出どころは自身のView・親Viewのどちらであるか

1. let
   → データが値型かつ読み取り専用

2. @State
   → データが値型かつ自身のViewで読み書き可能

3. @Binding
   → データが値型かつ読み書き可能かつ親Viewで管理

4. @Environment
   → データが自身のViewの環境値

5. @Published
   → データが参照型
   ※ データを定義するクラスはObservableObjectプロトコルに準拠する必要がある

6. @StateObject
   → オブジェクトが参照型かつ自身のViewで管理・インスタンス化

7. @ObservedObject
   → オブジェクトが参照型かつ親Viewで管理

8. @EnvironmentObject
   → オブジェクトが参照型かつトップの親Viewで管理
   ※ トップの親Viewのインスタンス化時にenvironmentObject修飾子を用いてオブジェクトをセットする必要がある
   → 親Viewをインスタンス化する構造体で@StateObjectでラッパしたオブジェクトを生成する必要がある

9. @AppStorage
   → データが値型かつUserDefaultsに格納
   ※ アプリが削除されるまで保存される

10. @SceneStorage
    → データが値型かつシーンで保存

sheet

モーダル表示を実現する修飾子です。
.sheet()で表示した画面を閉じる方法は以下の3通りです。

• モーダル画面を下にドラッグ
• シートの表示フラグをfalseに変更
• 環境変数presentationModeプロパティのdismissメソッドを呼び出す

シミュレータの録画方法

1. 「ターミナル」でXcodeプロジェクトがあるディレクトリに移動
2. xcrun simctl io booted recordVideo <動画名>.movで録画開始
3. Control + Cで録画停止