TabView and tabItem() in SwiftUI

In this tutorial, you are going to learn about TabView and tabitem() in SwiftUI with examples.

In SwiftUI, TabView is a view that can help app developers to create tabs associated with views. Each tab is responsible for showing a different view.

The tabitem() modifier can add tab items to the bottom of the view. A user can tap a tab item to see the view associated with that specific tab item replacing the previous view.

Below is a simple example of how to start creating a TabView view in SwiftUI:

TabView {
    // All the views for tabs and tab items will be here
}

That’s it. Now we only have to put the views that are going to appear here in the. The above code will add the tab bar to the bottom. But it will be completely blank as we have not added any views and tabitems. So let’s create SwiftUI views first.

In our example, we will create three views which are going to be HomeView, AboutView and ContactView. To create a new SwiftUI view click File > New > File... and then select SwiftUI View from the User Interface and click Next. Then enter the SwiftUI view file name and then click on Create.

In this way let’s create the three views HomeView, AboutView and ContactView.

Below is the simplified example of TabView without any tabItem():

    var body: some View {
        
        TabView {
            
            HomeView()
            
            AboutView()
            
            ContactView()
             
        }
        
    }

The user now can tap at the bottom to show different tab views. But there is no icon or text label available as we have not set the tabItem.

You can see that we have added the 3 SwiftUI views we created in the TabView.

Now let’s create the TabView with tabItems() modifier to add label and icon for each views:

    var body: some View {
        
        TabView {
            
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house")
                }
            
                
                AboutView()
                    .tabItem {
                        Label("About", systemImage: "info.circle")
                    }
            
                
                ContactView()
                    .tabItem {
                        Label("Contact", systemImage: "message")
                    }
                
            
        }
        
    }

That’s it. We are successfully able to create TabView with tabitems. In the screenshot below, you can see how it looks:

Now tabs are properly visible to the user. Tapping the tab items will show the associated views added to the tab items.

Let’s take a closer look to understand what we did. From the above code, take the third tab where we are calling the ContactView():

                ContactView()
                    .tabItem {
                        Label("Contact", systemImage: "message")
                    }

The ContactView() view is adding our SwiftUI view with the name ContactView. To add item for the tab in the bottom we are using Label view. You can see that we are using icon and “Contact” as the label text.

Well, if you don’t want to use icon and only need text for as the tab label, then below is what you can do:

                ContactView()
                    .tabItem {
                        Text("Contact")
                    }

There is another way of adding text and icon:

                ContactView()
                    .tabItem {
                        Image(systemName: "message")
                        Text("Contact")
                    }

By Faruque Ahamed Mollick