iOS Development

ios – Exercise Indicator in SwiftUI can not cowl navigation bar

Spread the love


I’ve 2 views, lets title it view A and think about B.
View B will probably be proven by pushed from view A.

In view B, I wish to present Exercise Indicator that cowl the entire display screen of the gadget.
However in my strategy, it seems that it solely cowl the view B content material. The navigation bar will not be coated with the Exercise Indicator.

I used view modifier to indicate Exercise Indicator.
Here is the code:

struct ActivityIndicator: UIViewRepresentable {
    @Binding var isAnimating: Bool
    let model: UIActivityIndicatorView.Type

    func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
        return UIActivityIndicatorView(model: model)
    }

    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
        isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
    }
}

struct ActivityIndicatorModifier: AnimatableModifier {
    var isLoading: Bool

    init(isLoading: Bool, coloration: Colour = .main, lineWidth: CGFloat = 3) {
        self.isLoading = isLoading
    }

    var animatableData: Bool {
        get { isLoading }
        set { isLoading = newValue }
    }

    func physique(content material: Content material) -> some View {
        ZStack {
            if isLoading {
                GeometryReader { geometry in
                    ZStack(alignment: .heart) {
                        content material
                            .disabled(self.isLoading)
                            .blur(radius: self.isLoading ? 3 : 0)

                        VStack {
                            ActivityIndicator(isAnimating: .fixed(true), model: .massive)
                        }
                        .body(width: geometry.measurement.width / 2,
                               peak: geometry.measurement.peak / 5)
                        .background(Colour.secondary.colorInvert())
                        .foregroundColor(Colour.main)
                        .cornerRadius(20)
                        .opacity(self.isLoading ? 1 : 0)
                        .place(x: geometry.body(in: .native).midX, y: geometry.body(in: .native).midY)
                    }
                }
            } else {
                content material
            }
        }
    }
}

And that is the code of view B:

    var physique: some View {
        VStack {
            ** View Content material **
        }
        .padding(.high)
        .toolbar(content material: {
            ToolbarItemGroup(placement: .navigationBarTrailing) {
                Button {

                } label: {
                    Textual content("Save")
                        .font(.daring(.physique)())
                }
                .padding(.trailing)
            }
        })
        .navigationTitle("View B")
        .background(Colour.themeColor)
        .modifier(ActivityIndicatorModifier(isLoading: loadingState))
    }

That is the consequence when Exercise Indicator is proven, the ‘Again’ button remains to be tappable:
ViewB

How you can present Exercise Indicator in right approach to cowl the entire display screen together with the navigation bar?

Thanks upfront.

Leave a Reply

Your email address will not be published. Required fields are marked *