NavigationView in SwiftUI

Navigation involves moving between different screens or views within an app. SwiftUI provides a navigation view hierarchy that allows users to navigate between different views seamlessly. The NavigationView is the container view that manages the navigation stack and provides a NavigationBar at the top to facilitate navigation.

NavigationView

NavigationView serves as the navigation container, hosting a hierarchy of views. At the top of the screen, it presents a navigation bar, which typically includes a back button for easy navigation to the previous view. You can also customize the appearance and behavior of the navigation bar to match your app’s style.

We will understand how to implement NavigationView and it various modifier. For same let us take an example of code and walk through it step by step.

Implement NavigationView

struct NavigationInSwiftUI: View {
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
               
                    NavigationLink("Navigaton Link", destination: navigationPage)
                    Text("Home View")           
                
            }
            .navigationTitle(" Navigation Title")
            .navigationBarTitleDisplayMode(.automatic)
            .navigationBarHidden(false)
            .navigationBarItems(leading: EditButton(), trailing: Image(systemName: "person.fill"))
        }
        
    }
}

var navigationPage: some View {
    
    ZStack {
        Color.purple.edgesIgnoringSafeArea(.all)
        Text("Hello World")
    }
    .navigationTitle(" Navigated Page")
}

Wrap your starting view (usually HomeView) with a NavigationView to set up the navigation hierarchy

struct NavigationInSwiftUI: View {
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                    Text("Home View")                 
            }
        }
        
    }
}

Create NavigationLink

Within the HomeView, create a NavigationLink to navigate to the DetailView. Here, in NavigationLink("Navigaton Link", destination: navigationPage) Navigation Link is title displayed and destination i.e. navigationPage is the view to which user will navigate on taping Navigation Link

struct NavigationInSwiftUI: View {
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                    NavigationLink("Navigaton Link", destination: navigationPage)
                    Text("Home View")                 
            }
        }  
    }
}

var navigationPage: some View {
    
    ZStack {
        Color.purple.edgesIgnoringSafeArea(.all)
        Text("Second Page")
    }
}

NavigationBar

Navigation View give navigation Bar as one of its characterstic, where title, left right navigation button can be configured.

struct NavigationInSwiftUI: View {
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                    NavigationLink("Navigaton Link", destination: navigationPage)
                    Text("Home View")                 
            }
        }
            .navigationTitle(" Navigation Title")
            .navigationBarTitleDisplayMode(.automatic)
            .navigationBarHidden(false)
            .navigationBarItems(leading: EditButton(), trailing: Image(systemName: "person.fill"))  
    }
}

navigationTitle

navigationTitle will give title to view. 3 display modes for the navigation can be used via navigationBarTitleDisplayMode. These 3 modes are .automatic, .inline and .large.

navigationBar

navigationBarHidden can be used with true as a parameter to hide the navigationBar. This is used when multiple navigation screen is used under same navigation View and navigation bar need to be hidden for some of them.

Also, left and right buttons can be used and given as view like Image(systemName: "person.fill") using navigationBarItems.

Conclusion

NavigationView is a powerful tool that simplifies navigation and enhances the user experience. Now we learned how to create a smooth and intuitive navigation flow. With SwiftUI’s NavigationView, we can create engaging and user-friendly apps, guiding users through your content effortlessly. So, dive into your SwiftUI projects and start navigating with style using NavigationView!

Tags: SwiftUI