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

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

TabViewの使い方

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

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

01
02
03
04
05
06
07
08
09
10
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に対応したビューに画面が切り替わる。