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.
1 2 3 4 5 6 7 8 9 10 |
import SwiftUI struct HeaderView: View { var body: some View { ZStack { Color.red } } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import SwiftUI struct HeaderView: View { var body: some View { ZStack { Color.red HStack { Text("Hello world") // left button // center label // right button } } } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import SwiftUI struct HeaderView: View { var body: some View { ZStack { Color.red HStack { // Left button Button(action: { print("Menu Button Tapped") }) { Image("menu-512") .resizable() .scaledToFit() .frame(width: 20, height: 20) .foregroundColor(Color.white) } } } } } |
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().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import SwiftUI struct HeaderView: View { var body: some View { ZStack { Color.red HStack { Button(action: { print("Menu Button Tapped") }) { Image("menu-512") // image name .resizable() .scaledToFit() .frame(width: 20, height: 20) .foregroundColor(Color.white) } Spacer() Text("My Tasks").foregroundColor(Color.white) .font(Font.caption).bold() Spacer() Button(action: { print("Search Button Tapped") }) { Image("search-13-512") // image name .resizable() .scaledToFit() .frame(width: 20, height: 20) .foregroundColor(Color.white) } }.padding() } } } |
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
1 2 3 4 5 6 7 8 9 10 11 |
import SwiftUI struct ContentView: View { var body: some View { VStack { HeaderView().frame(width: UIScreen.main.bounds.width, height: 60) Spacer() } } } |
We have integrated HeaderView in ContentView. If you have any queries/questions/compliments related to the article, please mention them in the comment section.