SwiftUI - TabViewの使い方

1. TabViewの使い方

alt

ここではTabViewについてまとめておこうと思います。TabViewはアプリでよく見かける画面の下に表示されるメニュー(ボトムナビゲーション)が出力できます。使い方は下記のようにTabView {...}内に.tabItemを追加することでタブが増えていく仕組みです。.tabItemの1行上にそのタブ内に表示させたいものを書きます。.tabItemの最大表示数は5個でそれ以上はMoreという形でメニューが作成されます。

var body: some View {
  TabView {
    Text("Tab1") //タブコンテンツ
      .tabItem {
        Image(systemName: "1.square.fill") //アイコン
        Text("Tab1") //タブ名
    }
    Text("Tab2")
      .tabItem {
        Image(systemName: "2.square.fill")
        Text("Tab2")
    }
    Text("Tab3")
      .tabItem {
        Image(systemName: "3.square.fill")
        Text("Tab3")
    }
  }
}

2. 初期値を追加したい場合

var body: some View {
  @State var selectTag = 2 //初期値
  //vv追加
  TabView(selection: $selectTag) {
    Text("Tab1") 
      .tabItem {
        Image(systemName: "1.square.fill")
        Text("Tab1")
    }.tag(1) //<<追加
    Text("Tab2")
      .tabItem {
        Image(systemName: "2.square.fill")
        Text("Tab2")
    }.tag(2)
    Text("Tab3")
      .tabItem {
        Image(systemName: "3.square.fill")
        Text("Tab3")
    }.tag(3)
  }
}

3. PageTabViewStyle()

alt

.tabViewStyle(PageTabViewStyle())を追加してタブのスタイルを変更するとスワイプで移動が可能なスタイルになります。(上記のデフォルトスタイルはスワイプで移動しません)

@State var selectTag = 1
  
var body: some View {
  TabView(selection: $selectTag) {
    Text("Tab1").tag(1)
    Text("Tab2").tag(2)
    Text("Tab3").tag(3)
  }
  .tabViewStyle(PageTabViewStyle()) //スタイル変更
  .font(.title)
  .foregroundColor(Color.white)
  .background(Color(red: 0, green: 0, blue: 0, opacity: 1))
}

TabView | Apple Developer Documentation