【SwiftUI】TabViewの使い方について解説~背景色やアクセントカラーの変更から、初期表示タブ変更の方法まで~

この記事では、SwiftUIでTabViewを実装する方法について徹底解説していきたいと思います。

TabViewの基本的な実装方法

以下のように記述します。

struct ContentView: View {
    var body: some View {
        TabView {
            TabAView()
                .tabItem {
                    Image(systemName: "square.and.arrow.up")
                    Text("TabA")
                }
            TabBView()
                .tabItem {
                    Image(systemName: "pencil.circle")
                    Text("TabB")
                }
        }
    }
}

struct TabAView: View {
    var body: some View {
        Text("TabA")
    }
}

struct TabBView: View {
    var body: some View {
        Text("TabB")
    }
}

このようにTabView()の中に、Viewを入れる形で書きます。タブは最大5つ表示させることができます。

タブが6以上になると、以下のように一番右のタブが『More』というリストのタブになり、5つ目以降のタブが格納されます。右上にEditというボタンも追加され、ここをいじるとタブの位置を変更することができます。(この機能使ってるアプリ見たことない。。)

基本的にタブは6つ以上にするべきではないですね。

TabViewの色を変更する

アクセントカラーを変更する方法

タブバーの選択している色を変更することができます。

struct ContentView: View {
    var body: some View {
        TabView {
            省略...
        }.accentColor(.red)
    }
}

.accentColor(.red)で変更できます。

タブの背景色を変更する

タブバーの色をつけるとレイアウト的に少しダサくなる気もしますが、、、以下のように記述すると色を変更できます。

struct ContentView: View {
    init() {
        UITabBar.appearance().backgroundColor = .gray
    }
    
    var body: some View {
        TabView() {
            TabAView()
                .tabItem {
                    Image(systemName: "square.and.arrow.up")
                    Text("TabA")
                }
            TabBView()
                .tabItem {
                    Image(systemName: "pencil.circle")
                    Text("TabB")
                }
        }
    }
}

非選択のタブの色を変更する

上記と同じように、init()を以下のように記述してください。

init() {
    UITabBar.appearance().unselectedItemTintColor = .purple
}

Tagをつけて初期表示タブを変更する

初期表示のタブを変えたいという時があると思います。そのような時は以下のように記述します。

struct ContentView: View {
    @State var selectTabIndex = 1
    
    var body: some View {
        TabView(selection: $selectTabIndex) {
            TabAView()
                .tabItem {
                    Image(systemName: "square.and.arrow.up")
                    Text("TabA")
                }.tag(0)
            TabBView()
                .tabItem {
                    Image(systemName: "pencil.circle")
                    Text("TabB")
                }.tag(1)
        }
    }
}

.tag()をつけることで、タブの選択状態を操ることができます。