Creating a TabView app in SwiftUI

SwiftUI is Apple’s new user interface toolkit and it provides a state-driven declarative way of designing your apps. Meaning, we tell SwiftUI how we want our UI to look and work and it figures out how to make that happen.

SwiftUI is quite new and still in development. Just like some people ask, SwiftUI doesn’t replace UIKit, you can use both in the same app. All you need to get started with SwiftUI is Xcode 11 and above, macOS Catalina (to enjoy live update) and iOS 13 where it can only run as of today.

Creating a TabView app in SwiftUI is quite simple. Let’s quickly create one with three tabs, just like this:

Creating a new SwiftUI Project

Create a new Xcode project. I will name mine TabViewApp. Make sure SwiftUI is selected as the option for User Interface, as shown below:

Click Next to proceed.

If this is your first time with SwiftUI, some syntax might still seem new to you. I will advise you to take a break, take a look at this short getting started tutorial in the SwiftUI documentation and then come back to continue with the rest of this article.

Creating the three screens

We need three different screens, Home, Notification and Profile. Let’s create them.

Right-click your TabViewApp project folder and select New File… Then select SwiftUI View from the “Choose a template…” dialog, as shown below:

Save the file as HomeScreen.swift, implying that would be our Home screen. Replace the default “Hello World!” text in the Text view with “Home Screen” so, that would help us identify each of the screens, as described below:

struct HomeScreen: View {
    var body: some View {
        Text("Home Screen")
    }
}

Also, create two more files just as we did above, with the names NotificationScreen.swift and ProfileScreen.swift, to handle our Notification and Profile screens. Then, replace the “Hello World!” text in each of the views with “Notification Screen” and “Profile Screen” as described below:

struct NotificationScreen: View {
    var body: some View {
        Text("Notification Screen")
    }
}

struct ProfileScreen: View {
    var body: some View {
        Text("Profile Screen")
    }
}

As you change the text in these views, you should see the changes reflect in your preview on the right automatically.

Creating the TabView

Now, let’s create the actual TabView that houses these views we have created.

Open the ContentView.swift file and change the content to the following:

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

Here, we are creating a TabView with a single tab item. The tab item contains views from the HomeScreen view we created earlier. The tab item is described by an Image and a Text. We create the Image by passing in a systemName, using SF Symbols introduced by Apple, which gives us a nice-looking icon.

In the Preview on the Canvas by your right, you should see something similar to this:

Let’s go ahead and add the remaining two tabs, as described below:

struct ContentView: View {
    var body: some View {
        TabView {
            HomeScreen()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            NotificationScreen()
                .tabItem {
                    Image(systemName: "bell.fill")
                    Text("Notification")
                }
            ProfileScreen()
                .tabItem {
                    Image(systemName: "person.fill")
                    Text("Profile")
                }
        }
    }
}

This creates three tabs with each of the views we have created. To see the three tabs in action, activate Live Preview on your Canvas by clicking on the button, as shown below:

What if I decide that I want to have the Home tab at the centre instead? I just have to switch the Home and Notification tabs in the TabView, as described below:

struct ContentView: View {
    var body: some View {
        TabView {
            NotificationScreen()
                .tabItem {
                    Image(systemName: "bell.fill")
                    Text("Notification")
                }
            HomeScreen()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            ProfileScreen()
                .tabItem {
                    Image(systemName: "person.fill")
                    Text("Profile")
                }
        }
    }
}

This rearranges the tabs as shown below:

Noticed the Home tab is no more selected? This is because the TabView automatically selects the first tab by default. But we can change that.

Specifying default tab selection

We can simply specify the default tab to be selected by adding just a few lines of code. Modify your ContentView.swift file as described below:

struct ContentView: View {
    @State private var selection = 2

    var body: some View {
        TabView(selection: $selection) {
            NotificationScreen()
                .tabItem {
                    Image(systemName: "bell.fill")
                    Text("Notification")
                }.tag(1)
            HomeScreen()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }.tag(2)
            ProfileScreen()
                .tabItem {
                    Image(systemName: "person.fill")
                    Text("Profile")
                }.tag(3)
        }
    }
}

Here, I added tag to the individual tab items. Also, we have a new variable, selection with a value of 2 and an @State attribute. The @State attribute is a property wrapper that tells SwiftUI to re-render the views when the value changes. (I will talk about the available property wrappers in SwiftUI and how they work in later articles). Also, I passed in the variable (binding) into the TabView for the selection property. This tells the TabView to use the tab with a tag of 2 as the selected tab by default.

If all goes well, you should have the Home tab now selected:

Voila! Just like I said, creating a TabView app in SwiftUI is simple and with just a few lines of code, you are good to go.

Watch out this space for more topics on SwiftUI and other related concepts. Have any questions? Feel free to reach out to me.

Gracias!