How to create a custom Navigation View in SwiftUI?

While using storyboard you may come across different custom UI requirements, Creating a custom Navigation View is one of them. But in the storyboard we are used to integrating it by creating generic XIB’s or we can create it on the storyboard through UIView(). But in SwiftUI there will be some cases to implement custom Navigation View. we will look at how we can create a custom view in SwiftUI.

This is How our custom Navigation View will look like.

Create Project with name with ‘CustomNavigationView’.

Create New SwiftUI file.

Select file type as SwiftUI.

Name file name as HeaderView.

We will start design HeaderView as generic View. lets start editing HeaderView.swift file.

Create a ZStack container to keep multiple components up to each other. if you are not familiar with SwiftUI view containers, visit this article.

Canvas preview of HeaderView will look like this.

Now add HStack (Horizontal stack view) to place other components horizontally. we will place a left button, center label, and right button in HStack.

Now we will add the left side Button, with the Button view action parameter, action parameter contains what action should be taken after tapping on the button. this is how code will be.

Now this header view will look like this.

Same like the left button add center heading label and Left button in header view. Each component is separated by Spacer().

and this is how Header view will look like on canvas preview.

Now we did with the design part of header view, now we have to integrate HeaderView in ContentView. Because ContentView is the root view. We will have height 60 for HeaderView

We have integrated HeaderView in ContentView. If you have any queries/questions/compliments related to the article, please mention them in the comment section.

Leave a Comment