[SwiftUI]TabViewの使い方

「TabViewってどうやって使えばいいの？」

「TabViewって何？」

「TabViewの使い方がイマイチよく分からない」

と言う人に向けて、この記事は書かれています。

どうも、ちょげ（@chogetarou）です。

この記事では、TabViewの使い方について解説します。

TabViewとは
使い方
まとめ

TabViewとは

まず、TabViewとは、タブをタップすることによって画面を切り替えることの出来るビューです。

TabViewには、以下のような利点があります。

複数の画面を切り替える事ができる
画面下のバーにタブがあるのでタップしやすい
実装が簡単

複数の画面を扱うようなアプリでは、重宝するビューです。

使い方

コンピュータ, 画面, コーディング, コンピューターのコード, 監視, コンピューターの画面

イニシャライザ

TabViewのイニシャライザは、以下のようになっています。

TabView(content: () -> contents)

content
表示する画面を指定するクロージャー

.tabItemモディファイア

TabViewでは、TabItemモディファイアを必ず使います。

.tabItemモディファイアは、表示する画面に対応するタブを定義するモディファイアです。

表示する画面それぞれに指定する必要があります。

        TabView {
            Text("画面１")
                .tabItem {
                    Image(systemName: "note.text")
                    Text("1")
                }
            
            Text("画面２")
                .tabItem {
                    Image(systemName: "note.text")
                    Text("2") 
                }
        }

tabItemには、タブとして表示させたいビューを指定するのですが、TextとImageの2つしか指定する事は出来ません。

また、デフォルトで縦並びになるようになっています。

tagを付ける

tabItemと表示する画面があれば、TabViewは実装できます。

TabViewは表示される時、デフォルトでは一番最初に書かれたビューが表示されるようになっています。

しかし、最初に書かれた画面以外を最初に表示させたい時があります。

その時には、tagを使います。

tagと状態変数を使うことによって、最初に表示する画面を自由に設定する事ができます。

    @State var tabSelect = 1
    var body: some View {
        TabView(selection: $tabSelect) {
            Text("画面１")
                .tabItem {
                    Image(systemName: "note.text")
                    Text("1")
                }
                .tag(0)
            
            Text("画面２")
                .tabItem {
                    Image(systemName: "note.text")
                    Text("2")
                    
                }
                .tag(1)
            
            Text("画面3")
                .tabItem {
                    Image(systemName: "note.text")
                    Text("3")
                    
                }
                .tag(2)
        }   
    }

tagを使用する場合は、以下の3つのことが必要になります。