Tab Views and Labels

Introduction

This article will teach you:

• What a Tab View is
• Why more complex applications benefit from Tab Views
• How to Create a Tab View
• What a Tab Item is
• What a Label is
• How to Create Tab Views Using Labels and TabItems
• How to Create a Tab View with the Page Style

Let’s begin by creating a project that will showcase the capabilities of Tab Views and Labels. Your final project will resemble the following video.

Creating the project

To begin, open up Xcode. You should get a window that resembles the image below.

In the center of the Xcode window, you will see Create a new Xcode project. Go ahead and click on this.

Next, you should see project templates. App should already be selected; if not, go ahead and click that. At the bottom right, click on Next. You will now insert some information regarding the application.

• Product Name: TabViewProject
• Team: None is acceptable here; If you have a team identifier, feel free to use it
• Organization Identifier: This is usually your reverse domain; for now, com.YourName is appropriate
• Bundle Identifier: It should be automatically filled provided your Organization Identifier + Product Name.
• Interface: Be sure to select SwiftUI
• Life Cycle: SwiftUI App
• Language: Swift
• Use Core Data is OFF
• Include Tests is OFF

Now select where you would like to save the project. Do not select Create Git repository on my mac. Git is a popular tool used for version control. If you do want to use Git for version control, select the option and learn more about Git here.

Once you select a location, click on Create. Your project should look similar to the image below.

Fantastic, you’re now ready to start building Tab Views and Labels in your project!

What is a tab view?

SwiftUI’s tab view allows for switching between multiple child views using user interface elements such as Button, Toggle, and ScrollView for example.

Here is a view that contains a Tab View with 2 views.

Why more complex applications benefit from tab views

Tab views allow more complex applications a degree of flexibility that they would not have otherwise. For example, in order to access any other page, such as a user profile, we’d need to go all the way back to the main menu. With the help of a tab view, users can quickly and easily navigate to a profile page by clicking on the icon at the bottom. The video here shows an example of that.

Tab views can also be used to display items in a page-style manner. In the video below, you can see a page-style tab view scrolling through the views.

As you can see, using tab views creates additional access points to parts of your application without having to use a centralized location such as a main menu.

How to create a tab view

According to the Apple docs, a TabView wraps views just like a VStack or NavigationView. A tab view is written as:

var body: some View {
    TabView {
        // Views go here
    }
}

Copy to clipboard
Copy to clipboard

Let’s use the same methodology to create a tab view in the project.

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            // Views go here
        }
    }
}

Copy to clipboard
Copy to clipboard

Great work! You created your first tab view. Your view should match the image here.

The view looks similar, but there is a difference. Did you spot it?

Answer

Correct! There is a gray box at the bottom of the screen. This is the new tab view you created!

Let’s add some buttons to the tab view to switch between child views. You can use a tabItem to display a button on the toolbar that navigates to a specified view on tap. Let’s take a look at tabItem.

What is a tabItem?

According to the Apple docs, SwiftUI’s tabItem configures views as a tab bar item. In this manner, the view will exist within the tab view and is accessible through the tab view bar.

Tab items are usually presented using a Label. Let’s take a look at Label.

What is a Label?

According to the Apple docs, SwiftUI’s Label represents a container for placing an icon and a label on the tab view. Labels are usually attached to a view. In tab views, Label is attached to a tab item. When the Label is tapped, the tab item will present the view it is attached to.

Create a tab view using tab items and labels

A tabItem and Label are written as so:

TabView {
    Text("Hello World")
    .tabItem { 
        Label("Label Text", systemImage: "list.dash")
    }
}

Copy to clipboard
Copy to clipboard

Let’s use the same methodology to create a tabItem in the project. Inside the tabItem, place a Label("Home", systemImage: "house"). Let the tabItem be a modifier for a Text("Home View").

import SwiftUI

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

Copy to clipboard
Copy to clipboard

Fantastic! You added a tabItem to your tab view. The tab item contains a Label that displays on your tab bar. Your preview should match the one here.

As noted previously, tab views come in handy when trying to access views quickly. Let’s create a “Profile” page and place it in the tab view.

Much like Text("Home View"), place a Text("Profile View") for the profile view. Add a tabItem modifier and include a Label("Profile", systemImage: "person.circle.fill").

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Home View")
            .tabItem {
                Label("Home", systemImage: "house")
            }
            Text("Profile View")
            .tabItem {
                Label("Profile", systemImage: "person.circle.fill")
            }
        }
    }
}

Copy to clipboard
Copy to clipboard

Fantastic! You added 2 views to your application and can navigate to them through the tab view using the tab items. Each tab item contains a Label to display which view the application will navigate to.

Your preview should match the one here.

But, what if you wanted an application to display views similar to that of an e-book? Listing out 100+ pages on a tab bar is unrealistic. Stylizing the tab view with a PageTabViewStyle instance should do the trick!

How to create a tab view with the page style

Stylizing the tab view with a PageTabViewStyle will remove the tab bar view and display each view as individual pages. These pages can be accessed by scrolling through the views with a swipe gesture.

The following code snippet declares a page-style tab view.

TabView {
    // Views go here
}
.tabViewStyle(PageTabViewStyle())

Copy to clipboard
Copy to clipboard

Let’s use the same methodology to create a page-style tab view in the project. After the TabView, add a .tabViewStyle that contains a PageTabViewStyle instance.

struct ContentView: View {
    var body: some View {
        TabView {
            // Initial View + Profile View
        }
        .tabViewStyle(PageTabViewStyle())
    }
}

Copy to clipboard
Copy to clipboard

Fantastic! You modified the tab view to use the style of the PageTabViewStyle. This removed the bottom tab bar and now you can swipe through the views using a swipe gesture. Your preview should match the one below.

Conclusion & review

Great work! In this article, you’ve covered tab views and labels. You created a miniature project that simulates an application that displays an initial page with access to a profile page via a tab view.

Here’s a recap:

• A tab view allows for switching between multiple child views using user interface elements

• Tab views allow more complex applications a degree of flexibility to access views otherwise not directly accessible at any time

• A TabView is created using the following code snippet:

  • TabView {
      // Views go here
    }
    
    Copy to clipboard
    Copy to clipboard
    

• A tabItem configures views as a tab bar item

• A Label represents a container for placing an icon and a label

• A tabItem and Label are created using the following code snippet:

  • TabView {
        NavigationView {
            Text("Some View")
        }
        .tabItem {
            Label("View Name", systemImage: "house")
        }
    }
    
    Copy to clipboard
    Copy to clipboard
    

• A tab view can be stylized using a PageTabViewStyle using the following code snippet:

  • TabView {
        // Views go here
    }
    .tabViewStyle(PageTabViewStyle())
    
    Copy to clipboard
    Copy to clipboard