Navigation: Understand how to use NavigationView, NavigationLink, and TabView to navigate between different screens in your app.

SwiftUI’s navigation components like NavigationView, NavigationLink, and TabView enable you to build complex navigational structures with ease. Let's dive into each component and see how they are used to navigate between different screens in your app.

NavigationView

NavigationView is a container view that enables navigation between views by pushing and popping views on a navigation stack. It's typically used to create hierarchical navigation interfaces, similar to the UINavigationController in UIKit.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Home Screen")
                .navigationTitle("Home")
        }
    }
}

NavigationLink

NavigationLink is used within a NavigationView to push a new view onto the navigation stack, allowing users to navigate to a new screen. The destination is the view that you want to navigate to, and the label is what the user interacts with, like a button or a list item.

NavigationView {
    List {
        NavigationLink(destination: DetailView()) {
            Text("Go to Detail View")
        }
    }
    .navigationTitle("Items")
}

DetailView Example

Here’s a simple DetailView you might navigate to:

struct DetailView: View {
    var body: some View {
        Text("This is the Detail View")
            .navigationTitle("Detail")
    }
}

TabView

TabView is used to create a tabbed interface, allowing users to switch between different views by tapping on tabs usually displayed at the bottom of the screen. Each tab is represented by a TabView item, and you can associate an icon and a text label with each tab.

TabView {
    ContentView()
        .tabItem {
            Label("Home", systemImage: "house")
        }

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

Combining NavigationView and TabView

It’s common to combine NavigationView and TabView to create a tabbed app where each tab has its own navigation stack. Here’s a basic structure:

TabView {
    NavigationView {
        ContentView()
    }
    .tabItem {
        Label("Home", systemImage: "house")
    }

    NavigationView {
        Text("Profile Screen")
            .navigationTitle("Profile")
    }
    .tabItem {
        Label("Profile", systemImage: "person")
    }
}

Practical Example: A Basic Navigation App

Let’s create a basic app with two tabs: “Home” and “Profile”, where “Home” has a button to navigate to a detail view.

// Main App Entry
@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            AppTabView()
        }
    }
}

// TabView
struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationView {
                HomeView()
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }

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

// HomeView with NavigationLink
struct HomeView: View {
    var body: some View {
        VStack {
            NavigationLink(destination: DetailView()) {
                Text("Go to Detail View")
            }
            .navigationTitle("Home")
        }
    }
}

// DetailView
struct DetailView: View {
    var body: some View {
        Text("Detail View Content")
            .navigationTitle("Detail")
    }
}

Conclusion

NavigationView and NavigationLink allow for hierarchical navigation, while TabView is excellent for organizing different app sections at the same root level. Combining these elements thoughtfully can lead to intuitive and easy-to-navigate apps. Experiment with these components to understand their behavior and how they might fit best within your app's navigation structure.

Other Articles:

Creating a Main Menu in SwiftUI