【iOSアプリ①・Swift】SwiftUIにおける画面遷移

はじめに

前回の記事で、iOSアプリ①クイズアプリの仕様を確定しました。
今回からは、その仕様に沿ってクイズアプリを作成していきます。
まずは、アプリケーションの基本、画面遷移についてです。

前回記事

【iOSアプリ①】クイズアプリの仕様

はじめに こうちゃ こんにちは、こうちゃです。 前回の記事で、iOSアプリ開発を学んでいくにあたり、まずは簡単なクイズアプリを作成していくと言いました。 今回は、クイズアプリの仕様面について考えていきます。 [si[…]

SwiftUIの画面遷移

If your app has a minimum deployment target of 
iOS 16, iPadOS 16, macOS 13, tvOS 16, 
watchOS 9, or visionOS 1, or later, 
transition away from using NavigationView. 

参照：Migrating to new navigation types | Apple Developer Documentation

NavigationStack・NavigationLinkの使い方

NavigationStack {
    NavigationLink("遷移ボタン") {
        遷移先View()
    }
}

• NavigationStack：画面遷移の土台。この中にNavigationLinkを書くことで画面遷移が起こる。
• NavigationLink：画面遷移先を記載する。NavigationStack内でないと画面遷移は行えない。
• 上記の例では、”遷移ボタン”という文字列が画面に表示されており、押下すると「遷移先View」画面に遷移する。

クイズアプリでの画面遷移

クイズアプリでの画面遷移は

ホーム画面
 ├─ プレイヤー名登録画面
 │    └─ クイズ出題画面
 │          └─ クイズ結果画面
 │                ├─ 次の問題 → クイズ出題画面
 │                └─ 10問目 → 最終結果画面
 │                                └─ ホーム画面
 └─ スコア確認画面
       └─ ホーム画面

のパターンが必要になります。

ひとまずホーム画面から作っていきましょう。

ホーム画面→プレイヤー名登録画面・ホーム画面→スコア確認画面

ホーム画面 (HomeView.swift)

import SwiftUI

struct HomeView: View {
    var body: some View {
        NavigationStack {
            VStack {

                // プレイヤー名選択画面への遷移
                NavigationLink("プレイヤー名選択画面") {
                    PlayerSelectView()
                }

                // スコア確認画面への遷移
                NavigationLink("スコア確認画面") {
                    ScoreHistoryView()
                }
            }
            .padding()
        }
    }
}

プレイヤー名選択画面 (PlayerSelectView.swift)

import SwiftUI

struct PlayerSelectView: View {
    var body: some View {
        Text("PlayerSelectView")
    }
}

スコア確認画面 (ScoreHistoryView.swift)

import SwiftUI

struct ScoreHistoryView: View {
    var body: some View {
        Text("ScoreHistoryView")
    }
}

実行すると、このような画面遷移になるはずです。

簡単ですね！

プレイヤー名登録画面→クイズ出題画面

続いて、プレイヤー名登録画面からクイズ出題画面への遷移を記述しましょう。

プレイヤー名登録画面 (PlayerSelectView.swift)

import SwiftUI

struct PlayerSelectView: View {
    var body: some View {
        VStack {
            Text("PlayerSelectView")

            NavigationStack {
                NavigationLink("クイズ出題画面") {
                    QuizQuestionView()
                }
            }
        }
        .padding()
    }
}

クイズ出題画面 (QuizQuestionView.swift)

import SwiftUI

struct QuizQuestionView: View {
    var body: some View {
        VStack {
            Text("QuizQuestionView")
            
            
        }
        .padding()
    }
}

クイズ出題画面→クイズ結果画面

次に、クイズ出題画面からクイズ結果画面への遷移を記述していきます。

クイズ出題画面

import SwiftUI

struct QuizQuestionView: View {
    var body: some View {
        VStack {
            Text("QuizQuestionView")
            
            NavigationStack {
                NavigationLink("クイズ結果画面") {
                    QuizResultView()
                }
            }
        }
        .padding()
    }
}

クイズ結果画面

import SwiftUI

struct QuizResultView: View {
    var body: some View {
        VStack {
            Text("QuizResultView")
            
            
        }
        .padding()
    }
}

クイズ結果画面→最終結果画面

続いて、クイズ結果画面から最終結果画面への遷移を記述していきましょう。
画面遷移的には、現在の出題数が10問に達していなければクイズ出題画面に遷移します。
ただ今回は、最終結果画面への遷移のみ記述します。

クイズ結果画面 (QuizResultView.swift)

import SwiftUI

struct QuizResultView: View {
    var body: some View {
        VStack {
            Text("QuizResultView")
            
            NavigationStack {
                NavigationLink("最終結果画面") {
                    FinalResultView()
                }
            }
        }
        .padding()
    }
}

最終結果画面 (FinalResultView.swift)

import SwiftUI

struct FinalResultView: View {
    var body: some View {
        VStack {
            Text("FinalResultView")
            
            
        }
        .padding()
    }
}

最終結果画面→ホーム画面・スコア確認画面→ホーム画面

最後に、最終結果画面とスコア確認画面からホーム画面へ遷移する記述をしていきましょう。

最終結果画面 (FinalResultView.swift)

import SwiftUI

struct FinalResultView: View {
    var body: some View {
        VStack {
            Text("FinalResultView")
            
            NavigationStack {
                NavigationLink("ホーム画面") {
                    HomeView()
                }
            }
        }
        .padding()
    }
}

スコア確認画面 (ScoreHistoryView.swift)

import SwiftUI

struct ScoreHistoryView: View {
    var body: some View {
        VStack {
            Text("ScoreHistoryView")
            
            NavigationStack {
                NavigationLink("ホーム画面") {
                    HomeView()
                }
            }
        }
        .padding()
    }
}

実際に実行すると、各画面へ遷移することが確認できると思います。

さいごに

今回は、SwiftUIにおける画面遷移について説明しました。

NavigationStack と NavigationLinkを使用すれば遷移自体は簡単にできましたね。
ですが実際には、画面左上のボタン押下やスワイプで前の画面に戻れてしまう部分の対策が必要でしょう。
その対策は、また別の記事で取り上げようと思います。

今回はここまで♪