A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.

Overview


Scaling Header Scroll View

A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.


We are a development agency building phenomenal apps.


Twitter Version Carthage Compatible License Platform

Usage

  1. Put your header and content bodies code into a ScalingHeaderScrollView constructor.
  2. Set the necessary modifiers, see below.
struct ContentView: View {

    var body: some View {
       ScalingHeaderScrollView {
            ZStack {
                Rectangle()
                    .fill(.gray.opacity(0.15))
                Image("header")
            }
        } content: {
            Text("↓ Pull to refresh ↓")
                .multilineTextAlignment(.center)
                .padding()
        }
    }
}

Required parameters

header - @ViewBuilder for your header
content - @ViewBuilder for your content

Available modifiers, optional

passes current collapse progress value into progress binding: 0 for not collapsed at all, 1 - for fully collapsed

.collapseProgress(_ progress: Binding<CGFloat>)

allows set up callback and isLoading state for pull-to-refresh action

.pullToRefresh(isLoading: Binding<Bool>, perform: @escaping () -> Void)

allows content scroll reset, need to change Binding to true

.scrollToTop(resetScroll: Binding<Bool>)

changes min and max heights of Header, default min = 150.0 and max = 350.0

.height(min: CGFloat = 150.0, max: CGFloat = 350.0)

when scrolling up - switch between actual header collapse and simply moving it up (by default moving up)

.allowsHeaderCollapse()

when scrolling down - enable (disabled by default) header scale

.allowsHeaderGrowth()

enable (disabled by default) header snap (once you lift your finger header snaps either to min or max height automatically)

.allowsHeaderSnap()

Examples

To try ScalingHeaderScrollView examples:

  • Clone the repo https://github.com/exyte/ScalingHeaderScrollView.git
  • Open terminal and run cd /Example/
  • Run pod install to install all dependencies
  • Run open Example.xcworkspace/ to open project in the Xcode
  • Try it!

Installation

CocoaPods

To install ScalingHeaderScrollView, simply add the following line to your Podfile:

pod 'ScalingHeaderScrollView'

Carthage

To integrate ScalingHeaderScrollView into your Xcode project using Carthage, specify it in your Cartfile

github "Exyte/ScalingHeaderScrollView"

Swift Package Manager

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

Requirements

  • iOS 14+
  • Xcode 12+
Comments
  • Love this project. Is there a way to have a gradient background / transparent feel? will attach images.

    Love this project. Is there a way to have a gradient background / transparent feel? will attach images.

    Great project. Thank you.

    Is there a way to have one gradient background and hide the contents as you scroll up?

    The third image is obviously the issue. :)

    Thank you,

    Wael

    opened by waelsaad 7
  • When used, I get a message in the console onChange(of: CGRect) action tried to update multiple times per frame.

    When used, I get a message in the console onChange(of: CGRect) action tried to update multiple times per frame.

    This simple code

    https://gist.github.com/Foreman76/a07531c1e76c8880a9780fcb87d8ebf7

    if not use animation or NavigationLink everything is good

    what am I doing wrong. Any ideas

    opened by Foreman76 3
  • Different iOS Deployment target between Cocoapods & SPM

    Different iOS Deployment target between Cocoapods & SPM

    Is there a reason why the pod's minimum deployment target is set to iOS 14 while swift package's set to iOS 15? We use spm and target iOS 14 but are forced to use cocoapods.

    opened by puzzlemoondev 2
  • I can't install using XCode Package or CocoPods

    I can't install using XCode Package or CocoPods

    Says no compatible version found, there is no ver 1.0.0 in xcode package manager, and cocopods throw this error even without specifying a version: CocoaPods could not find compatible versions for pod "ScalingHeaderScrollView": In Podfile: ScalingHeaderScrollView

    opened by h-elbeheiry 2
  • Add ability to hide scroll indicators

    Add ability to hide scroll indicators

    Thanks for this awesome packet! I added the ability to hide the scroll indicator. To not break existing code, I made it a view modifier .hiddeIndicators().

    opened by DannyCamenisch 2
  • Do we really need introspect in this project.

    Do we really need introspect in this project.

    I was exploring the source for the project and I see you guys are using Introspect, and wondering if it is really needed and same thing cannot be done without it?

    opened by TakasurAtWork 1
  • Issues when presented as .pageSheet

    Issues when presented as .pageSheet

    Hi all,

    Neat library, thanks for building it. I found some issues with the implementation. If you have a UIKit based app and want to present one of the examples inside of a nav with a modelPresentationStyle of .pageSheet with code like this:

     @objc func presentOnboarding() {
            let onboardingViewController = UIHostingController(rootView: OnboardingView())
            let nav = UINavigationController(rootViewController: onboardingViewController)
            nav.modalPresentationStyle = .pageSheet
    
            if let sheet = nav.sheetPresentationController {
                sheet.detents = [.medium(), .large()]
            }
            present(nav, animated: true, completion: nil)
        }
    

    You get this result (this is based off your ColorScalingHeader example). Simulator Screen Recording - iPhone 13 - 2022-06-08 at 10 19 46

    Let me know if I can help further.

    opened by adamdahan 1
  • ProfileScreen example infer  minHeight and maxHeight

    ProfileScreen example infer minHeight and maxHeight

    Is it possible to infer the min and max height for the header without specifying it? I am trying to have a UIViewRepresentable as a large and small header but their height cannot be calculated for some reason and they are dynamic in nature.

    opened by takasurazeem 0
  • I have a show stopper from using this :( please kindly help, project attached. Not working correctly with TabView

    I have a show stopper from using this :( please kindly help, project attached. Not working correctly with TabView

    Hi, I've been looking forward to using this in a project for sometime until I faced an issue when embedding a nice TabView component.

    The problem: The TabView contains 3 views. Each view has a different number of rows so obvoiusly different content height for each view. The Tabview is not displaying the full content because it needs each view to be wrapped with a ScrollView of its own which will clash with the Card scrollView upon scrolling :(.

    I thought as an alternative, I would try to calculate the height dynamically of each view to set the height of the TabView whenever the user switches the index but I am unable to get it right. and also if I do that it messes with the slide transition.

    I am not sure what the best solution is I hope there is a way or somehow when we scroll the scrollview of each view to also scroll the card ! I am out of attempts at this stage. hoping someone could help with a solution.

    I've attached the sample project just navigate to the Banking Screen you'll see the code there and a few extra things. ScalingHeaderScrollView.zip

    Simulator Screen Shot - iPhone 14 Pro Max - 2022-10-12 at 11 15 13

    opened by waelsaad 8
Owner
Exyte
Exyte
HPParallaxHeader is a simple parallax header class for UIScrollView.

HPParallaxHeader is a simple parallax header class for UIScrollView.

null 40 Dec 15, 2022
This is a control that helps you dramatically ease your infinite scroll processing.

InfiniteScrollControl Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installat

Minseok Kang 0 Nov 15, 2021
App store style horizontal scroll view

ASHorizontalScrollView App store style horizontal scroll view It acts similar to apps sliding behaviours in App store. There are both Objective-C (do

Terence Chen 663 Nov 26, 2022
A non gesture blocking, non clipping by default custom scroll view implementation with example code

A non gesture blocking, non clipping by default custom scroll view implementation with example code

Marco Boerner 10 Dec 6, 2022
OpenSwiftUIViews - A non gesture blocking, non clipping by default custom scroll view implementation with example code.

OpenSwiftUIViews - A non gesture blocking, non clipping by default custom scroll view implementation with example code.

Marco Boerner 11 Jan 4, 2023
SwiftUI ScrollView with custom pull to refresh & scroll to load-more implementations

PaginatedScrollView SwiftUI ScrollView with custom "pull to refresh" & "scroll to load-more" implementations. example usage PaginatedScrollView {

Aung Ko Min 7 Sep 20, 2022
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.

kishikawakatsumi/SpreadsheetView has moved! It is being actively maintained at bannzai/SpreadsheetView. This fork was created when the project was mov

Kishikawa Katsumi 34 Sep 26, 2022
UIScrollView ∞ scroll category

UIScrollView+InfiniteScroll Infinite scroll implementation as a category for UIScrollView. * The content used in demo app is publicly available and pr

Andrej Mihajlov 1k Dec 29, 2022
ScrollingFollowView is a simple view which follows UIScrollView scrolling.

ScrollingFollowView ScrollingFollowView is a simple view which follows UIScrollView scrolling. ScrollingFollowView Sample Images SearchBarSample : Sea

Tanaka Kenji 186 Dec 21, 2022
AutoKeyboardScrollView is an UIScrollView subclass which makes showing and dismissing keyboard for UITextFields much easier. So called keyboard avoidance.

AutoKeyboardScrollView AutoKeyboardScrollView is a smart UIScrollView which can: Scroll to proper position and make sure the active textField is visib

HongHao Zhang 120 Jul 31, 2022
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.

PullToDismiss PullToDismiss provides dismiss modal viewcontroller function like Facebook Messenger by pulling scrollview or navigationbar with smooth

Suguru Kishimoto 479 Dec 5, 2022
iOS custom view to display books on shelf

ShelfView (iOS) iOS custom view to display books on shelf (Android version is available here) Requirements iOS 10.0+ Swift 4.2 Installation ShelfView

Adeyinka Adediji 268 Dec 10, 2022
↕️ VegaScroll is a lightweight animation flowlayout for UICollectionView completely written in Swift 4, compatible with iOS 11 and Xcode 9.

Made by Applikey Solutions Find this project on Dribbble Also check another flowlayout for UICollectionView: https://github.com/ApplikeySolutions/Grav

Applikey Solutions 2.8k Jan 7, 2023
SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader

SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader, follow the livestream tutorial by MengTo.

Terry Kuo 4 Jun 10, 2022
SwiftUI OpenScrollView

A non gesture blocking, non clipping by default custom scroll view implementation with example code.

Marco Boerner 10 Dec 6, 2022
Simultaneously scrolling ScrollViews with SwiftUI support

SimultaneouslyScrollView Simultaneously scrolling ScrollViews with SwiftUI support Installation Swift Package Manager Usage SwiftUI support Example In

David Steinacher 8 Aug 19, 2022
Add snapping behaviour to a SwiftUI ScrollView

SwiftUI Snapping ScrollView Add snapping behaviour to a SwiftUI ScrollView. SnappingScrollView A scrollable view that supports snapping. Usage Snappin

Ciaran O'Brien 21 Dec 27, 2022
UICollectionView replacement of UITableView. Do even more like Parallax Header, Sticky Section Header. Made for iOS 7.

CSStickyHeaderFlowLayout Contributors For anyone who'd like to be a contributor to the repository, please read the Contribution Guideline Parallax, St

null 5.1k Jan 6, 2023
Pull-to-refresh animation in UICollectionView with a sticky header flow layout, written in Swift :large_orange_diamond:

ReplaceAnimation Implementation of Zee Young's Dribbble animation (https://dribbble.com/shots/2067564-Replace) Info I really liked Zee Young's animati

Alex Türk 957 Sep 13, 2022
A light-weight UITextView subclass that automatically grows and shrinks.

RSKGrowingTextView A light-weight UITextView subclass that automatically grows and shrinks based on the size of user input and can be constrained by m

Ruslan Skorb 939 Dec 21, 2022