How to Navigate Between Views in Swift UI.
Today we are going to cover an important process in developing applications with Swift UI, how to navigate between views. When developing applications using UIKit, developers typically utilized segues to navigate between views. In Swift UI, we use a different method of navigation called Navigation Links.
Getting Started with Navigation Links:
The first thing that you will need to do to use navigation links is to wrap your view in a navigation view. You can do so by using the syntax in the following example:
struct SomeView: View {
var body: some View {
NavigationView {
Text("Hello.")
}
}
}It is important to note that you only need to declare a navigation view on one view, after that has been completed, the rest of the following views associated with it will also be of type navigation view. If you end up declaring a navigation view on multiple views, you will end up with crazy nested navigation links that do not look good and make navigating through your app difficult.
After you have created a navigation view, you are then in the clear to begin using navigation links to navigate between views. You can create a navigation link very easily like in the example below:
struct SomeView: View {
var body: some View {
NavigationView {
VStack {
Text("Navigation Link below:")
NavigationLink(destination: SecondView()) {
Text("Navigate here.")
}
}
}
}
}struct SecondView: View {
var body: some View {
Text("Now on the second view.")
}
}
As you can see from the example above, the navigation link will act as a standard link. Once clicked, the application will then navigate to and display the view that was set as the destination.
One of the cool things that are wrapped into navigation links is that Swift UI automatically adds a back button on the secondary view and will know to navigate back to the previous view when selected. Navigation links make connecting views a breeze with Swift UI!
Customizing Navigation Views and Links:
What if you don’t want your navigation link to be the default blue? No need to worry as you can easily customize your navigation link the same way you would customize a Text object within Swift UI! Check out the example below to see how easy it is to customize your navigation links:
struct SomeView: View {
var body: some View {
NavigationView {
VStack {
Text("Navigation Link Below:")
NavigationLink(destination: SecondView()) {
Text("Navigate Here")
.foregroundColor(.black)
.font(.system(size:30))
.fontWeight(.bold)
}
}
}
}
}
Similar to styling the navigation links, you are also able to style the navigation view itself. A common use for styling the navigation view is adding a navigationBarTitle. You can see an example of this below:
struct SomeView: View {
var body: some View {
NavigationView {
VStack {
Text("Navigation Link Below:")
NavigationLink(destination: SecondView()) {
Text("Navigate Here")
.foregroundColor(.black)
.font(.system(size:30))
.fontWeight(.bold)
}
}.navigationBarTitle("Page One")
}
}
}
You are also able to set the navigation bar title to different display modes to customize this even further! To do so, you can use the reference the example below:
struct SomeView: View {
var body: some View {
NavigationView {
VStack {
Text("Navigation Link Below:")
NavigationLink(destination: SecondView()) {
Text("Navigate Here")
.foregroundColor(.black)
.font(.system(size:30))
.fontWeight(.bold)
}
}.navigationBarTitle("Page One", displayMode: .inline)
}
}
}
Conclusion:
As you can see from this article, navigation links and views are very easy to utilize within your app. You also have the ability to customize the look and feel of both the navigation view and the navigation links to fit the theme of your application. Hopefully this article has given you a great basic understanding of how to successfully navigate between different views within your Swift UI application! Be sure to follow my page if you enjoyed my article for future Swift UI discussions.
