【SwiftUI】画面遷移の実装方法（ナビゲーション、モーダル）

はじめに
環境
①ナビゲーション遷移
②ハーフモーダル遷移
1. 実装方法
2. 前の画面に戻る方法
③フルモーダル遷移
1. 実装方法
2. 前の画面に戻る方法
さいごに
SwiftUIのおすすめ参考書籍

はじめに

アプリには欠かせない画面遷移ですが、今回はSwiftUIの画面遷移方法３種類について実装方法と遷移先から戻る方法を説明します。

画面遷移の方法には大きく2つあります。ナビゲーション遷移とモーダル遷移です。

また、モーダル遷移にはハーフモーダルとフルモーダルの２種類があります。実際の動作イメージを下記します。

ナビゲーション遷移

ハーフモーダル

フルモーダル

環境

・Swift 5.7.2

・Xcode 14.2

①ナビゲーション遷移

実装方法

一番多く使うのがナビゲーション遷移かと思います。

ナビゲーション遷移にはNavigationLinkを使います。NavigationLinkと入力するとたくさん出てきますが、今回は以下で説明します。

NavigationLink(destination: () -> View, label: () -> View)

Enterを押すと以下のような形となり、使い方は以下です。

NavigationLink {
    遷移先のView
} label: {
    Textなどのオブジェクト            
}

なお、NavitgationLinkを使うにはNavigationViewに入っている必要があります。以下のような形です。

var body: some View {
    NavigationView {
        NavigationLink {
            遷移先のView
        } label: {
            Textなどのオブジェクト
        }
    }
}

冒頭に貼った以下の遷移を実現するサンプルコードは以下になります。

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink {
                nextView()
            } label: {
                Text("FirstView")
            }
            
        }
    }
}

struct nextView: View {
    var body: some View {
        NavigationView {
            ZStack{
                Color.black
                    .ignoresSafeArea()
                Text("SecondView")
                    .foregroundColor(.white)
            }
        }
    }
}

前の画面に戻る方法

左上の戻るボタン（<）をクリックすることで前の画面に戻ることが出来ます。

ボタンで遷移したい場合

ボタンでナビゲーション遷移したい場合はNavigationStackを使用します。
以下の記事で説明しています。

【SwiftUI】ボタンで画面遷移したい時の実装方法(NavigationStack)

SwiftUIで画面遷移をする場合はNavigationLinkを使うと思いますが、ボタンの押下で画面遷移したい場合は少し難しいです。今回はNavigationStackを使った画面遷移方法を説明しています。

②ハーフモーダル遷移

実装方法

ハーフモーダルを実現するためには.sheetモディファイアを使います。

.sheetと入力すると２種類出てきますが、今回は以下を使います。

.sheet(isPresented: Binding<Bool>, content: <() -> View)

Enterを押すと以下のような形となり、使い方は以下です。

.sheet(isPresented: 「State変数を$でバインドtrueで遷移します」) {
    遷移先のView
}

State変数を入れた場合以下のようになります。

@State var ShowNextView = false

略

.sheet(isPresented: $ShowNextView) {
    遷移先のView        
}

あとはButtonなどで上記バインドした変数をtrueにすることで画面遷移をします。

冒頭に貼った以下の遷移を実現するサンプルコードは以下になります。

struct ContentView: View {
    
    @State var ShowNextView = false
    
    var body: some View {
        Button {
            ShowNextView.toggle()
        } label: {
            Text("FirstView")
        }
        .sheet(isPresented: $ShowNextView) {
            nextView()
        }
    }
}

struct nextView: View {
    
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationView {
            ZStack{
                Color.black
                    .ignoresSafeArea()
                Button {
                    dismiss()
                } label: {
                    Text("SecondView")
                        .foregroundColor(.white)
                }
                
            }
        }
    }
}

前の画面に戻る方法

前の画面に戻る方法は２つあります。

①画面上部を下にスワイプ

②dismissを使う

サンプルコードではdismissを使っていますが、以下のようにdismissを定義しButtonで呼ぶことで前の画面に戻ることが出来ます。

@Environment(\.dismiss) private var dismiss

略

Button {
    dismiss()
} label: {
    Text("SecondView")
    .foregroundColor(.white)
}

③フルモーダル遷移

実装方法

フルモーダルを実現するためには.fullScreenCoverモディファイアを使います。

.fullScreenCoverと入力すると２種類出てきますが、今回は以下を使います。

.fullScreenCover(isPresented: Binding<Bool>, content: () -> View)

Enterを押すと以下のような形となり、使い方は以下です。

.fullScreenCover(isPresented: 「State変数を$でバインドtrueで遷移します」) {
    遷移先のView
}

State変数を入れた場合以下のようになります。

@State var ShowNextView = false

略

.fullScreenCover(isPresented: $ShowNextView) {
    遷移先のView        
}

あとはButtonなどで上記バインドした変数をtrueにすることで画面遷移をします。

冒頭に貼った以下の遷移を実現するサンプルコードは以下になります。

struct ContentView: View {
    
    @State var ShowNextView = false
    
    var body: some View {
        Button {
            ShowNextView.toggle()
        } label: {
            Text("FirstView")
        }
        .fullScreenCover(isPresented: $ShowNextView, content: {
            nextView()
        })
    }
}

struct nextView: View {
    
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationView {
            ZStack{
                Color.black
                    .ignoresSafeArea()
                Button {
                    dismiss()
                } label: {
                    Text("SecondView")
                        .foregroundColor(.white)
                }
                
            }
        }
    }
}

前の画面に戻る方法

dismissを使う必要があります。使い方はハーフモーダルと同様です。

@Environment(\.dismiss) private var dismiss

略

Button {
    dismiss()
} label: {
    Text("SecondView")
    .foregroundColor(.white)
}

さいごに

画面遷移の方法は色々ありますが、NavigationLinkを使うことが多いように感じます。

皆様の参考になれば幸いです。

SwiftUIのおすすめ参考書籍

図とサンプルコードが多くわかりやすく、手を動かしながら学べるのはもちろんですが、状態やデータフローに関する解説や、swiftuiから uikitを使う方法、uikitから swiftuiを使う方法などフレームワークの関連性まで説明していてとても参考になります。