Viewを画面下部のボタン”タブ”で切り替える方法を解説【TabView】｜一通りのカスタマイズ方法も

iOS：13.0以上
XCode（当サイトの環境）：15.0.1

TabViewを使用すると、タブ式のユーザーインターフェースを簡単に作成できます。
各タブには、ビューが関連付けられており、ユーザーがタブを選択するとそのビューが表示されます。

TabView内で.tabItemモディファイアを使用してタブのアイコンやテキストを設定し、選択されたタブに応じて表示するビューを指定します。
また、@Stateプロパティを使用して選択されたタブをバインドし、プログラムからタブの選択を制御することも可能です。

基本的な使用例
TabViewのスタイル変更
1. コード例
タブバーにバッジをつけるには？
1. コード例
タブビューをプログラムで制御するには？
1. サンプルコード
まとめ

基本的な使用例

SwiftUIでTabViewを使う例を以下に示します。このコードは、2つのタブを持つシンプルなタブビューを作成します。
1つ目のタブはLabelを使用して、ホームアイコンとテキストを表示し、2つ目のタブはImageとTextを使用して、情報アイコンとテキストを表示します。選択されたタブに応じて表示するビューを切り替えます。

import SwiftUI

struct TavViewSmp: View {
    var body: some View {
        TabView {
            Text("ホーム画面")
                .tabItem {
                    Label("ホーム", systemImage: "house.fill")
                }
            
            Text("設定画面")
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("設定")
                }
        }
    }
}

上記のコードでは1つのViewとして作成しましたが、複数のViewに分けることももちろん可能です。

TabViewのスタイル変更

iOS：14.0以上

TabViewにtabViewStyle(_:)モディファイアを適用すると、タブビューのスタイルをカスタマイズできます。
例えば、PageTabViewStyleを使ってタブをページングスタイルで表示することができます。スワイプして異なるビュー間をナビゲートしたい時に便利です。

コード例

TabView {
// ...
}
.tabViewStyle(.page)

タブバーにバッジをつけるには？

iOS：15.0以上

以下のようにタブ項目にバッジをつけることも可能です。

.badge(2)

コード例

TabView内のビューに.badgeを付与することで表示できます。

import SwiftUI

struct TavViewSmp: View {
    var body: some View {
        TabView {
            Text("ホーム画面")
                .badge(2)
                .tabItem {
                    Label("ホーム", systemImage: "house.fill")
                }
            
            Text("設定画面")
                .badge("!")
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("設定")
                }
        }
    }
}

タブビューをプログラムで制御するには？

TabViewをプログラムで制御するには、selectionバインディングを使用して選択されているタブを管理します。
TabViewのselectionパラメータにバインドされた状態変数を渡し、その変数の値を変更することでプログラム的にタブを切り替えることができます。

各タブビューにはタグを設定し、このタグを変更することで特定のタブを選択できます。
例えば、@State private var selectedTab: Int = 2という状態変数を定義し、TabView(selection: $selectedTab)として使用します。
そして、各タブビューに.tag(1)のようにタグを設定し、selectedTabの値を変更することでタブを切り替えます。

サンプルコード

import SwiftUI

struct TavViewSmp: View {
    // 初期表示するタブを指定する
    @State private var selectedTab = 2
    
    var body: some View {
        // ボタンで表示するタブを制御する
        Button("ホーム画面を開く") {
            selectedTab = 1
        }
        Button("設定画面を開く") {
            selectedTab = 2
        }
        
        TabView(selection: $selectedTab) {
            Text("ホーム画面")
                .badge(2)
                .tabItem {
                    Label("ホーム", systemImage: "house.fill")
                }
                .tag(1)
            
            Text("設定画面")
                .badge("!")
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("設定")
                }
                .tag(2)
        }
    }
}