SwiftUI – How to create a Tab Bar

Share on facebook
Share on twitter
Share on pinterest
Updated for Xcode 12.0 and SwiftUI 2.0 ✅

Tab bars allow the user to switch between different views of your app quickly. You see them in almost every iOS app. Fortunately, creating a tab bar with SwiftUI is very simple, using a TabView instance 🚀

And this is how it works:

Step 1: Prepare the SwiftUI views your tab bar will contain later. Create a SwiftUI view file for each tab view of the tab bar. To keep your project organized, you can put them in a separate group.


Step 2: Next, we create a new SwiftUI view file called “HostingTabBar”. This HostingTabBar should be the entrance/root view when our app gets launched. For this purpose, we change the SwiftUI App Lifecycle in our *YourAppName*App struct.

@main
struct TabBarApp: App {
    var body: some Scene {
        WindowGroup {
            HostingTabBar()
        }
    }
}

Step 3: Next, we add an enum to our HostingTabBar, which we use to represent our tab bar’s different views. We also declare a State property that we can use to monitor and programmatically control, which Tab is currently shown.

struct HostingTabBar: View {
    
    private enum Tab: Hashable {
        case home
        case explore
        case user
        case settings
    }
    
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        //...
    }
}

Step 4: Now we can add a TabView instance to our HostingTabBar. For this, we bind the selectedTab State to the initialized TabView. 

var body: some View {
    TabView(selection: $selectedTab) {
        
    }
}

Step 5: Next, initialize the different tab views. Wrap them into the TabView closure and assign a unique .tag to each tab view. With the help of each tab view’s .tag, we can control which tab view should be open and move between them programmatically.

TabView(selection: $selectedTab) {
    HomeView()
        .tag(0)
    ExploreView()
        .tag(1)
    UserView()
        .tag(2)
    SettingsView()
        .tag(3)
}

Step 6: Using the .tabItem modifier, you can now design the individual tab items. We can construct a tab item using a Text view, an Image view, or a combination of both.

TabView(selection: $selectedTab) {
    HomeView()
        .tag(0)
        .tabItem {
            Text("Home")
            Image(systemName: "house.fill")
        }
    ExploreView()
        .tag(1)
        .tabItem {
            Text("Explore")
            Image(systemName: "magnifyingglass")
        }
    UserView()
        .tag(2)
        .tabItem {
            Text("User")
            Image(systemName: "person.crop.circle")
        }
    SettingsView()
        .tag(3)
        .tabItem {
            Text("Settings")
            Image(systemName: "gear")
        }
}

If you now run the app and tap on a tab item, you can move between the tab views.

You can programmatically navigate between the tab views by changing the Tab assigned to the selectedTab State (for example, by using a Button).

I hope you enjoyed this tutorial! If you want to learn more about SwiftUI, make sure you check out our free SwiftUI Basics eBook and our other tutorials! Also make sure you follow us on Instagram and subscribe to our newsletter to not miss any updates, tutorials, and tips about SwiftUI and more!

4 replies on “SwiftUI – How to create a Tab Bar”

Your tutorials are great but a request from my side is to place them in order to follow one by one and how can I use custom tabitems and able to change colors for it.

Thank you for the great tutorial! But when I rotate my device only a tiny area of the tab bar is visible. Can you tell me whats the matter here?

Leave a Reply

Your email address will not be published. Required fields are marked *

small_c_popup.png

Covid-19 Forces you into quarantine?

Start Mastering swiftUI Today save your 33% discount