ScrollView that supports a parallax header image and static overlay.

Last update: Dec 29, 2022

Related tags

UI scrollview-reactive-header

Overview

ScrollViewReactiveHeader

A replacement ScrollView that provides a header with subtle scroll animations.

example-video.mov

Using ScrollViewReactiveHeader is easy:

ScrollViewReactiveHeader(header: {

    MyHeaderBackground()
        .frame(height: 300)
}, headerOverlay: {

    MyHeaderContent()
        .frame(height: 300)
}, body: {

    // Note: This view will be placed inside a ScrollView
    MyScrollingContentView()
}, configuration: .init(showStatusBar: true, backgroundColor: .white))

Future Todos

Make headerOverlay interactive. At the moment, taps will be blocked by the overlaid ScrollView
Add optional callback that reports internally-calculated scroll offset.
Remove dependency on GeometryReader for calculating status bar height. (at the moment, setting .edgesIgnoringSafeArea(.top) will interfere with this package's ability to calculate the height of the status bar. )

You might also like...

Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView.

StepProgressView Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView. Usage let progr

340 Dec 16, 2022

High performance and lightweight UIView, UIImage, UIImageView, UIlabel, UIButton, Promise and more.

SwiftyUI High performance and lightweight UIView, UIImage, UIImageView, UIlabel, UIButton and more. Features SwiftyView GPU rendering Image and Color

336 Nov 26, 2022

UIPheonix is a super easy, flexible, dynamic and highly scalable UI framework + concept for building reusable component/control-driven apps for macOS, iOS and tvOS

29 Sep 9, 2022

BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen

BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen. It is especially well

5.3k Jan 2, 2023

Custom segue for OSX Storyboards with slide and cross fade effects (NSViewControllerTransitionOptions)

CustomSegue Custom segue for OSX Storyboards. Slide and cross fade effects, new customized window. class MyViewController: NSViewController { overr

123 May 21, 2022

Fashion is your helper to share and reuse UI styles in a Swifty way.

Fashion is your helper to share and reuse UI styles in a Swifty way. The main goal is not to style your native apps in CSS, but use a set

124 Nov 20, 2022

Beautiful flag icons for usage in apps and on the web.

FlagKit Beautiful flag icons for usage in apps and on the web. All flags are provided as stand-alone PNG and SVG files. FlagKit also provides an Asset

2.9k Dec 29, 2022

UIView and CGRect extension that adds properties to manipulate them efficiently

Geometry Geometry is a UIView and CGRect extension that lets you work with view and rect geometry easier. It adds the following properties to UIView:

92 Sep 7, 2022

An UITextView in Swift. Support auto growing, placeholder and length limit.

GrowingTextView Requirements iOS 8.0 or above Installation CocoaPods GrowingTextView is available through CocoaPods. To install it, simply add the fol

941 Jan 5, 2023

Comments

Strange behaviour on device

All working and perfect on the simulator but strange behaviour on the device (iPhone XR， iOS 15.2)

https://user-images.githubusercontent.com/2090084/150470861-eb343c15-5bc7-48bc-a650-789429ea8dbb.mp4

opened by skywalkerlw 0
Unable to use url-image as header background
I use the url-image library in one of the apps I'm building to load images from a server into a SwiftUI Image view. I've tried to migrate the view to use the ScrollViewReactiveHeader and put the URLImage into the header part of it - without any success. The view always displays with 0 height, therefore making the ScrollViewReactiveHeader invisible. See below for a snippet that shows how I'm trying to use both libraries together:

var body: some View { NavigationView { ScrollViewReactiveHeader(header: { URLImage(url) { image in image .resizable() .aspectRatio(contentMode: .fill) .scaledToFill() .clipped() .frame(height: 300) } }, headerOverlay: { [...] }, body: { [...] }, configuration: .init(showStatusBar: true, backgroundColor: nil)) } }

I've also tried wrapping the URLImage in a VStack with a fixed height but that didn't help either. I'd be happy if you could provide any hints on what to do or where the problem might be :)
opened by Cacauu 2

Releases(1.0.1)

1.0.1(Nov 10, 2021)

Sets backgroundColor of ScrollViewConfiguration to nil by default. Thanks to Flo for this commit!
Source code(tar.gz)
Source code(zip)
1.0.0(Sep 7, 2021)

Source code(tar.gz)
Source code(zip)

Owner

GitHub

Non-intrusive iOS UI library to implement overlay based interfaces

OverlayContainer is a UI library written in Swift. It makes easier to develop overlay based interfaces, such as the one presented in the Apple Maps, S

1k Jan 4, 2023

Apple TV Parallax effect in Swift.

MPParallaxView Apple TV Parallax effect in Swift. Rotate view using touch or accelerometer. Usage To run the example project, clone the repo, and run

1.7k Jan 4, 2023

A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView and iPhone X safe area support for content reloading. Built for iOS 10 and later.

Arale A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView support for reloading your content. Built f

43 Feb 4, 2022

MZFormSheetPresentationController provides an alternative to the native iOS UIModalPresentationFormSheet, adding support for iPhone and additional opportunities to setup UIPresentationController size and feel form sheet.

MZFormSheetPresentationController MZFormSheetPresentationController provides an alternative to the native iOS UIModalPresentationFormSheet, adding sup

979 Nov 17, 2022

ScrollView that supports a parallax header image and static overlay.

Related tags

Overview

ScrollViewReactiveHeader

Future Todos

You might also like...

Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView.

High performance and lightweight UIView, UIImage, UIImageView, UIlabel, UIButton, Promise and more.

UIPheonix is a super easy, flexible, dynamic and highly scalable UI framework + concept for building reusable component/control-driven apps for macOS, iOS and tvOS

BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen

Custom segue for OSX Storyboards with slide and cross fade effects (NSViewControllerTransitionOptions)

Fashion is your helper to share and reuse UI styles in a Swifty way.

Beautiful flag icons for usage in apps and on the web.

UIView and CGRect extension that adds properties to manipulate them efficiently

An UITextView in Swift. Support auto growing, placeholder and length limit.

Comments

Strange behaviour on device

Unable to use url-image as header background

Releases(1.0.1)

1.0.1(Nov 10, 2021)

1.0.0(Sep 7, 2021)

Owner

Non-intrusive iOS UI library to implement overlay based interfaces

Apple TV Parallax effect in Swift.

A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView and iPhone X safe area support for content reloading. Built for iOS 10 and later.

You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.

A SwiftUI ScrollView that only scrolls if the content doesn't fit in the View

UISegmentedControl remake that supports selecting multiple segments, vertical stacking, combining text and images.

A minimalistic looking banner library for iOS. It supports multiple customizable kinds of Banner types

Fetch the star wars api from all the planets and list and show details using Swift UI and Combine

🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0

MZFormSheetPresentationController provides an alternative to the native iOS UIModalPresentationFormSheet, adding support for iPhone and additional opportunities to setup UIPresentationController size and feel form sheet.