Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nerdsupremacist/FancyScrollView
A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)
https://github.com/nerdsupremacist/FancyScrollView
app-store apple-music parallax scrollview swiftui
Last synced: 2 months ago
JSON representation
A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)
- Host: GitHub
- URL: https://github.com/nerdsupremacist/FancyScrollView
- Owner: nerdsupremacist
- License: mit
- Created: 2019-12-25T14:41:07.000Z (about 5 years ago)
- Default Branch: develop
- Last Pushed: 2021-10-29T15:08:20.000Z (about 3 years ago)
- Last Synced: 2024-10-12T13:33:06.721Z (3 months ago)
- Topics: app-store, apple-music, parallax, scrollview, swiftui
- Language: Swift
- Homepage:
- Size: 63 MB
- Stars: 971
- Watchers: 11
- Forks: 55
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-swiftui-libraries - FancyScrollView - A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header) (Scroll / Content)
README
# 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!
```swift
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:
```swift
public enum ScrollUpHeaderBehavior {
case parallax // Will zoom out all pretty ;)
case sticky // Will stay at the top
}
```
### Scrolling Down Behavior:
```swift
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!
```swift
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.
```swift
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.
```swift
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!
```swift
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.