SwiftUI – How to create a Tab Bar

Share on facebook
Share on twitter
Share on pinterest

Creating a Tab Bar in SwiftUI is really simple – here’s how to do it 🚀

Tab Bar (known as UITabBars in UIKit) are perfect for providing the user the ability to quickly switch between different views.⠀ ⠀ Here is how to implement Tab Bars into your SwiftUI app 👇⠀

Step 1: Wrap your overall view, where you want to store your subviews in, into a TabView. This automatically creates a full functional Tab Bar for us!⠀ ⠀

Step 2: Insert the subviews into the Tab View wrapper. This automatically creates one “slot” for each subview inside your Tab Bar⠀ ⠀

Step 3: Create a Tab Bar item for every subview by adding the .tabItem modifier. You can choose any icon and label you want for each tab bar item SwiftUI then knows which index every object should have and updates the State depending on the current selection! You can then use the State‘s value, for example as we do with a Text displaying the selected color.

struct ContentView: View {
    var body: some View {
        //1. Create a TabView
        TabView {
            //2. Insert a subview into your TabView
            Text("Home View")
                //3. Create a tab bar item for each subview
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
            Text("Settings View")
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }
        }
    }
}


Great, we just learned how to retrieve and parse JSON data from the web by using the Codeable protocol and our own data models. You are now able to work with API’s that provide data via JSON.

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!

2 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

small_c_popup.png

Are you ready for a new era of iOS development?

Start learning swiftUI today - download our free e-book