How can I achieve a collapsing header with tab layout in SwiftUI

43 Views Asked by At

I want to create something similar as in the gif attached is shown but then in SwiftUI (and also not buggy scrolling this is due to the gif). My screen contains a horizontal paging scrollview with inside of that multiple vertical scrollViews in which my content is placed.

already offset is working with a custom scrollview and my initial thought was to check scrolling direction with dragGesture. (but this will not work if you drag up and down it won't detect the gesture.

enter image description here

struct ScrollingHeaderView: View {

@State var progress: CGFloat = .zero
@State var offset: CGPoint = .zero
@State var previousOffset: CGPoint = .zero

@GestureState private var dragGestureActive: Bool = false

var body: some View {
    ZStack {
        Color.black
        ScrollView(.horizontal) {
            LazyHStack(spacing: .zero) {
                // ForEach looping through an array of contents
                OffsetObservingScrollView(axes: .vertical, offset: $offset) {
                    // My scrolling content
                }
                .onChange(
                    of: self.offset,
                    perform: { value in

                        let scrollY = value.y

                        let distance = scrollY - previousOffset.y
                        self.previousOffset = value

                        let progress = distance / 30
                        let scrollProgress = min(max(progress, 0), 1)
                        self.progress = scrollProgress
                    }
                )
                .simultaneousGesture(
                    DragGesture(coordinateSpace: .global)
                        .updating($dragGestureActive) {
                            value, state, transaction in
                            state = true
                        }
                        .onChanged { value in
                            let direction = 0 < value.translation.height ? .down : .up
                        }

                )
            }
        }
        .scrollTargetBehavior(.paging)
        .scrollIndicators(.hidden)
    }
}
}

Any help is appreciated thank you!

0

There are 0 best solutions below