Controlling a SwiftUI Scroll View can be quite a journey. While SwiftUI provides us with ScrollViewReader.scrollTo(_:anchor:) for adjusting scroll positions based on view IDs, there are times when we need to get a bit more hands-on. This involves tracking and storing position coordinates ourselves to ensure precise control when needed. Trust me, it’s not always a walk in the park, even with SwiftUI 5 and Xcode 15, not to mention older versions.
Alright, let’s dive into this tutorial where I’ll show you how I managed to take charge of the position in a Scroll View using the latest SwiftUI tools and APIs. Now, you might be wondering, why go through all this trouble? Well, picture this: there are times when you need to trigger network calls once the user scrolls to a different spot than where the content originally started. And that means triggering a refresh for the entire view, not just one subview inside the scroll view. And trust me, doing that can definitely shake up the scroll position once the reload is completed.
Step one: we’ve gotta find a way to keep track of where that scroll’s at. It’s like bookmarking a good book—you want to pick up right where you left off.
Let’s add a new extension to View so that we can use it as a view modifier:
public extension View {
/// A function on a SwiftUI View that can be called to get the current scroll position in a given coordinate space name
func onScrollPositionChanged(in coordinateSpaceName: AnyHashable, perform: @escaping (CGPoint) -> Void) -> some View {
background(
GeometryReader { geometry in
Color.clear
.preference(key: PositionPreferenceKey.self, value: geometry.frame(in: .named(coordinateSpaceName)).origin)
}
)
.onPreferenceChange(PositionPreferenceKey.self, perform: perform)
}
}
private struct PositionPreferenceKey: PreferenceKey {
static var defaultValue: CGPoint = .zero
static func reduce(value: inout CGPoint, nextValue: () -> CGPoint) {}
}To tackle this task effectively, we need to establish a Coordinate Space name on the Scroll View. This step is essential as it allows us to employ the Geometry Reader to examine the content frame in relation to the scroll view’s coordinates. The origin of this frame precisely indicates the scroll position we’re aiming to identify.
Now, as for our choice to utilise SwiftUI’s preference system, it’s a strategic decision. During the view updating process, direct manipulation of our view’s state isn’t feasible. By leveraging a preference instead, we can seamlessly transmit the CGPoint values to our view asynchronously.
And this is how you can use it:
ScrollView {
content
.onScrollPositionChanged(in: "coordinateSpaceName") { pos in
// store the position
}
}
.coordinateSpace(name: "coordinateSpaceName")Next up, we’ve got to figure out how to slot that position back in once the content’s reloaded, but before it actually shows up on the screen. This way, we can dodge any jiggling or adjustments to the scroll position after everything’s been redrawn. It’s all about keeping things smooth and seamless.
In SwiftUI, we’re fortunate to have the ScrollViewReader, which empowers us to utilise the scrollTo(_:anchor:) function for precisely positioning content within our Scroll View. The Scroll View must be encapsulated within the ScrollViewReader for this feature to work seamlessly.
Now, here’s where things get tricky. The scrollTo(_:anchor:) function requires both an ID and an anchor (top, bottom, or a custom UnitPoint). Apple defines a UnitPoint as:
“A normalized 2D point in a view’s coordinate space.”
https://developer.apple.com/documentation/swiftui/unitpoint
The real challenge lies in translating the position’s CGPoint relative to the Scroll View into a UnitPoint relative to the view’s bounds. I have just the solution to that problem. Let’s take a look at the code below:
ScrollViewReader { reader in
ScrollView {
// 1
Spacer().frame(width: containerSize.width, height: .leastNonzeroMagnitude).id("contentId")
// 2
content
.onScrollPositionChanged(in: "coordinateSpaceName") {
onPositionChanged($0)
}
}
// 3
.onReceive(position) {
let anchorX = $0.x / containerSize.width
let anchorY = $0.y / containerSize.height
reader.scrollTo("contentId", anchor: .init(x: anchorX, y: anchorY))
onPositionChanged($0)
}
}
.coordinateSpace(name: "coordinateSpaceName")1. To effectively perform the translation, we employ a simple workaround: utilising a Spacer() with the smallest non-zero magnitude as height, matched with the container’s width. This approach ensures that the translation aligns seamlessly within the view’s bounds.
2. This is something we’ve talked about previously. We’ve got the actual content wrapped up neatly in a single view, and we’re keeping tabs on the scroll position right there.
You can also wrap the content inside a VStack to ensure there is only a single view we’re reading position of:
VStack { content }
.onScrollPositionChanged(in: "coordinateSpaceName") {
onPositionChanged($0)
}3. This is where we put to use the position we’ve gathered from a Combine publisher. The resulting anchor value is then applied to the Spacer component. Since it’s essentially zero height and full width, it magically translates to a CGPoint position across the entire content within the scroll view. Pretty fascinating, right?
Occasionally, you might encounter minor view adjustments post-redraw, triggering additional redraws, like when a text element needs to become multiline due to insufficient space. To address this, you can implement a workaround. When publishing a new position to the aforementioned position publisher, you can repeat the process on two run loops after using nested DispatchQueue.main.async {}. This additional step ensures that any subsequent adjustments are captured and accounted for, leading to a smoother and more consistent user experience.
To make things easier to understand, I have written a ScrollPositionTracker which manages keeping track of and publishing most recent scroll position for you as below:
public struct ScrollPositionTracker {
// current scroll position as user scrolls
private var currentScrollPosition: CGPoint
// the desired scroll position that needs to be applied when relaods completes
private var desiredScrollPosition: CGPoint
private let scrollPositionSubject: PassthroughSubject<CGPoint, Never>
public var scrollPosition: AnyPublisher<CGPoint, Never> {
scrollPositionSubject.eraseToAnyPublisher()
}
public init(initialPosition: CGPoint = .zero) {
self.currentScrollPosition = initialPosition
self.desiredScrollPosition = initialPosition
self.scrollPositionSubject = .init()
}
public mutating func updateCurrentPosition(to pos: CGPoint) {
self.currentScrollPosition = pos
}
public mutating func syncDesiredPosition() {
self.desiredScrollPosition = self.currentScrollPosition
}
public func publishDesiredPosition() {
// 1. set the position on current run loop.
self.scrollPositionSubject.send(self.desiredScrollPosition)
// 2. WORKAROUND: set the position after 2 runloops due to redrawing of view
// leading to possible content resize, which may change the scroll position.
DispatchQueue.main.async {
DispatchQueue.main.async {
self.scrollPositionSubject.send(self.desiredScrollPosition)
}
}
}
}
Now, let’s put it all together:
struct SwiftUIView: View {
@State private var scrollPositionTracker = ScrollPositionTracker()
var body: some View {
PositionTrackingScrollView(
position: scrollPositionTracker.scrollPosition,
onPositionChanged: scrollPositionTracker.updateCurrentPosition
) {
Text("Hello, World!")
}
.frame(maxWidth: .infinity)
}
func willReload() {
// Just before going to reload the view, sync the desired position with the current position
self.scrollPositionTracker.syncDesiredPosition()
}
func didReload() {
RunLoop.main.perform {
// Once reload completes, publish the position on main RunLoop
self.scrollPositionTracker.publishDesiredPosition()
}
}
}
public struct PositionTrackingScrollView<Content: View>: View {
@State private var containerSize: CGSize
private let position: AnyPublisher<CGPoint, Never>
private let onPositionChanged: (CGPoint) -> Void
private let content: Content
private let coordinateSpaceName = UUID()
private let contentId = UUID()
public init(position: AnyPublisher<CGPoint, Never>, onPositionChanged: @escaping (CGPoint) -> Void, @ViewBuilder content: () -> Content) {
self.position = position
self.onPositionChanged = onPositionChanged
self.content = content()
}
public var body: some View {
ScrollViewReader { reader in
ScrollView {
Spacer().frame(width: containerSize.width, height: .leastNonzeroMagnitude).id(contentId)
content
.onScrollPositionChanged(in: coordinateSpaceName) {
onPositionChanged($0)
}
}
.onReceive(position) {
let anchorX = $0.x / containerSize.width
let anchorY = $0.y / containerSize.height
reader.scrollTo(contentId, anchor: .init(x: anchorX, y: anchorY))
}
}
.coordinateSpace(name: coordinateSpaceName)
.onSizeChanged { size in
containerSize = size
}
}
}
public extension View {
func onSizeChanged(perform: @escaping (CGSize) -> Void) -> some View {
background(
GeometryReader { geometryProxy in
Color.clear
.preference(key: SizePreferenceKey.self, value: geometryProxy.size)
}
).onPreferenceChange(SizePreferenceKey.self, perform: perform)
}
func onScrollPositionChanged(in coordinateSpaceName: AnyHashable, perform: @escaping (CGPoint) -> Void) -> some View {
background(
GeometryReader { geometry in
Color.clear
.preference(key: PositionPreferenceKey.self, value: geometry.frame(in: .named(coordinateSpaceName)).origin)
}
)
.onPreferenceChange(PositionPreferenceKey.self, perform: perform)
}
}
public struct SizePreferenceKey: PreferenceKey {
public static var defaultValue: CGSize = .zero
public static func reduce(value: inout CGSize, nextValue: () -> CGSize) {}
}
private struct PositionPreferenceKey: PreferenceKey {
static var defaultValue: CGPoint = .zero
static func reduce(value: inout CGPoint, nextValue: () -> CGPoint) {}
}In conclusion, mastering Scroll View control in SwiftUI is challenging. It’s not just about IDs and scrollTo(_:anchor:); it’s about effectively managing position coordinates.
In this tutorial, I’ve shared my approach to controlling Scroll View positions. Why bother? Consider scenarios where network calls must be triggered based on user scroll positions, necessitating full view refreshes. Handling such situations requires us to maintain scroll position consistency post-reload.
I hope this tutorial empowers you to navigate Scroll View complexities and create seamless user experiences in your SwiftUI apps.
