NavigationView and UIBarButtonItems in SwiftUI

Introduction

Pre-requisite for SwiftUI development :-

1. Xcode 11
2. MacOS Catalina 10.15.2

Getting Started

In this tutorial You’re learn the following:

1. Create a Navigation View
2. Create Left Bar Button
3. Create Right Bar Button
4. Create Both Left Bar Button and Right Bar Button
5. Create Multiple Bar Button

Application Entry Point

Creating a New Project for Playing with SwiftUI. First, fire up Xcode and create a new Project. I created a project named DemoNavigationView.

Once you save the project, Xcode should load the ContentView.swift file and display a design/preview canvas.

By default, Xcode generates some SwiftUI code for ContentView.swift. However, the preview canvas doesn’t render the app preview. You have to click the Resume button in order to see the preview.

Create NavigationView

A view for presenting a stack of views representing a visible path in a navigation hierarchy.

// Default to large title style
NavigationView {
Text("Hello World")
.navigationBarTitle(Text("Navigation Title")) 
}

For old style title
NavigationView {
Text("Hello World")
.navigationBarTitle(Text("Navigation Title"), displayMode: .inline)
}

Create Left Bar Button

You can add UIBarButtonItem with property .navigationBarItems(leading

.navigationBarItems(leading: Button(action: {
// Actions
}, label: { Text("Left") })

Create Right Bar Button

You can add UIBarButtonItem with property .navigationBarItems(trailing

.navigationBarItems(trailing: Button(action: {
// Actions
}, label: { Text("Right") })

Create Both Left Bar Button and Right Bar Button

You can add both UIBarButtonItem like this:

.navigationBarItems(leading: Button(action: {
// Actions
}, label: { Text("Left") }),
trailing: Button(action: {
// Actions}, label: { Text("Right") }))

Create Multiple Bar Button

You can add multiple UIBarButtonItem like this:

.navigationBarItems(leading: Button(action: {
// Actions
}, label: { Text("Left") }),
trailing: HStack {Button("About") {
// Actions
}Button("Help") {
// Actions
}})

Conclusion

I hope you enjoyed reading this. In this tutorial, we got an introduction about the Navigation View and UIBarButtonItems control of SwiftUI.

Please find the Github link.
Github:- https://github.com/imrishuj/SU-NavigationView

Thanks for reading and good luck with your next SwiftUI Tutorial!