Tabs (SwiftUI) – Tutorials

Prepared and tested with Xcode 13.3.1 and Swift 5.3 (last update: 2022-05-20)

In this part you will learn about the tabs, probably the simplest method allowing you to move between different child views. You do this very intuitively either by selecting tab items located in a tab bar or, when using the page view tab style, by swiping.

Table of contents

Project
Summary

Project

Step 1: create project
Create a new iOS project, as you did in Start Xcode and set up a project section of First application (SwiftUI) part and name it SwiftUI iOS TabView:

Step 2: create tab "frame"
Open in editor the ContentView.swift and in ContentView structure replace default Text with TabView:

Swift

struct ContentView: View { var body: some View { TabView { } } }

1
2
3
4
5
6
7

struct ContentView: View {
  var body: some View {
    TabView {

    }
  }
}

You will see an empty screen with gray area at the bottom of the screen reserved for tabs:

Step 3: add views – each view defines one tab
Inside TabView add three views – you can add any view you want, even very complicated but to keep this example simple now you add three Text views:

struct ContentView: View {
  var body: some View {
    TabView {
      Text("First tab")
      Text("Second tab")
      Text("Third tab")
    }
  }
}

struct ContentView: View {

var body: some View {

TabView {

Text("First tab")

Text("Second tab")

Text("Third tab")

}

You will see a screen with text First tab but without tabs area at the bottom:

Reason for this is that now you have a choice how you will interact with tabs: you can use typical tabs or instead use swiping.

Step 4: use tab bar to select view
Create tab bar items by applying a tabItem() modifier:

struct ContentView: View {
  var body: some View {
    TabView {
      Text("First tab")
        .tabItem {
          Image(systemName: "1.circle")
          Text("First")
        }
      Text("Second tab")
        .tabItem {
          Image(systemName: "2.circle")
          Text("Second")
        }
      Text("Third tab")
        .tabItem {
          Image(systemName: "3.circle")
          Text("Thirs")
        }
    }
  }
}

struct ContentView: View {

var body: some View {

TabView {

Text("First tab")

.tabItem {

Image(systemName: "1.circle")

Text("First")

}

Text("Second tab")

.tabItem {

Image(systemName: "2.circle")

Text("Second")

}

Text("Third tab")

.tabItem {

Image(systemName: "3.circle")

Text("Thirs")

}

Step 5: select tab in code
To control the currently selected tab in code, a you have to add tag to each tab item:

struct ContentView: View {
  @State private var selectedTab = 1
  
  var body: some View {
    TabView(selection: $selectedTab) {
      Text("First tab")
        .tabItem {
          Image(systemName: "1.circle")
          Text("First")
        }
        .tag(1)
      
      VStack {
        Text("Second tab")
        HStack {
          Button(action: {
            selectedTab = 1
          }) {
            Image(systemName: "arrow.left.circle.fill")
          }
          Button(action: {
            selectedTab = 3
          }) {
            Image(systemName: "arrow.right.circle.fill")
          }
        }
        .font(.largeTitle)
      }
      .tabItem {
        Image(systemName: "2.circle")
        Text("Second")
      }
      .tag(2)
      
      Text("Third tab")
        .tabItem {
          Image(systemName: "3.circle")
          Text("Thirs")
        }
        .tag(3)
    }
  }
}

struct ContentView: View {

@State private var selectedTab = 1

var body: some View {

TabView(selection: $selectedTab) {

Text("First tab")

.tabItem {

Image(systemName: "1.circle")

Text("First")

}

.tag(1)

VStack {

Text("Second tab")

HStack {

Button(action: {

selectedTab = 1

}) {

Image(systemName: "arrow.left.circle.fill")

}

Button(action: {

selectedTab = 3

}) {

Image(systemName: "arrow.right.circle.fill")

}

.font(.largeTitle)

}

.tabItem {

Image(systemName: "2.circle")

Text("Second")

}

.tag(2)

Text("Third tab")

.tabItem {

Image(systemName: "3.circle")

Text("Thirs")

}

.tag(3)

}

Step 6: use swiping to select view
For swiping you need only views and tabViewStyle() modifier:

struct ContentView: View {
  @State private var selectedTab = 1
  
  var body: some View {
    TabView {
      Text("First tab")
      Text("Second tab")
      Text("Third tab")
    }
    .tabViewStyle(PageTabViewStyle())
  }
}

struct ContentView: View {

@State private var selectedTab = 1

var body: some View {

TabView {

Text("First tab")

Text("Second tab")

Text("Third tab")

}

.tabViewStyle(PageTabViewStyle())

}

Summary

You have learned probably the simplest method to organize multiple views.

The key points of this part are:

How to use TabView to "switch" between multiple views.
How to implement tab bar with tabs located along the bottom edge of the screen.
How to replace tabs with swiping.