• Stars
    star
    1,096
  • Rank 42,298 (Top 0.9 %)
  • Language
    Swift
  • License
    MIT License
  • Created about 3 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Β Β Β Β Β 

Scaling Header Scroll View

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

Read Article Β»

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

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 to set up callback for ScrollView reaching the bottom

.scrollViewDidReachBottom(perform: @escaping () -> Void)

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

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

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

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

allows content scroll reset, need to change Binding to true

.scrollToTop(resetScroll: Binding<Bool>)

allows to change current header height, need to change state, possible values are .collapsed, .expanded or .custom(CFGloat)

.snapHeaderToState(state: Binding<SnapHeaderState?>, animated: 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/disable (disabled by default) header snap. Available modes:

  • .disabled - Disable header snap.
  • .immediately - Once you lift your finger header snaps either to min or max height automatically.
  • .afterFinishAccelerating - At the end of scroll view deceleration the header snaps either to min or max height automatically.
.setHeaderSnapMode(.immediately)

Set custom positions for header snap (explained previous point). Specify any amount of values in 0...1 to set snapping points, 0 - fully collapsed header, 1 - fully expanded

.headerSnappingPositions(snapPositions: [CGFloat])

Set custom initial position to which scroll view will be automatically snapped to. Specify a value in 0...1, 0 - fully collapsed header, 1 - fully expanded

.initialSnapPosition(initialSnapPosition: CGFloat)

hide scroll indicators (false by default)

.hideScrollIndicators()

Examples

To try ScalingHeaderScrollView examples:

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

Installation

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

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

pod 'ScalingHeaderScrollView'

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

github "Exyte/ScalingHeaderScrollView"

Requirements

  • iOS 14+
  • Xcode 12+

Our other open source SwiftUI libraries

PopupView - Toasts and popups library
Grid - The most powerful Grid container
AnimatedTabBar - A tabbar with 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
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation

More Repositories

1

Macaw

Powerful and easy-to-use vector graphics Swift library with SVG support
Swift
6,005
star
2

PopupView

Toasts and popups library written with SwiftUI
Swift
3,315
star
3

Grid

The most powerful Grid container missed in SwiftUI
Swift
1,738
star
4

ARTetris

Augmented Reality Tetris made with ARKit and SceneKit
Swift
1,532
star
5

ActivityIndicatorView

A number of preset loading indicators created with SwiftUI
Swift
1,391
star
6

ConcentricOnboarding

SwiftUI library for a walkthrough or onboarding flow with tap actions
Swift
1,350
star
7

FloatingButton

Easily customizable floating button menu created with SwiftUI
Swift
1,098
star
8

Chat

A SwiftUI Chat UI framework with fully customizable message cells and a built-in media picker
Swift
833
star
9

ReadabilityKit

Preview extractor for news, articles and full-texts in Swift
Swift
830
star
10

fan-menu

Menu with a circular layout based on Macaw
Swift
728
star
11

SVGView

SVG parser and renderer written in SwiftUI
Swift
614
star
12

LiquidSwipe

Example of using SwiftUI to create a beautiful Liquid Swipe control
Swift
523
star
13

AnimatedTabBar

A tabbar with a number of preset animations written in pure SwiftUI
Swift
374
star
14

Macaw-Examples

Various usages of the Macaw library
Swift
353
star
15

AndroidAnimatedNavigationBar

AnimatedNavigationBar is a navigation bar with a number of preset animations written in Jetpack Compose
Kotlin
320
star
16

MediaPicker

Customizable media picker written with SwiftUI
Swift
316
star
17

replicating

Kotlin
247
star
18

ProgressIndicatorView

An iOS progress indicator view library written in SwiftUI
Swift
247
star
19

ComposeMultiplatformDribbbleAudio

A repo for the Dribbble Replicating Compose Multiplatform article
Kotlin
78
star
20

android-waves-progressbar

A depth gauge progress bar, inspired by Apple Watch dive widget.
Kotlin
46
star
21

clean-swift-article

Swift
37
star
22

FlagAndCountryCode

A country code and flag icon provider library for iOS apps
Swift
37
star
23

AnimatedGradient

Swift
35
star
24

sweet.eclipse

Sweet Eclipse
HTML
33
star
25

OpenAI

Swift
32
star
26

gaster

Ethereum transactions stats for your smart contracts
JavaScript
29
star
27

ShapedBackgroundAndroid

Repo for the instagram-like shaped background on Android
Kotlin
25
star
28

android-replicating

Replicating complex UI using Jetpack Compose
Kotlin
23
star
29

wwdc2020-tutorials

Swift
21
star
30

core-haptics-example

Swift
15
star
31

homebrew-formulae

Ruby
1
star