Add a headerStretch parameter to the scroll view with sticky header

danielsaidi · danielsaidi · commit 096c4a99b5bb · 2025-04-09T16:36:35.000+02:00
diff --git a/README.md b/README.md
@@ -60,9 +60,11 @@ struct MyView: View {
     var body: some View {
         ScrollViewWithStickyHeader(
             header: stickyHeader,   // A header view
-            headerHeight: 250,      // Its resting height
-            headerMinHeight: 150,   // Its minimum height
-            onScroll: handleScroll  // An optional scroll action
+            headerHeight: 250,      // The resting header height
+            headerMinHeight: 150,   // The minimum header height
+            headerStretch: false,   // Disables the stretch effect
+            contentCornerRadius: 20 // An optional corner radius mask
+            onScroll: handleScroll  // An optional scroll handler action
         ) {
             // Add your scroll content here, e.g. a `LazyVStack`
         }
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -12,6 +12,7 @@ This version moves examples into a new namespace and renames some View extension
 
 ### ✨ New Features
 
+* The `ScrollViewWithStickyHeader` has a new `headerStretch` parameter.
 * The `ScrollViewWithStickyHeader` has a new `contentCornerRadius` parameter.
 * The new `scrollViewContentWithHeaderOverlap(...)` view extension can apply a header overlap to a scroll view content view.
 * The new `scrollViewContentWithRoundedHeaderOverlap(...)` view extension can apply a rounded header overlap to a scroll view content view. 
diff --git a/Sources/ScrollKit/Examples/Examples+SpotifyAlbumScreen.swift b/Sources/ScrollKit/Examples/Examples+SpotifyAlbumScreen.swift
@@ -40,6 +40,7 @@ public extension Examples.Spotify {
                 header: scrollViewHeader,
                 headerHeight: Examples.Spotify.AlbumScreen.Header.height,
                 headerMinHeight: 50,
+                headerStretch: false,
                 contentCornerRadius: scrollContentCornerRadius,
                 onScroll: handleScrollOffset
             ) {
@@ -136,7 +137,7 @@ private struct Preview: View {
 #if os(iOS)
 #Preview("Sheet") {
     
-    struct Preview: View {
+    struct SheetPreview: View {
         
         @State var isPresented = false
         
@@ -153,7 +154,7 @@ private struct Preview: View {
         }
     }
     
-    return Preview()
+    return SheetPreview()
 }
 #endif
 
diff --git a/Sources/ScrollKit/Examples/Examples+SpotifyAlbumScreenHeader.swift b/Sources/ScrollKit/Examples/Examples+SpotifyAlbumScreenHeader.swift
@@ -37,6 +37,7 @@ public extension Examples.Spotify.AlbumScreen {
                 cover
                     .padding(.bottom, bottomPadding)
             }
+            .clipped()
         }
     }
 }
diff --git a/Sources/ScrollKit/Extensions/View+RoundedScollContent.swift b/Sources/ScrollKit/Extensions/View+RoundedScollContent.swift
@@ -6,7 +6,6 @@
 //  Copyright © 2025 Daniel Saidi. All rights reserved.
 //
 
-#if os(iOS) || os(visionOS)
 import SwiftUI
 
 public extension View {
@@ -27,7 +26,7 @@ public extension View {
     }
 }
 
-@available(iOS 16.0, *)
+@available(iOS 16.0, macOS 13.0, tvOS 16.0, watchOS 9.0, *)
 public extension View {
     
     /// Make a scroll view's content view overlap the scroll
@@ -49,9 +48,6 @@ public extension View {
             .frame(maxHeight: .infinity)
             .scrollViewContentWithHeaderOverlap(overlap)
     }
-}
-
-public extension View {
         
     /// Make a scroll view header view apply rounded corners
     /// that cut out a mask for the scroll view content view.
@@ -62,34 +58,29 @@ public extension View {
     func scrollViewHeaderWithRoundedContentMask(
         _ points: Double = 0
     ) -> some View {
-        if #available(iOS 16.0, *) {
-            if points > 0 {
-                self.mask {
-                    VStack(spacing: 0) {
-                        /// Make the black color overflow waaaay up.
-                        Color.black.scaleEffect(100, anchor: .bottom)
-                        ZStack {
-                            Color.white
-                            UnevenRoundedRectangle(
-                                topLeadingRadius: 20,
-                                topTrailingRadius: 20
-                            )
-                            .fill(.black)
-                        }
-                        .compositingGroup()
-                        .luminanceToAlpha()
-                        .frame(height: 20)
+        if points > 0 {
+            self.mask {
+                VStack(spacing: 0) {
+                    /// Make the black color overflow waaaay up.
+                    Color.black.scaleEffect(100, anchor: .bottom)
+                    ZStack {
+                        Color.white
+                        UnevenRoundedRectangle(
+                            topLeadingRadius: 20,
+                            topTrailingRadius: 20
+                        )
+                        .fill(.black)
                     }
+                    .compositingGroup()
+                    .luminanceToAlpha()
+                    .frame(height: 20)
                 }
-            } else {
-                self
             }
         } else {
             self
         }
     }
 }
-#endif
 
 #Preview {
     
diff --git a/Sources/ScrollKit/ScrollKit.docc/Articles/Getting-Started-Article.md b/Sources/ScrollKit/ScrollKit.docc/Articles/Getting-Started-Article.md
@@ -80,9 +80,11 @@ struct MyView: View {
     var body: some View {
         ScrollViewWithStickyHeader(
             header: stickyHeader,   // A header view
-            headerHeight: 250,      // Its resting height
-            headerMinHeight: 150,   // Its minimum height
-            onScroll: handleScroll  // An optional scroll action
+            headerHeight: 250,      // The resting header height
+            headerMinHeight: 150,   // The minimum header height
+            headerStretch: false,   // Disables the stretch effect
+            contentCornerRadius: 20 // An optional corner radius mask
+            onScroll: handleScroll  // An optional scroll handler action
         ) {
             // Add your scroll content here, e.g. a `LazyVStack`
         }
diff --git a/Sources/ScrollKit/ScrollViewWithStickyHeader.swift b/Sources/ScrollKit/ScrollViewWithStickyHeader.swift
@@ -17,11 +17,16 @@ import SwiftUI
 /// a ``ScrollViewHeader`` to make your header view properly
 /// stretch out when the scroll view is pulled down.
 ///
-/// You can apply a `headerHeight` which will be the initial
-/// resting height of your sticky header, a `headerMinHeight`
-/// as its minimum height (below the safe area inset), and a
+/// You can apply a `headerHeight` which will be the resting
+/// height of the header, a `headerMinHeight` as the minimum
+/// header height (below the top safe area), and an optional
 /// `contentCornerRadius` which applies a corner radius mask
-/// under which the content will scroll.
+/// under which the scroll view content will scroll. You can
+/// also set the `headerStretch` parameter to `false` if you
+/// prefer to disable the header stretch effect. This can be
+/// nice when the view is rendered in a sheet, where pulling
+/// down should dismiss the sheet rather than stretching the
+/// sticky header.
 ///
 /// You can use the `onScroll` init parameter to pass in any
 /// function that should be called whenever the view scrolls.
@@ -47,6 +52,7 @@ public struct ScrollViewWithStickyHeader<Header: View, Content: View>: View {
     ///   - header: The scroll view header builder.
     ///   - headerHeight: The height to apply to the scroll view header.
     ///   - headerMinHeight: The minimum height to apply to the scroll view header, by default the `headerHeight`.
+    ///   - headerStretch: Whether to stretch out the header when pulling down, by default `true`.
     ///   - contentCornerRadius: The corner radius to apply to the scroll content.
     ///   - showsIndicators: Whether or not to show scroll indicators, by default `true`.
     ///   - onScroll: An action that will be called whenever the scroll offset changes, by default `nil`.
@@ -56,7 +62,8 @@ public struct ScrollViewWithStickyHeader<Header: View, Content: View>: View {
         @ViewBuilder header: @escaping () -> Header,
         headerHeight: Double,
         headerMinHeight: Double? = nil,
-        contentCornerRadius: CGFloat? = nil,
+        headerStretch: Bool = true,
+        contentCornerRadius: CGFloat = 0,
         showsIndicators: Bool = true,
         onScroll: ScrollAction? = nil,
         @ViewBuilder content: @escaping () -> Content
@@ -66,6 +73,7 @@ public struct ScrollViewWithStickyHeader<Header: View, Content: View>: View {
         self.header = header
         self.headerHeight = headerHeight
         self.headerMinHeight = headerMinHeight ?? headerHeight
+        self.headerStretch = headerStretch
         self.contentCornerRadius = contentCornerRadius
         self.onScroll = onScroll
         self.content = content
@@ -76,7 +84,8 @@ public struct ScrollViewWithStickyHeader<Header: View, Content: View>: View {
     private let header: () -> Header
     private let headerHeight: Double
     private let headerMinHeight: Double
-    private let contentCornerRadius: CGFloat?
+    private let headerStretch: Bool
+    private let contentCornerRadius: CGFloat
     private let onScroll: ScrollAction?
     private let content: () -> Content
 
@@ -86,7 +95,10 @@ public struct ScrollViewWithStickyHeader<Header: View, Content: View>: View {
     private var scrollOffset: CGPoint = .zero
 
     private var visibleHeaderRatio: CGFloat {
-        (headerHeight + scrollOffset.y) / headerHeight
+        let value = (headerHeight + scrollOffset.y) / headerHeight
+        if headerStretch { return value }
+        print(value)
+        return min(1, value)
     }
 
     public var body: some View {
@@ -117,25 +129,15 @@ private extension ScrollViewWithStickyHeader {
         in geo: GeometryProxy
     ) -> Bool {
         let minHeight = headerMinHeight(in: geo)
-        let safe = geo.safeAreaInsets.top
-        
-        print("---")
-        print("True height: \(self.headerHeight)")
-        print("True min: \(self.headerMinHeight)")
-        print("Calculated min: \(minHeight)")
-        print("Safe area: \(safe)")
-        print("Offset: \(scrollOffset.y)")
-        
-        return (scrollOffset.y + 5) < -minHeight
+        return scrollOffset.y < -minHeight
     }
 
-    @ViewBuilder
     func navbarOverlay(
         in geo: GeometryProxy
     ) -> some View {
         let minHeight = headerMinHeight(in: geo)
         let ratioHeight = headerHeight * visibleHeaderRatio
-        Color.clear.overlay(alignment: .bottom) {
+        return Color.clear.overlay(alignment: .bottom) {
             scrollHeader
         }
         .frame(height: max(minHeight, ratioHeight))
@@ -161,11 +163,19 @@ private extension ScrollViewWithStickyHeader {
     
     @ViewBuilder
     var scrollHeader: some View {
-        let radius = contentCornerRadius ?? 0
+        if #available(iOS 16.0, *) {
+            scrollHeaderView
+                .scrollViewHeaderWithRoundedContentMask(contentCornerRadius)
+        } else {
+            scrollHeaderView
+        }
+    }
+    
+    @ViewBuilder
+    var scrollHeaderView: some View {
         ScrollViewHeader(content: header)
             .frame(minHeight: headerHeight)
             .edgesIgnoringSafeArea(.all)
-            .scrollViewHeaderWithRoundedContentMask(radius)
     }
 
     func handleScrollOffset(_ offset: CGPoint) {
@@ -217,7 +227,8 @@ private struct Preview: View {
             .vertical,
             header: header,
             headerHeight: 250,
-            headerMinHeight: 50,
+            headerMinHeight: 100,
+            headerStretch: false,
             contentCornerRadius: contentCornerRadius,
             showsIndicators: false,
             onScroll: { offset, visibleHeaderRatio in

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@ public extension Examples.Spotify {`
`40`	`40`	`header: scrollViewHeader,`
`41`	`41`	`headerHeight: Examples.Spotify.AlbumScreen.Header.height,`
`42`	`42`	`headerMinHeight: 50,`
	`43`	`+ headerStretch: false,`
`43`	`44`	`contentCornerRadius: scrollContentCornerRadius,`
`44`	`45`	`onScroll: handleScrollOffset`
`45`	`46`	`) {`
`@@ -136,7 +137,7 @@ private struct Preview: View {`
`136`	`137`	`#if os(iOS)`
`137`	`138`	`#Preview("Sheet") {`
`138`	`139`
`139`		`- struct Preview: View {`
	`140`	`+ struct SheetPreview: View {`
`140`	`141`
`141`	`142`	`@State var isPresented = false`
`142`	`143`
`@@ -153,7 +154,7 @@ private struct Preview: View {`
`153`	`154`	`}`
`154`	`155`	`}`
`155`	`156`
`156`		`- return Preview()`
	`157`	`+ return SheetPreview()`
`157`	`158`	`}`
`158`	`159`	`#endif`
`159`	`160`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ public extension Examples.Spotify.AlbumScreen {`
`37`	`37`	`cover`
`38`	`38`	`.padding(.bottom, bottomPadding)`
`39`	`39`	`}`
	`40`	`+ .clipped()`
`40`	`41`	`}`
`41`	`42`	`}`
`42`	`43`	`}`