ScrollView – Pull to Refresh

At the time of writing, ScrollView in SwiftUI is not very customizable. A feature many may be missing, is the ability to refresh its contents when the view is pulled. Fortunately, using view preferences, we can manage to add such behaviour.

Once we finished coding our new view, using refreshable ScrollViews will be very easy, and they will look like this:

To apply this behavior, we’ll need to use RefreshableScrollView instead of ScrollView directly. We will have a boolean binding variable to indicate if the model is loading more data. The RefreshableScrollView will change the binding to true, when the view needs refreshing. And the model will put it back to false, when the refresh has ended.

RefreshableScrollView(refreshing: self.$model.loading) {                
    // Scrollable contents go here
    ...
}

class MyModel: ObservableObject {
    @Published var loading: Bool = false {
        didSet {
            if oldValue == false && loading == true {                
                // Do async stuff here
                ...

                // When finished loading (must be done on the main thread)
                self.loading = false
            }
        }
    }
}

RefreshableScrollView Implementation

Here I will include only the most relevant parts of the code. However, the full implementation can be found in the following gist files:

• refreshable-scrollview-example.swift
• refreshable-scrollview-model.swift
• refreshable-scrollview-implementation.swift

In order to implement the refresh control, we first need to find a way of obtaining the scroll offset of our ScrollView. This is where View Preferences come handy. If you are not familiar with View Preferences, I recommend you read the “Inspecting the View Tree” series.

In order to get the offset, we will place two invisible views. One will be at the top of the scrolling contents (MovingView()), and the other fixed at the top of the ScrollView (FixedView()). The difference in their Y position, will be the scrolled offset.

struct RefreshableScrollView<Content: View>: View {
    
    ...
    
    var body: some View {
        return VStack {
            ScrollView {
                ZStack(alignment: .top) {
                    MovingView()
                    
                    VStack { self.content }.alignmentGuide(.top, computeValue: { d in (self.refreshing && self.frozen) ? -self.threshold : 0.0 })
                    
                    SymbolView(height: self.threshold, loading: self.refreshing, frozen: self.frozen, rotation: self.rotation)
                }
            }
            .background(FixedView())
            .onPreferenceChange(RefreshableKeyTypes.PrefKey.self) { values in
                self.refreshLogic(values: values)
            }
        }
    }

    ...
}

These views serve only one purpose, setting a preference with their own position:

struct MovingView: View {
    var body: some View {
        GeometryReader { proxy in
            Color.clear.preference(key: RefreshableKeyTypes.PrefKey.self, value: [RefreshableKeyTypes.PrefData(vType: .scrollViewTop, bounds: proxy.frame(in: .global))])
        }.frame(height: 0)
    }
}
struct FixView: View {
    var body: some View {
        GeometryReader { proxy in
            Color.clear.preference(key: RefreshableKeyTypes.PrefKey.self, value: [RefreshableKeyTypes.PrefData(vType: .scrollViewContainer, bounds: proxy.frame(in: .global))])
        }
    }
}

Note that it should have been possible to achieve the same result, using a single view and calling the proxy(.frame(in: .named()). Unfortunately, there seems to be a bug with named coordinate spaces at the moment, and that is why we need two separate reference views.

Refreshing Feedback

We will check the scroll offset to determine wether we have crossed a certain threshold beyond the top. If we have, a content refresh will trigger. We also want to show an animated arrow that give us some feedback on how far from the triggering point we are. And once we have reached it, replace the arrow with an Activity Indicator. The arrow and activity indicator are implemented inside SymbolView:

struct SymbolView: View {
    var height: CGFloat
    var loading: Bool
    var frozen: Bool
    var rotation: Angle
    
    
    var body: some View {
        Group {
            if self.loading { // If loading, show the activity control
                VStack {
                    Spacer()
                    ActivityRep()
                    Spacer()
                }.frame(height: height).fixedSize()
                 .offset(y: -height + (self.loading && self.frozen ? height : 0.0))
            } else {
                Image(systemName: "arrow.down") // If not loading, show the arrow
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: height * 0.25, height: height * 0.25).fixedSize()
                    .padding(height * 0.375)
                    .rotationEffect(rotation)
                    .offset(y: -height + (loading && frozen ? +height : 0.0))
            }
        }
    }
}

All the logic to calculate when the threshold is crossed, and how much the arrow must be rotated, is done in the .onPreferenceChange() closure:

// Calculate scroll offset
let movingBounds = values.first { $0.vType == .movingView }?.bounds ?? .zero
let fixedBounds = values.first { $0.vType == .fixedView }?.bounds ?? .zero
self.scrollOffset  = movingBounds.minY - fixedBounds.minY
self.rotation = self.symbolRotation(self.scrollOffset)

// Crossing the threshold on the way down, we start the refresh process
if !self.refreshing && (self.scrollOffset > self.threshold && self.previousScrollOffset <= self.threshold) {
    self.refreshing = true
}
if self.refreshing {
    // Crossing the threshold on the way up, we add a space at the top of the scrollview
    if self.previousScrollOffset > self.threshold && self.scrollOffset <= self.threshold {
        self.frozen = true
    }
} else {
    // remove the sapce at the top of the scroll view
    self.frozen = false
}
// Update last scroll offset
self.previousScrollOffset = self.scrollOffset

Also note that we are using .alignmentGuide() on the ScrollView contents, to displace them temporarily, while the refresh is in progress.

Summary

In this article we have found yet another application of using View Preferences. I encourage you to get familiar with the full code in the gist files, if you are planning on adding that code to your own project.

Please feel free to comment below, and follow me on twitter to be notified when new articles are release. Until then…