Fancy SwiftUI ScrollView

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

In the world of making app screens, the SwiftUI ScrollView is like a helpful tool , granting you a scrollable area in your app. Here, users can explore content that doesn’t perfectly fit the screen. To view everything, they can freely scroll up, down, left, right, or in any direction.

The SwiftUI ScrollView is a versatile view used to present a scrollable area within an app interface. Customers can scroll in all directions vertically, horizontally, or both to view content that may not fit completely on the screen.

This tool is pretty flexible. You can put different things in it, like text, pictures, other stuff, and even more scrollable spaces inside. additionally have the option to change how it scrolls like up, down, left or right and Moreover you can adjust how much space there is around the content and tweak the little markers that show you where you are in the scroll.

In the SwiftUI world, the ScrollView is a key player. It helps you handle and show a lot of information or stuff, making it really important for creating screens that aren’t just boring but move and change.

Fancy ScrollView

The App Store and Apple Music are examples of Stock Apple Apps, and I’ve spent a lot of time trying to figure out how to replicate their UI inside of SwiftUI using ScrollViews.

Result can be found here! My name for it is FancyScrollView. There are a few additional benefits to this ScrollView:

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 {
		...
	}
}

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 Behaviour:

You can specify one of two behaviours:

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

Scrolling Down Behaviour:

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) }) {
	...
}

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) }) {
	...
}

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) }) {
	...
}

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.

Github – SwiftUI ScrollView

Github