Swift

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

SwiftUI 画面遷移 NavigationView

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

※2021年4月追記

弊社のメイン事業はWebサイト制作になっているため、iOSアプリ開発現場からはかなり遠ざかっています。ここで紹介しているSwiftUIの知見は2019年10月時点であることにご留意ください。

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

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

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

SwiftUI 画面遷移 NavigationView

この記事では主に

  • iOSアプリを開発したことがない
  • その他プログラミングを経験したことのない

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

今回実装した環境は以下の通りです。

違う環境では異なった挙動を示す可能性があります。ご注意ください。

  • macOS10.15 Catalina
  • Xcode11.0
  • Swift5

画面遷移の実装例

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("画面遷移できました")
    }
}
SwiftUI 画面遷移 NavigationView

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

遷移元の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で囲みます。

SwiftUI 画面遷移 NavigationView

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

SwiftUI 画面遷移 NavigationView

少し複雑な実装の例

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

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("ふがふが画面遷移できました")
    }
}
SwiftUI 画面遷移 NavigationView

NavigationBarTitleを指定した場合

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

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

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

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

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

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

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

 

Web制作会社 取締役
クウルス
EarthCampus株式会社 取締役。 Webサイトの受注制作・運営をしています。 TwitterではITビジネスにつながる技術的な学びを発信。 趣味はエレクトーンと格闘ゲーム。
\ Follow me /