【サンプルコード付き】SwiftUIでButtonによる画面遷移の実装方法

7 min
本記事のアイキャッチです

こんにちは、たいちです(@taichi_swift_)

たかし

たかし

アプリの画面を切り替えたいけど、どうやって実装するんだろう…

このお悩みを解決します。

本記事の内容
  • 画面切り替え(画面遷移)の実装方法
本記事の読者
  • アプリの画面遷移の方法がわからない人
本記事を読むメリット

画面遷移の方法がわかり、自分で実装できるようになる。

環境

  • Xcode 11.4
  • Swift 5.2

実装方法

NavigationViewでの画面遷移

AppStoreのこの動きもNavigationViewです。

NavigationViewって…?

←AppleのDocumentation

なんのこっちゃわかりませんね笑

簡単に言うと、画面の階層構造を設定することができるビューのひとつだよ

たいち

たいち

階層構造になっているので、複数の画面切り替え先(分岐)を設定でき、前の画面に戻ることもできます。

そして、画面遷移をするボタンには、NavigationLink()を使います。

それじゃ、実際にコードを書いてみるよ

たいち

たいち

実装方法

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: SecondView()) {
                Text("画面切り替え")
            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("2個目の画面")
    }
}

まずは、ContentViewから解説していくよ

  1. STEP

    var body: some View {}と、画面遷移させたい画面の間に、NavigationView {}を書く

    var body: some View {
        NavigationView {// ←var body: some View {}の内側!
            //...この中にNavigationLink()などを書く
        }
    }

  2. STEP

    画面遷移する先の2個目の画面を用意する

    struct SecondView: View {
        var body: some View {
            Text("2個目の画面")
        }
    }
  3. STEP

    その中に、NavigationLink()を設定して完成!

    var body: some View {
        NavigationView {
            NavigationLink(destination: SecondView()) {
                Text("画面切り替え")
            }
        }
    }

NavigationLinkの destination: と、 {} の中には何を書くの?

NavigationLink(destination: ) { //destination: の後には、切り替えたい画面を書きます。
    Text("画面切り替え") // {}の中身は、画面遷移するときにタップさせたいビューを書きます。
}
  • destination: に遷移先の画面
  • {} のかっこの中には画面遷移するときにタップさせたいもの

を書くよ

たいち

たいち

成果物

一番シンプルな画面遷移で扱いやすいです。

今回は触りだけ紹介するけど、また別記事で詳しく説明するよ!

たいち

たいち

ModalView(sheet)での画面遷移

Slackにも使われてるこの動きがModal遷移です。

たかし

たかし

Modal…って何??

←AppleのDocumentation

つまり、トリガーになる変数がtrueの時だけビューが下から飛び出してくる画面遷移の方法だね。

たいち

たいち

実装方法

import SwiftUI

struct ContentView: View {
    @State private var show: Bool = false
    var body: some View {
        Button(action: { self.show = true /*またはself.show.toggle() */ }) {
            Text("sheet")
        }
        .sheet(isPresented: self.$show) {
            SecondView()
        }
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            Text("2個目の画面")
        }
    }
}

これは簡単に実装できるから、覚えておけばいつでも使えるよ

たいち

たいち

成果物

これもシンプルで扱いやすいです

sheetとModal遷移についてはこちらで詳しく解説しています!

TabViewでの画面遷移

AppStoreの他に、Instagram、TwitterなどでもTabViewは使われていますね。

画面下部にボタンが複数個あり、それらをタップすると画面遷移します。

TabView…?なんとなくわかるけどどうやって使うの?

そのまま遷移したいビューをTabView {}で囲うとできるよ

たいち

たいち

実装方法

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            FirstView()
                .tabItem {
                    Image(systemName: "heart")
            }            
            SecondView()
                .tabItem {
                    Image(systemName: "star")
            }
            ThirdView()
                .tabItem {
                    Image(systemName: "gear")
                    Text("設定")
            }
        }
    }
}

struct FirstView: View {
    var body: some View {
        Text("1個目の画面")
    }
}

struct SecondView: View {
    var body: some View {
        Text("2個目の画面")
    }
}

struct ThirdView: View {
    var body: some View {
        Text("3個目の画面")
    }
}

はい、それではContentViewから解説していくよ

たいち

たいち

struct ContentView: View {
    var body: some View {
        TabView { // ← 基本的には一番外側!
            FirstView()
                .tabItem {
                    Image(systemName: "heart")
            }            
            SecondView()
                .tabItem {
                    Image(systemName: "star")       
            }
            ThirdView()
                .tabItem {
                    Image(systemName: "gear")
                    Text("設定")
            }
        }
    }
}
  1. STEP

    var body: some View {} のかっこの中に、TabView {} と書きます。

    var body: some View {
        TabView {
            //この中に画面を書いていきます。
        }
    }
  2. STEP

    TabView {}の中に、使いたい画面を書く

    var body: some View {
        TabView { // ← 基本的には一番外側!
            FirstView()       
            SecondView()
            ThirdView()
        }
    }

  3. STEP

    .tabItem {}で、それぞれのタブの画像やテキストを設定して完成!

    struct ContentView: View {
        var body: some View {
            TabView { // ← 基本的には一番外側!
                FirstView()
                    .tabItem { // ← ここから
                        Image(systemName: "heart") 
                }            // ← ここまで追加
                SecondView()
                    .tabItem {
                        Image(systemName: "star")       
                }
                ThirdView()
                    .tabItem {
                        Image(systemName: "gear")
                        Text("設定")
                }
            }
        }
    }

成果物

← これも単純な構造なので初心者の方でも気軽に実装できます。

TabView {}
.tabItem {}
.tag()

その他の方法

カスタマイズした画面遷移も可能です

長くなるから説明は省くけど、こんな感じで自由にカスタマイズできるよ!

たいち

たいち

import SwiftUI

struct ContentView: View {
    @State private var currentPage: String = "FirstView"
    var body: some View {
        ZStack {
            FirstView(currentPage: self.$currentPage)
                .offset(x: self.currentPage == "FirstView" ? 0 : UIScreen.main.bounds.width)
            SecondView(currentPage: self.$currentPage)
                .offset(x: self.currentPage == "SecondView" ? 0 : -UIScreen.main.bounds.width)
            ThirdView(currentPage: self.$currentPage)
                .opacity(self.currentPage == "ThirdView" ? 1.0 : 0.0)
        }
        .animation(.easeInOut)
    }
}

struct FirstView: View {
    @Binding var currentPage: String
    var body: some View {
        ZStack {
            Color.red
            Button(action: {
                self.currentPage = "SecondView"
            }) {
                Text("1個目の画面")
            }
        }
    }
}

struct SecondView: View {
    @Binding var currentPage: String
    var body: some View {
        ZStack {
            Color.green
            Button(action: {
                self.currentPage = "ThirdView"
            }) {
                Text("2個目の画面")
            }
        }
    }
}

struct ThirdView: View {
    @Binding var currentPage: String
    var body: some View {
        ZStack {
            Color.yellow
            Button(action: {
                self.currentPage = "FirstView"
            }) {
                Text("3個目の画面")
            }
        }
    }
}

サンプルコード・使用例(準備中)

準備中です

まとめ

画面遷移はアプリができることの幅を無限に広げてくれます。

ぜひやり方を覚えてアプリをたくさん作りましょう!

最後まで読んでくれてありがとう!

たいち

たいち

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です