Question 69000 in IOS Swift Question posted in
The official documentation can be found here.

Create a common layout for the navigation bar in SwiftUI, so other SwiftUI views should reuse same Nav Bar – Ios swift

In iOS SwiftUI, how can we make a common layout for the navigation bar, so we can use that in all projects without rewriting the same code?

Enter image description here

We can use ViewBuilder to create a 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 can we add navigation bar code in View Builder or base view?

Tags:

2

Answers


  1. 0

    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 an 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 the overlay.

    Login or Signup to reply.
  2. 0

    You can create an extension of view like this way. You can check out my blog entry 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()
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search