TabView and TabItem() in SwiftUI

In this tutorial, We’ll learn how to implement TabView in SwiftUI. TabView works the same as UITabBarController. Whenever we want to show more views on the same screen the easiest way to achieve this is using a Tabview. It’s quite easy to add the Tabbar in SwiftUI which you’ll see in this tutorial.

What this Blog will cover:

• TabView
• TabItem
• Change TabItem Tint Color

Syntax:

       TabView{
            HomeView() //View initializer
                .tabItem{
                    Text("Home") // view name
                    Image(systemName: "Home Image")    // View image   
        }  
      }

Firstly, Create three SwiftUI files namely, “HomeView”, “ProfileView” and “SettingsView”

This is how a new SwiftUI file is created:

          Xcode -> File -> New -> File -> SwiftUI View

You can also press Cmd+N for creating a new SwiftUI View.

TabView

Now add a Tabview in your main ContentView:

struct ContentView: View {
    var body: some View {
        TabView{
         
// your views will go here      
            
        }
    }
}

Add all three views in your TabView:

struct ContentView: View {
    var body: some View {
        TabView{
            HomeView()
                
            ProfileView()
                
            SettingsView()      
        }
    }
}

TabItem

Now you have a gray area in the bottom area of the App.  For now, We don’t have any text or icons for our views. So to give each view its name and icon there is something called as TabItem which we are going to use.

struct ContentView: View {
    var body: some View {
        TabView{
            HomeView()
                .tabItem{
                    Text("Home")
                }
            ProfileView()
                .tabItem{
                    Text("Profile")
                }
            SettingsView()
                .tabItem{
                    Text("Settings")
                }
                
            
        }
    }
}

and you can also give the image to your Tabbar item like this.

struct ContentView: View {
    var body: some View {
        TabView{
            HomeView()
                .tabItem{
                    Text("Home")
                    Image(systemName: "house")
                }
        }
    }
}

and You can add text and image at once using Label.

           Label("home", systemImage: "house")

Label lets us add image and text simultaneously and reduces the code to only one line.

struct ContentView: View {
    var body: some View {
        TabView{
            HomeView()
                .tabItem{
                    Label("home", systemImage: "house")
                }
        }
    }
}

Output:

Change TabItem tint color in SwiftUI

And by default the tint color of tabItem is blue. This can be changed by using the modifier accentColor.

           .accentColor(.purple)

Here is the Complete code for your reference:

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView{
            HomeView()
                .tabItem{
                    Text("Home")
                    Image(systemName: "house") 
                }
            ProfileView()
                .tabItem{
                    Text("Profile")
                }
            SettingsView()
                .tabItem{
                    Text("Settings")
                }
                
            
        }.accentColor(.purple)
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Output: