Create common layout for Navigation Bar in SwiftUI So other SwiftUI views should reuse same Nav Bar

Question

In iOS SwiftUI, How we can make a common layout for Navigation Bar. So we can use that in all project without re-write the same code.

We can use ViewBuilder to create base view for common code as follows:

struct BaseView<Content: View>: View {
let content: Content
init(@ViewBuilder content: () -> Content) {
    self.content = content()
}
var body: some View {
    // To-do: The most important part will go here
  }
}

How we can add Navigation bar Code in View Builder or Base view?

Did you try to define the navigation bar in a different struct view and use it as an overlay in different views? — arata, Jan 25 '22 at 17:08
No, i haven't tried that approach. I had tried to add Navigation bar in Base view, but this approach is not working. — GrayFox, Jan 25 '22 at 17:23

score 1 · Answer 1 · answered Jan 25 '22 at 17:17

1

One way to achieve this is to use a custom view as an overlay.

For example consider the below code which makes a custom navigation bar using overlay:

struct Home: View {
    var body: some View {
        ScrollView {
            // Your Content
        }
        .overlay {
            ZStack {
                Color.clear
                    .background(.ultraThinMaterial)
                    .blur(radius: 10)

                Text("Navigation Bar")
                    .font(.largeTitle.weight(.bold))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.leading, 20)
            }
            .frame(height: 70)
            .frame(maxHeight: .infinity, alignment: .top)
        }
    }
}

The ZStack inside the .overlay will make a view that looks like a navigation bar. You can then move it to its own struct view, add different variables to it and call it from overlay.

answered Jan 25 '22 at 17:17

arata

750
1
7
19

Thanks @arata for response, Can we write some wrapper on Navigation view So we can take benefit of default Nav Bar functionality in some classes if required. – GrayFox Jan 25 '22 at 17:21
@GrayFox So, you want to modify the default navigation bar rather than making a new one from scratch? (This one is also a similar questions in a way) https://stackoverflow.com/questions/57686218/creating-baseview-class-in-swiftui – arata Jan 25 '22 at 17:23
Yes @arata, it would be better if we use existing Navigation bar rather than to create a new one. – GrayFox Jan 25 '22 at 17:27
Yes @arata, In that question[https://stackoverflow.com/questions/57686218/creating-baseview-class-in-swiftui] View Modifier is used to create a base view, But i wanna to reuse Navigation bar is same manner if possible. – GrayFox Jan 25 '22 at 17:30
1

@GrayFox interesting, never thought of it in that way. Maybe someone could answer your question. – arata Jan 25 '22 at 17:41

Atiar Talukdar · Answer 2 · 2022-04-22T03:36:09.613

You can create an extension of view like this way. You can checkout this article for details

import SwiftUI
extension View {
/// CommonAppBar
public func appBar(title: String, backButtonAction: @escaping() -> Void) -> some View {
    
    self
        .navigationTitle(title)
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: Button(action: {
            backButtonAction()
        }) {
            Image("ic-back") // set backbutton image here
                .renderingMode(.template)
                .foregroundColor(Colors.AppColors.GrayscaleGray2)
        })
    }
}

now You can use this appBar in any place of the view

struct TransactionsView: View {
@Environment(\.presentationMode) var mode: Binding<PresentationMode>

var body: some View {
    VStack(spacing: 0) {
        
    }
    .appBar(title: "Atiar Talukdar") {
        self.mode.wrappedValue.dismiss()
    }
}
}

struct TransactionsView_Previews: PreviewProvider {
    static var previews: some View {
        TransactionsView()
    }
}

Create common layout for Navigation Bar in SwiftUI So other SwiftUI views should reuse same Nav Bar

2 Answers2