• Stars
    star
    931
  • Rank 47,543 (Top 1.0 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 2 years ago

Reviews

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

Repository Details

A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)

FancyScrollView

I spent a lot of time looking for a way to recreate the UI of the ScrollViews in Stock Apple Apps (i.e. App Store and Apple Music) inside of SwiftUI.

And here is the result! I call it FancyScrollView. It's a ScrollView with a few extra perks:

Fancy Blur when scrolling

Use a FancyScrollView instead of a normal ScrollView and it will add a nice blur in the safe area. Making your View look much cleaner while scrolling!

FancyScrollView {
	VStack {
		...
	}
}

Result:

Including a Header

I was really surprised by the fact I couldn't find a proper Package for adding a nice Parallax header to a ScrollView. So I included it here! And you can customize everything about it:

Scrolling Up Behavior:

You can specify one of two behaviors:

public enum ScrollUpHeaderBehavior {
    case parallax // Will zoom out all pretty ;)
    case sticky // Will stay at the top
}

Scrolling Down Behavior:

public enum ScrollDownHeaderBehavior {
    case offset // Will move the header with the content
    case sticky // Will stay at the top and the content will cover the header
}

Let's see them in action!

Here's every combination between scrolling behaviors

Parallax + Offset (Default):

This is the default and appears to be the most neutral and standard version of the ScrollView Header in the Market. Chances are, you want this one!

FancyScrollView(title: "The Weeknd",
                headerHeight: 350,
                scrollUpHeaderBehavior: .parallax,
                scrollDownHeaderBehavior: .offset,
                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {
	...
}

Result:

Parallax + Sticky:

This combination is designed to imitate the header from the Artist Detail View in Apple Music.

FancyScrollView(title: "The Weeknd",
                headerHeight: 350,
                scrollUpHeaderBehavior: .parallax,
                scrollDownHeaderBehavior: .sticky,
                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {
	...
}

Result:

Sticky + Offset:

This combination is designed to imitate the header from the "Today" showcases in the App Store.

FancyScrollView(title: "The Weeknd",
                headerHeight: 350,
                scrollUpHeaderBehavior: .sticky,
                scrollDownHeaderBehavior: .offset,
                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {
	...
}

Result:

Sticky + Sticky:

I'm not sure who's looking for this behavior, but it looks cool. So, you do you!

FancyScrollView(title: "The Weeknd",
                headerHeight: 350,
                scrollUpHeaderBehavior: .sticky,
                scrollDownHeaderBehavior: .sticky,
                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {
	...
}

Result:

Known Issues

  • The pop back navigation bar gesture is broken in these.
    • Sorry, but I couldn't find a proper way to get access to the Gesture Recognizer without the ScrollView being the first screen in a NavigationView
  • The back button always appears when you have a header (Only use it for details or modals)
    • I didn't find a way to know whether there's a screen to go back to
  • On light mode with a header the Status Bar doesn't look great. Didn't find a way to change it to white.

More Repositories

1

Snap

A customizable Snapping Drawer à la Apple Maps.

 100% in SwiftUI.
Swift
705
star
2

Graphaello

A Tool for Writing Declarative, Type-Safe and Data-Driven Applications in SwiftUI using GraphQL
Swift
494
star
3

Sync

Real-time Apps the SwiftUI way
Swift
155
star
4

Syntax

Write value-driven parsers quickly in Swift with an intuitive SwiftUI-like DSL
Swift
146
star
5

GraphZahl

A Framework to implement Declarative, Type-Safe GraphQL Server APIs using Runtime Magic 🎩
Swift
143
star
6

CovidUI

A simple App to Track the status of Covid-19 around the World. Using SwiftUI and GraphQL
Swift
78
star
7

memes

An online Multi-Player Meme Party Game written in Swift
Swift
68
star
8

Valid

Input Validation Done Right. A Swift DSL for Validating User Input using Allow/Deny Rules
Swift
37
star
9

CovidQL

GraphQL API for querying data related to Covid-19
Swift
31
star
10

StopTouchingYourFace

SwiftUI App that alerts you when you have touched your face
Swift
25
star
11

tmdb

A GraphQL Wrapper for The Movie Database
Swift
24
star
12

Sweeft

Swift but a bit Sweeter - More Syntactic Sugar for Swift #MakeSwiftGreatAgain
Swift
21
star
13

Fuzzi

Locally searching in Swift made simple (and fuzzily)
Swift
19
star
14

AssociatedTypeRequirementsKit

A Swift µFramework for dealing with the classic "Self or associated type requirements" errors
Swift
18
star
15

git-yolo

YOLO Mode for GIT
JavaScript
16
star
16

VariadicViewBuilder

Custom View Builder that allows you to build custom layouts
Swift
15
star
17

trumpify

Make your words be the BEST WORDS - Instant text trumpifier
JavaScript
14
star
18

VideoPlayer

µFramework containing a SwiftUI Video Player allowing for custom controls
Swift
13
star
19

Protected

Experimental API for Reads and Writes protected via Phantom types
Swift
11
star
20

LlamaLang

Repository for the Llama Programming Language. Work In Progress
Python
11
star
21

graphzahl-todo-app-example

Example Todo App Showcasing how to use GraphZahl with Vapor and Fluent
Swift
7
star
22

SyncExampleApp

Example App on how to use Sync to keep objects in sync
Swift
7
star
23

SyncTokamak

Swift
6
star
24

syntax-highlight-publish-plugin

Plugin to add syntax highlighting (for multiple languages) to your Publish Site, with the least amount of effort.
Swift
6
star
25

graphzahl-vapor-support

A set of extensions that allow to use GraphZahl with Vapor
Swift
6
star
26

GridView

A SwiftUI View that allows you to Render items in a Grid
Swift
5
star
27

tmdb-relay-test

Test Project showcasing Relay + Typescript + GitHub Actions + Chakra
TypeScript
5
star
28

Mealy

Swift Framework for Model-Based Testing using Mealy Machines
Swift
5
star
29

stalky-app

Always remember people's names
Swift
5
star
30

CodableEnum

µFramework that allows you to make an Enum with associated values conform to Codable
Swift
5
star
31

SyncWebSocketVapor

Web Socket Server Support for Sync
Swift
4
star
32

Pushie

Push Down Automata Creation in Swift. The easy way.
Swift
4
star
33

git-fuck

NPM Module for when you've committed to the wrong branch
JavaScript
4
star
34

Assert

Swift UI Like DSL for Building Tests
Swift
4
star
35

MarkdownSyntax

Markdown Parser using Syntax
Swift
4
star
36

graphaello-music-example

Example App using Graphaello
Swift
4
star
37

graphzahl-fluent-support

A set of extensions that allow to use Fluent APIs with GraphZahl
Swift
4
star
38

fresh-mac-setup

How to set up a fresh Mac the way I like it
Ruby
3
star
39

SyntaxTree

Model for building Syntax Trees
Swift
3
star
40

graphql-syntax

GraphQL Parser written in Syntax
Swift
3
star
41

graphaello-countries-example

Example App using Graphaello
Swift
3
star
42

GraphDSL

Script that given a GraphQL Server will create a Kotlin DSL for writing queries
Kotlin
2
star
43

swift-shortcuts

An iOS 14 Shortcuts creator written in Swift, inspired by SwiftUI.
Swift
2
star
44

graphzahl-vs-graphiti

Comparison of the same schema implemented with GraphZahl and with Graphiti as a comparison
Swift
1
star
45

SyncWebSocketWebAssemblyClient

Swift
1
star
46

ContextKit

A Public Basic API for providing a Compositable Type Safe Dict
Swift
1
star
47

SyncWebSocketClient

Web Socket Client support for Sync
Swift
1
star
48

kotlin-worldbank-type-provider

Type Provider for the WorldBank API inside of Kotlin Scripting
Kotlin
1
star
49

syntax-highlight

Syntax Highlighting Extensions to the Syntax Framework
Swift
1
star
50

kotlin-type-provider-template

Template for building Type Providers for Kotlin Scripting
Kotlin
1
star
51

TextMate

Support for parsing Text Mate Languages
Swift
1
star
52

StarWarsArray

A Swift Sequence indexed like Star Wars Movies
Swift
1
star
53

isAdnanGonnaBeLate

A simple Web Page with the Status of whether or not Adnan Will be Late
HTML
1
star