How to Use Swift TabView With Examples

One of the most popular ways to create an app with different multiple areas of content is to have tabs. In iOS, the most common is a bottom tab; one click of each tab icon will show a different screen. For example, take the Instagram iOS app, which has Home, Search, Video, Notifications, and Profile tabs. Clicking any of them will take you to a different screen.

In this post, you’ll learn about TabView, with which you can easily create tabs. You’ll create a simple SwiftUI project with a tab. And you’ll also integrate different screens into the project.

What Is TabView in SwiftUI?

TabView, a feature available in the latest SwiftUI, lets you easily create a tab bar in an iOS app. Now, SwiftUI is the new way to create an iOS app that Apple is pushing developers to adopt. It differs from the earlier UIKit-based Storyboard apps in that here, easy-to-use Views help you develop apps more quickly with widgets.SwiftUI resembles Flutter, which has customized widgets to create everything.

The Project Setup

We need to first create a new project by opening Xcode and clicking on New>Project:

A pop-up opens, where you can click on App and then the Next button:

In the next pop-up, give any suitable name as the Product Name. In our case, we’ll use TabView. Select SwiftUI as the interface and make sure to check Include Tests because you’re going to test your app later.

In the next pop-up, just click on the Create button.

Notice that the structure and files are different from those of a Storyboard project. Also, SwiftUI displays an iPhone screen for each file. It will immediately reflect code changes so you don't need to re-run the simulator every time you add code.

Creating a Tab Bar

To create a Tab Bar with TabView, you’ll create a new SwiftUI View file in the root directory.

In the next tab, name the file MyTabBar. Make sure that the Target matches the product name TabView.

You’ll use the newly released icons called SF Symbols in your project. So head over to the official Apple SF Symbols page and download them.

Once you install it on your Mac, you’ll see all the symbols available. You just need to know the name of the symbol you want to use, but you don't need to install it in Xcode.

Now, in the MyTabBar.swift file, we use enum and list all icons as cases, using names taken from the SF Symbols library. Inside the struct MyTabBar, we first bind the Tab to the selected tab variable. After that, we have a fillImage value, in which add .fill to the selected tab.

All the SF Symbols have their corresponding fill image, like for example, the house.fill symbol, which is filled. Next, we loop through the enum and in each iteration show a space, then use an image to show the symbol, and then another space. Also, note that we show the filled image for the selected tab.

Next, we give some additional styles with frame, background, and cornerRadius. You’ll see the result in the iPhone image instantly.

import SwiftUI

enum Tab: String, CaseIterable {
   case house
   case message
   case person
   case eraser
   case trash
}

struct MyTabBar: View {
      @Binding var selectedTab: Tab
      private var fillImage: String {
        selectedTab.rawValue + ".fill"
     }
     var body: some View {
        VStack {
           HStack {
             ForEach(Tab.allCases, id: \.rawValue) { tab in
                 Spacer()
                 Image(systemName: selectedTab == tab ? fillImage : tab.rawValue)
                 Spacer()
               }
            }
            .frame(width: nil, height: 60)
            .background(.thinMaterial)
            .cornerRadius(10)
       }
    }
}

struct MyTabBar_Previews: PreviewProvider {
     static var previews: some View {
         MyTabBar(selectedTab: .constant(.house))
     }
}

Next, let's add some more animation effects to our selected symbols. First, we scale them if selected, then change their color to red and increase the font size. We’ll also give the selected tab smooth animation.

.scaleEffect(selectedTab == tab ? 1.25 : 1.0)
.foregroundColor(selectedTab == tab ? .red : .gray)
.font(.system(size: 22))
.onTapGesture {
     withAnimation(.easeIn(duration: 0.1)){
         selectedTab = tab
     }
}

Display Tab Bar in App

You’ve created the tab bar, but to display it in the app you need to add it in the ContentView.swift file. Here, in the ContentView you first show house as the selected tab. And after that, you’ll show the MyTabBar component with the selected tab. The user can click on whichever tab they want to show.

@State private var selectedTab: Tab = .house
var body: some View {
   MyTabBar(selectedTab: $selectedTab)
}

Next, add an init code in the ContentView.swift file. At first, you need to make it hidden. Then, inside the body, create a ZStack, which will contain two VStacks. The first one will show an image and text corresponding to the selected tab.

The second VStack shows your tab bar. To learn more about ZStack, VStack, and HStack (which you used in the code above), refer to this post. The iPhone image now shows your app perfectly and clicking the tab works properly.

init() {
   UITabBar.appearance().isHidden = true
}

ZStack{
   VStack {
     TabView(selection: $selectedTab){
       ForEach(Tab.allCases, id: \.rawValue) { tab in
          HStack {
            Image(systemName: tab.rawValue)
            Text("\(tab.rawValue.capitalized)")
              .bold()
          }
        .tag(tab)
      }
     }
   }
   VStack {
     Spacer()
     MyTabBar(selectedTab: $selectedTab)
    }
  }
}

But you should always check your app in iPhone simulator after a milestone. If you start one, you’ll see that everything works correctly.

Separate Screen for Each Tab

In a real app, when we press a tab icon a different screen should appear. Let’s update our app to do the same. Again, create a new SwiftUI View file.

Name it FirstScreen and make TabView the Target.

In the FirstScreen.swift file, add the code below, which will show large text with a pink background color.

var body: some View {
    ZStack{
       Text("First Screen")
        .bold()
        .font(.largeTitle)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.pink)
    .clipped()
}

Next, create another SwiftUI View file called SecondScreen.swift. This file is similar to the earlier file, except it has a different title and color for the background.

var body: some View {
      ZStack{
         Text("Second Screen")
           .bold()
           .font(.largeTitle)
      }
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .background(.mint)
      .clipped()
}

Create another SwiftUI View file called ThirdScreen.swift. This file is also almost similar to an earlier file, but the text is different. Also, you’ll show a nice linear gradient for the background color.

var body: some View {
      ZStack{
          Text("Third Screen")
              .bold()
              .font(.largeTitle)
          }
          .frame(maxWidth: .infinity, maxHeight: .infinity)
          .background(LinearGradient(colors: [.orange, .red],
                                     startPoint: .top,
                                     endPoint: .center))
          .clipped()
}

Next, make a file called FourthScreen.swift, which is similar to SecondScreen.swift, except for a different title and different background color.

var body: some View {
     ZStack{
        Text("Fourth Screen")
          .bold()
          .font(.largeTitle)
        }
       .frame(maxWidth: .infinity, maxHeight: .infinity)
       .background(Color.blue.opacity(0.5))
       .clipped()
}

Lastly, make a file called FifthScreen.swift, which resembles an earlier file, except again, it has a different title and different color background.

var body: some View {
     ZStack{
        Text("Fifth Screen")
           .bold()
           .font(.largeTitle)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green.opacity(0.3))
        .clipped()
}

To show your five different screens, you need to update your ContentView.swift file. In the TabView for the selected tab, you want to list the five screens. Also, notice the tag function on each screen. It needs to have the correct identifier for each tab.

TabView(selection: $selectedTab){
      FirstScreen()
       .tag(Tab.house)
     SecondScreen()
       .tag(Tab.message)
     ThirdScreen()
       .tag(Tab.person)
    FourthScreen()
      .tag(Tab.eraser)
    FifthScreen()
      .tag(Tab.trash)
}

On running the app in simulator, everything works well.

Testing the App

You can test the app with XCTest, and take the initial steps from our post on XCUI methods.

For testing, you need a unique ID for each element. You can find the IDs with the Accessibility Inspector. To open it, click on Xcode > Open Developer Tool > Accessibility Inspector.

Keep the iOS simulator running on the side. Use the pointer from the Accessibility Inspector to click on different elements. Here, we clicked on the text of the First Screen. And the Label, or unique ID, for this element is First Screen.

Now, create a file called TabViewTests.swift inside the Tests folder. In the file, create a checkLabel function, which will use XCTAssert to check if the label exists.

import XCTest

public class TabViewTests: BaseTest {
      override var rootElement: XCUIElement{
        return app.staticTexts["First Screen"]
      }

     lazy var labelText = app.staticTexts["First Screen"]

     @discardableResult
     func checkLabel(completion: Completion = nil) -> Self {
        log("Check if Label text exists")
        XCTAssert(labelText.exists)
       return self
   }
}

In the BasicTests.swift file, call the TabViewTests class and then the checkLabel function. After that, click on the play test button next to the function.

TabViewTests().checkLabel()

The tests will take 10-20 seconds to run and once completed, you’ll see the green ticks checked. It will also show the result in a log.

What We've Covered About TabView in SwiftUI

In this post, we talked about TabView in SwiftUI. Using the easy-to-use code of SwiftUI, we created a fully working tab bar. We also wrote simple test cases using XCTest.

However, test cases emulating each press of a tab and showing the corresponding screen will be very complicated. To make your testing less complicated, try Waldo. You need only provide an APK or IPA file, and then just interact with your app. Waldo automatically generates test cases and emails you the results.