【SwiftUI】タブ(TabView)で画面を切り替える方法

2024.09.18
SwiftUI

本記事では、TabViewを使用してタブを押すことで画面を切り替えることができる機能について解説していきます。

1. TabViewとは
2. TabViewを設置
3. TabViewの設定
4. タブにアイコン画像を設定
5. まとめ

TabViewとは

TabViewとは、画面下に用意したタブをクリックすることで複数のビューを切り替えて表示することを可能にする機能です。

タブを利用した機能は、LINE,Twitter,Instagramなど多くのアプリケーションで採用されており、IOSアプリ開発には必要不可欠な機能であると言えます。

TabViewを活用することで、便利でスタイリッシュなツール系アプリを作成することできます。

TabViewを設置

早速TabViewを設置していきます。TabViewを設置するには、TabView(){}をbody内に配置します。

各項目の詳細は以降で解説していきます。

var body: some View {
        TabView(selection: content){
            Text("Tab Content 1").tabItem { Text("Tab Label 1") }.tag(1)
            Text("Tab Content 2").tabItem { Text("Tab Label 2") }.tag(2)
        }
}

次に、何番目のタブが設定されているかを保持しておくためのint型の@State変数を定義します。

@State var selectedTag = 1

@State変数は、ビューの操作を監視して変更のタイミングでソースコードの値を変更することができる変数になります。

この変数selectedTagは、TabViewにパラメータとして渡すことで、TabView内のtag()がついている要素の中からtag()の値と変数の値が一致する要素を表示させることが可能となります。

TabViewの設定

TabViewに必要となる設定値は、selection,画面要素,tabItem,tagの4つとなり、それぞれについて解説していきます。

selectionはTabViewへのパラメータとなる値で、どのタブが選択されているかを管理するための@State変数を渡します。このパラメータに入っている値と同様の値を持ったtagに該当する画面要素が表示されるようになります。

画面要素にはText()やImage()など、タブが選択された際に画面上に表示させたい要素を指定します。画面要素は、TabView(){}の中に複数配置することができます。

tabItemには、画面下に表示されるタブの表示内容を設定します。tabItemの中には、文字を表示するTextや画像やアイコンなどを表示するLabelなどを設定することができます。

tagには、タブを識別するための数値を設定します。tagに設定した値は画面上からは確認できない値ですが、実際のプログラム上ではこのtagの値を参照して表示内容を決定しています。

ここまでご紹介してきた内容を反映すると以下のようなソースコードになります。

struct ContentView: View {
    @State var selectedTag = 1
    var body: some View {
        TabView(selection: $selectedTag){
            Text("最初に表示される画面です。").tabItem { Text("TextTab") }.tag(1)
            Image("image1").tabItem { Text("ImageTab") }.tag(2)
        }
    }
}

上の例では2つのタブを用意し、左側のタブにはTextを、右側のタブにはImageを使用して画像を表示するよう設定しています。

タブの表示される順番は、TabView内に配置した順番で上に置いた要素から左に配置されます。tagに設定した数値の順番で表示されるわけではない点に注意してください！tagは、あくまで要素とタブを紐づけて識別するための値となります。

タブにアイコン画像を設定

余談として、タブにテキストではなくよくSNSなどで見かけるようなアイコンを設定して視覚的にわかりやすくする方法もご紹介します。

tabItemの中にLabelを配置することでタブにラベルを表示することができます。例として、表示される画面はシンプルなテキストのみとしますが、タブ部分にはアイコン表示+文言という表示をします。

TabView(selection: $selectedTag){
            Text("ホーム画面").tabItem { Label("Home", systemImage: "house")}.tag(1)
            Text("検索画面").tabItem { Label("Edit", systemImage: "sparkle.magnifyingglass") }.tag(2)
            Text("編集画面").tabItem { Label("Edit", systemImage: "pencil.tip.crop.circle.fill") }.tag(3)
            Text("ゴミ箱").tabItem { Label("Trush", systemImage: "pencil.tip.crop.circle.fill") }.tag(4)
        }

表示結果(Home)