TabView for tab navigation in iOS Swift

Introduction

TabView helps you switch between different screens by tapping tabs at the bottom. It makes your app easy to use and organized.

You want to let users switch between main sections like Home, Search, and Profile.

Your app has a few distinct pages that should be quickly accessible.

You want a simple way to show different content without leaving the main screen.

You want to use icons and labels to help users understand each tab.

Syntax

iOS Swift

TabView {
    View1()
        .tabItem {
            Label("Home", systemImage: "house")
        }
    View2()
        .tabItem {
            Label("Settings", systemImage: "gear")
        }
}

Each tab is created by adding a view inside TabView and attaching a .tabItem modifier.

The Label inside .tabItem shows the tab's icon and text.

Examples

Simple TabView with two tabs showing text views.

iOS Swift

TabView {
    Text("Home Screen")
        .tabItem {
            Label("Home", systemImage: "house")
        }
    Text("Profile Screen")
        .tabItem {
            Label("Profile", systemImage: "person")
        }
}

Tabs showing colored backgrounds as content.

iOS Swift

TabView {
    Color.red
        .tabItem {
            Label("Red", systemImage: "circle.fill")
        }
    Color.blue
        .tabItem {
            Label("Blue", systemImage: "circle.fill")
        }
}

Sample App

This app shows a TabView with three tabs: Home, Settings, and Profile. Each tab shows simple text. The tabs have icons and labels.

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Welcome to Home")
                .tabItem {
                    Label("Home", systemImage: "house")
                }
            Text("Your Settings")
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
            Text("Profile Info")
                .tabItem {
                    Label("Profile", systemImage: "person.circle")
                }
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Important Notes

Use clear icons and labels so users understand each tab.

TabView automatically handles switching content when tabs are tapped.

You can customize the tab bar appearance with modifiers if needed.

Summary

TabView creates a tab bar for easy navigation between views.

Each tab needs a view and a tabItem with label and icon.

Use TabView when your app has multiple main sections.