SwiftUI TabView

TabView is a view that incorporates a tab bar which allows for easy switching between multiple tabs/child views.

Basic Code Example

TabView() {
  Text("Tab 1")
  Text("Tab 2")
}

To display a TabView, add child views such as Text(“Tab 1”) and Text(“Tab 2”) in lines 2 and 6. Each of these child views will be its own tab. These child views can also be other elements, such as an Image, a VStack, a custom view that you defined, and more.

Adding Tabs to the Tab Bar

TabView() {
  Text("Tab 1")
    .tabItem {
      Image(systemName: "circle")
      Text("First")
    }
  Text("Tab 2")
    .tabItem {
      Image(systemName: "square")
      Text("Second")
    }
}

To add items to the tab bar, add the modifier tabItem to each child view. In the tabItem modifier, an Image and Text can be specified which will appear as an item on the tab bar that can be tapped on to navigate to the respective tab.

Changing the Tab Bar Appearance

TabView() {
  Text("Tab 1")
    .tabItem {
      Image(systemName: "circle")
      Text("First")
    }
  Text("Tab 2")
    .tabItem {
      Image(systemName: "square")
      Text("Second")
    }
}
.accentColor(.red)

The modifier accentColor(‘color’) changes the color of the currently selected tab item. To change the background color and default tab item colors, some extra work is required as demonstrated below.

struct ContentView: View {
  init() {
    UITabBar.appearance().backgroundColor = UIColor.blue
  }

  var body: some View {
    TabView() {
      Text("Tab 1")
        .tabItem {
          Image(systemName: "circle")
          Text("First")
        }
      Text("Tab 2")
        .tabItem {
          Image(systemName: "square")
          Text("Second")
        }
    }
  }
}

As shown in lines 2-4, we can use UITabBar.appearance().backgroundColor to modify the color of the tab bar. This must be done in the init() function of the parent View (ex. ContentView in this case).

Bonus: Labelling Tabs and Changing the Default Tab

struct ContentView: View {
  @State private var selection = 2

  var body: some View {
    TabView(selection:$selection) {
      Text("Tab 1")
        .tabItem {
          Image(systemName: "circle")
          Text("First")
        }
        .tag(1)
      Text("Tab 2")
        .tabItem {
          Image(systemName: "square")
          Text("Second")
        }
        .tag(2)
    }
  }
}

TabView can take in a selection binding, which we can declare using @State such as in line 2. This will determine which tab to initially display. The tag modifiers to each tab/child view are labels for selection. The code above will initially display the tab with tag(2), which is found on line 17. The tag and selection can be anything from numbers 1, 2, to strings “First”, “Second”.