exyte/scalingheaderscrollview

ScalingHeaderTabView — a new component for tab-based layouts with a shared scaling header. Each tab page scrolls independently and preserves its scroll position while the header collapses and expands in sync across all tabs.

ScalingHeaderTabView

Use ScalingHeaderTabView when you need a scaling header with independently scrollable tab pages. Each tab preserves its own scroll position, and the header collapses and expands in sync across all tabs.

enum Tab: String, CaseIterable {
    case photos, videos
    var title: String { rawValue.capitalized }
}

struct ContentView: View {

    @State private var selectedTab: Tab = .photos

    var body: some View {
        ScalingHeaderTabView(
            selection: $selectedTab,
            minHeight: 100,
            maxHeight: 300
        ) { progress in
            ZStack(alignment: .bottom) {
                Image("header")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .opacity(1 - progress)
                tabBar
            }
        } pageContent: { tab in
            TabContentView(tab: tab)
        }
    }
}

Required parameters

selection - Binding to the currently selected tab header - @ViewBuilder for your header; receives progress — a CGFloat collapse value (0 = fully expanded, 1 = fully collapsed) pageContent - @ViewBuilder producing the scroll content for each tab

Available modifiers, optional

.collapseProgress(_ progress: Binding<CGFloat>)
.scrollOffset(_ offset: Binding<CGFloat>)
.scrollToTop(resetScroll: Binding<Bool>)
.allowsHeaderGrowth()
.hideScrollIndicators()
.headerIsClipped(_ isClipped: Bool)
.headerAlignment(_ alignment: Alignment)

Examples

To try the ScalingHeaderScrollView examples:

Clone the repo https://github.com/exyte/ScalingHeaderScrollView.git
Open ScalingHeaderScrollViewExample.xcodeproj in the Xcode
Try it!

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/ScalingHeaderScrollView.git")
]

Requirements

iOS 15+
Xcode 13+

Our other open source SwiftUI libraries

PopupView - Toasts and popups library AnchoredPopup - Anchored Popup grows "out" of a trigger view (similar to Hero animation) Grid - The most powerful Grid container AnimatedTabBar - A tabbar with a number of preset animations MediaPicker - Customizable media picker Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker CalendarView - Calendar view with fully customizable month/day cells OpenAI Wrapper lib for OpenAI REST API AnimatedGradient - Animated linear gradient ConcentricOnboarding - Animated onboarding flow FloatingButton - Floating button menu ActivityIndicatorView - A number of animated loading indicators ProgressIndicatorView - A number of animated progress indicators FlagAndCountryCode - Phone codes and flags for every country SVGView - SVG parser LiquidSwipe - Liquid navigation animation

Package Metadata

Repository: exyte/scalingheaderscrollview

Default branch: main

README: README.md