【SwiftUI】画面遷移はNavigationViewで実装しよう

どうも、京都のスタートアップ企業にてiOSアプリを開発中のエンジニア、クウルス(@Qoo_Rus)です。

Xcode11が正式にリリースされてからしばらく経ち、従来よりコード量を少なく簡単にUI設計ができるSwiftUIの活用が様々な企業の開発現場で進んでいます。

これからiOSアプリ開発に取り組み始めたいと考えている方は、SwiftUIから取り組むと楽しみながら画面作りができるのでかなりオススメです。

今回はiPhoneアプリでよく見る画面遷移の作り方をご紹介します。

この記事では主に

という初心者に向けての視点で書いていますので、ぜひお役立てください。

画面遷移の実装例

import SwiftUI
import Foundation

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: SecondView()) {
                    Text("画面遷移する")
                }
            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("画面遷移できました")
    }
}

パーツを分解して解説していきます。

遷移元のViewと遷移先のViewを作る

struct ContentView: View {
    var body: some View {
        Text("画面遷移する")
    }
}

struct SecondView: View {
    var body: some View {
        Text("画面遷移できました")
    }
}

遷移元：「画面遷移する」というテキストを表示するView

遷移先：「画面遷移できました」というテキストを表示するView

の2つを用意しましょう。

画面遷移を起こすボタンにしたい要素をNavigationLinkで囲む

struct ContentView: View {
    var body: some View {
        NavigationLink(destination: SecondView()) {
            Text("画面遷移する")
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("画面遷移できました")
    }
}

「画面遷移する」という文字をタップしたら画面遷移するようにしたいので

Text("画面遷移する")の部分をNavigationLinkで囲みます。

また、遷移先の指定が必要なので引数を設定しましょう。

Navigation(destination: SecondView())

と入れることで、遷移先がSecondViewになります。

VStackやHStackなどでNavigationLinkの要素を囲む

struct ContentView: View {
    
    var body: some View {
        VStack {
            NavigationLink(destination: SecondView()) {
                Text("画面遷移する")
            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("画面遷移できました")
    }
}

次にNavigationLinkで囲った要素をさらにVStackやHStackで囲みます。

VStackやHStackで囲みたい要素をCommandキーを押しながらクリックすると、上のように簡単にVStackやHStackを埋め込むことができます。

NavigationViewでNavigationLinkを含んだ要素を囲むと画面遷移が機能する

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: SecondView()) {
                    Text("画面遷移する")
                }
            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("画面遷移できました")
    }
}

最後にVStackで囲んだ要素をまとめてさらにNavigationViewで囲って終了です。

これで先ほどの実装がめでたく出来上がります。

よくある失敗例

VStackやHStackなどをはさまない場合

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            NavigationLink(destination: SecondView()) {
                Text("画面遷移する")
            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("画面遷移できました")
    }
}

もしVStackやHStackで囲むステップを飛ばした場合、ビルドエラーにはなりませんが、実行しても画面遷移が起こらなくなってしまいます。

少し複雑な実装の例

実践に進む足掛かりとして、複雑度を少し上げた実装例をご紹介します。

Viewを分割した場合

画面遷移のボタンを複数設置したいことはよくあります。

そういったボタンが増えてきたら、Viewを分割して対処することが多くなりがちです。

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                HogeView()
                FugaView()
            }
        }
    }
}

struct HogeView: View {
    var body: some View {
        NavigationLink(destination: HogeSecondView()) {
            Text("ほげほげ")
        }
    }
}

struct FugaView: View {
    var body: some View {
        NavigationLink(destination: FugaSecondView()) {
            Text("ふがふが")
        }
    }
}

struct HogeSecondView: View {
    var body: some View {
        Text("ほげほげ画面遷移できました")
    }
}

struct FugaSecondView: View {
    var body: some View {
        Text("ふがふが画面遷移できました")
    }
}

NavigationBarTitleを指定した場合

遷移元の画面にタイトルをつけて、戻るボタンをタイトル名に変えることも可能です。

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: SecondView()) {
                    Text("画面遷移する")
                }
            }.navigationBarTitle("画面遷移元")
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("画面遷移できました")
    }
}

SwiftUIならよくある画面遷移もラクラク

SwiftUIが導入されたXcode11からは、iOSネイティブアプリでよく見かける画面遷移機能を実装することはかなり簡単になりました。

今回の機能は、初心者でもXcodeをインストールしてすぐに試すことが可能です！

ぜひやってみてくださいね！