この記事では、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()
をつけることで、タブの選択状態を操ることができます。