Lets Create TabView in SwiftUI

In this article, we will learn how to create a Tab View using SwiftUI. If you are new to SwiftUI, please check my article Getting Started With SwiftUI before going through this article.

Prerequisites

MacOS

XCode

So let's begin by creating a SwiftUI Project.

Create a new project in XCode. Select iOS -> App -> Name your Project. Select Interface as SwiftUI and Language as Swift. Save the Project to a desired location

Once you create the SwiftUI Project, you'll land to the ContentView file. Delete all the code inside 'var body' loop.

In this demo, we will be creating a TabView with 4 tabs: Home, Favorites, Orders and Settings.

TabView is a view that switches between multiple child views using interactive UI elements.

So let's start by creating a TabView:

struct ContentView: View {
    var body: some View {
        TabView {
               
        }
    }
}

Now, we will add a tab for our Home Screen. For now, I'll be displaying one line text in our Home Screen. We'll customise it later.

.tabItem is used to configure a view as a tab bar item in the TabView.

struct ContentView: View {
    var body: some View {
        TabView {
            // Design your screen here
            Text("Welcome to Home Screen")
                .tabItem {
                    Label("Home", systemImage: "house")
                }
        }
    }
}

Similiarly, we will be adding the other tabs.

struct ContentView: View {
    var body: some View {
        TabView {
            // Design your screen here
            // Home Tab
            Text("Welcome to Home Screen")
                .tabItem {
                    Label("Home", systemImage: "house")
                }
            // Favorites Tab
            Text("Add your Favorite Products Here!")
            
                .tabItem {
                    Label("Favorites", systemImage: "heart")
                }
            // Orders Tab
            Text("Your Orders will be displayed here!")
                .tabItem {
                    Label("Orders", systemImage: "cart")
                }
        }
    }
}

As you go on adding the tab items you can see how the UI looks in the Canvas.

If you have your own icons that you want to display it on your tabs, you can also do that. Add your icon to Assets and call it in this way:

Text("Text to be displayed on the Screen")
.tabItem {
    Image("ImageName")
    Text("Text to be displayed")
}

Similiar implementation I have done for the Settings Tab:

struct ContentView: View {
    var body: some View {
        TabView {
            // Design your screen here
            // Home Tab
            Text("Welcome to Home Screen")
                .tabItem {
                    Label("Home", systemImage: "house")
                }
            // Favorites Tab
            Text("Add your Favorite Products Here!")
            
                .tabItem {
                    Label("Favorites", systemImage: "heart")
                }
            // Orders Tab
            Text("Your Orders will be displayed here!")
                .tabItem {
                    Label("Orders", systemImage: "cart")
                }
            // Settings Tab
            Text("Change your settings here!")
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("Settings")
                }
        }
    }
}

This is how the screens will look.

Home Screen

Favorites Screen

Orders Screen

Settings Screen

That's it about the Tab View!. Now let's customise our screens to give it a good look and feel.

UI Customisation:

I want to display a list of products on my Home Screen. So let's do it by adding a List.

Replace the line Text("Welcome to Home Screen") with the below code:

let products = ["Product 1", "Product 2", "Product 3", "Product 4"]
            List(products, id: \.self) { product in
                Text(product)
            }

You can also add NavigationLink if you want to navigate to some other screen when you click on the Product Name. For tutorial on Navigation, please check my article Learn about Navigation in SwiftUI.

For the Favorites screen, lets add background color and set some width and height.

VStack {
                Text("Add your Favorite Products Here!")
            }
            .frame(width: 700, height: 700)
            .background(Color.yellow)

For Orders screen, let's add an image and customise the text by providing some font style and font color.

Add your image in Assets and add the following code:

VStack {
                Image("order")
                Text("Your Orders will be displayed here!")
                    .font(.custom("Helvetica Neue", size: 20))
                    .foregroundColor(Color.green)
            }

That's it in this article. As you keep exploring you'll learn more and more about SwiftUI.

Keep Exploring! Keep Coding! :)