【SwiftUI】タブバーを使って画面の切り替えを実装する

SwiftUIではTabViewを使うことで、画面下のタブで画面を切り替えるUIを簡単に作ることができる。

今回はTabViewの基本的な使い方をまとめ、簡単な実装例を紹介していく。

TabViewの使い方

TabViewにはVStackなどと同様に、複数のビューを定義することができる。

また、定義したビューはそれぞれが切り替えをおこなう1画面分のコンテンツとなる。

struct ContentView: View {
    var body: some View {
        TabView {
            Text("FirstContent")
                .tabItem { Text("First") }
            Text("SecondContent")
                .tabItem { Text("Second") }
        }
    }
}

この例では二つのTextビューを定義している。

このTextビューにはそれぞれtabItemモディファイアで別のTextビューが指定されているが、これは画面下のタブバーに表示するビューのことで、TextビューまたはImageビューのいずれかを指定することができる。

出来上がったサンプルを起動し、タブバーをタップするとtabItemに対応したビューに画面が切り替わる。