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

Overview

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(.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(.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(.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(.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.
Comments
  • Panning from left edge in navigation link destination does not navigate back

    Panning from left edge in navigation link destination does not navigate back

    When FancyScrollView is used in a view that is reached through a NavigationLink, it is not possible to pan from the left screen edge to navigate back.

    Minimal example:

    import SwiftUI
    import FancyScrollView
    
    struct ContentView: View {
        var body: some View {
            NavigationView {
                NavigationLink("Foo", destination: ChildView())
            }
        }
    }
    
    struct ChildView: View {
        var body: some View {
            FancyScrollView {
                Text("Bar")
            }
        }
    }
    

    Steps to reproduce:

    1. Open the app
    2. Tap on "Foo" to navigate to the ChildView
    3. Place finger on left side of screen and swipe right to navigate back

    Version information: FancyScrollView 0.1.2 iOS 13.6 (17G5045c)

    opened by palle-k 7
  • Fixes swipe to go back behavior

    Fixes swipe to go back behavior

    Swipe to go back is reintroduced while keeping the navigation bar hidden.

    Furthermore, this PR fixes a bug where animations were not working for the content of the scroll view.

    Note: I have not tested every combination of having a title or not, header or not, etc. I am not sure whether all behave correctly.

    opened by nerdsupremacist 2
  • Fixes swipe to go back behavior.

    Fixes swipe to go back behavior.

    Swipe to go back is reintroduced while keeping the navigation bar hidden.

    Furthermore, this PR fixes a bug where animations were not working for the content of the scroll view.

    Note: I have not tested every combination of having a title or not, header or not, etc. I am not sure whether all behave correctly.

    opened by palle-k 1
  • Makes back button easier to tap and more consistent with stock UINavigationBar

    Makes back button easier to tap and more consistent with stock UINavigationBar

    In some tests I had a hard time tapping the back button. To make this more easy, I've increased the button size and moved the padding inside the button.

    With the increased button size and bold SF Symbols font, the icon is now also more consistent with the stock UINavigationBar back button.

    opened by palle-k 1
  • fix title and lightMode issue

    fix title and lightMode issue

    Fixed a problem when title is too long, Top blur is now displayed correctly in light mode

    systemThinMaterial automatically checks colorScheme And apply a suitable blur

    minimumScaleFactor checks the view size and reduces the size of the text to fit the size.

    opened by NuPlay 0
  • Blur effect and animation

    Blur effect and animation

    Hi, great work, really!! Just two questions: I've been going through the code and wanted to ask how do you change the blur effect? I'm not talking about the ultraThinMaterial which is fine but I think the issue comes with the opacity, that makes the blur less effective. Also it seems like the blur effect appears with a delay (for example if you scroll very fast at the start). How can I change that? Thanks.

    opened by GianlucaAntolini 0
  • Swipe back to dismiss is broken (but there's a fix)

    Swipe back to dismiss is broken (but there's a fix)

    Hello. Thanks for making this handy library. I've noticed that on modern iOS versions the swipe back functionality is broken despite the fact that an old fix is in place. Luckily, I found a solution by implementing the following extension.

    extension UINavigationController {
        override open func viewDidLoad() {
            super.viewDidLoad()
            interactivePopGestureRecognizer?.delegate = nil
        }
    }
    

    That's it! View+hideNavigationBarWithoutLosingSwipeBack.swift and View+hideNavigationBarWithoutLosingSwipeBack.swift are no longer required using this method.

    If you wish I could open a pull request. Regardless I hope this may be useful to someone in the future.

    opened by jenspots 1
  • Possibility to add buttons to the navigation bar

    Possibility to add buttons to the navigation bar

    Is it somehow possible to add custom buttons to the navigation bar, like one would normally do with the .navigationBarItems() method? I really love this library but this seems like something that could be very useful.

    opened by CollinAlpert 1
  • View doesn't adapt properly on change of display mode

    View doesn't adapt properly on change of display mode

    If the display mode is changed the navigation view does not adapt properly.

    This is consistent changing between light and dark mode.

    When the mode changes the navigation reveals itself.

    IMG_0160 IMG_0159 IMG_0158

    I have forked the repository in the hope of providing a pull request.

    opened by devraj 0
  • Title style

    Title style

    Hello! Thanks for the great work! Just one tiny issue: Could you have the title property be a text view instead of a string? So we can use custom font style. Let me know

    opened by Mannydefreitas7 1
Releases(0.1.4)
Owner
Mathias Quintero
Developer, Student, Spaghetti Code Enthusiast and Professional Swear Word Sayer.
Mathias Quintero
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
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
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
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. We are a development agency building

Exyte 395 Dec 31, 2022
MacOS scrollview nsview scrollbar bug demo

macOS SwiftUI ScrollView Scrollbar Bug Demo If you create a ScrollView that contains an NSView that intersects the scroll view's scrollbars, the scrol

Matt Curtis 0 Nov 14, 2021
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
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
CrownControl is a tiny accessory that makes scrolling through scrollable content possible without lifting your thumb.

CrownControl Overview Features Example Project Requirements Installation Usage Quick Usage Crown Attributes Scroll Axis Anchor Position Spin Direction

Daniel Huri 96 Dec 27, 2022
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
GoAutoSlideView extends UIScrollView by featuring infinitely and automatically slide.

GoAutoSlideView GoAutoSlideView extends UIScrollView by featuring infinitely and automatically slide. #ScreenShot Installation ###CocoaPods pod 'GoAut

Jamie 57 Jan 12, 2021
↕️ 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
A data-driven UIScrollView + UIStackView framework for building fast and flexible lists

JKListKit A data-driven UIScrollView + UIStackView framework for building fast and flexible lists. Full Oficial documentation Main Features ?? Create

Juan Vasquez 2 Mar 15, 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
ScrollView that supports a parallax header image and static overlay.

ScrollViewReactiveHeader A replacement ScrollView that provides a header with subtle scroll animations. example-video.mov Using ScrollViewReactiveHead

null 49 Dec 29, 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
Swift-music - swift-music is a swift package that provides an easy-to-use API for music related developments.

?? swift-music Introduction swift-music is a swift package that provides an easy-to-use API for music related developments. Currently available module

Jin Zhang 4 Feb 8, 2022
Simple parallax header for UIScrollView

MXParallaxHeader ⚠️ This project is no longer maintained, see #124 ⚠️ MXParallaxHeader is a simple header class for UIScrollView. In addition, MXScrol

Maxime Epain 1.7k Dec 9, 2022
HPParallaxHeader is a simple parallax header class for UIScrollView.

HPParallaxHeader is a simple parallax header class for UIScrollView.

null 40 Dec 15, 2022
Parallax scrolling effect on UITableView header view when a tableView is scrolled

ParallaxTableViewHeader Parallax scrolling effect on UITableView header view when a tableView is scrolled Usage Create a ParallaxHeaderView using eith

Vinodh Swamy 1.3k Nov 27, 2022