Implement infinite scroll with SwiftUI

Introduction

Do you use SwiftUI? I started touching it recently,

when I used storyboard

• Stuck with AutoLayout errors
• Wasted for a few seconds every building time

now SwiftUI resolve both problems, my development efficiency has exploded 💣

In this post, I will introduce how to implement infinite scrolling like below with SwiftUI.

First of all, let me say the conclusion, because of SwiftUI does not have enough functions natively, there are many functions that I could not implement as expected. I will explain that in detail.

If you want to try it for now, please see here.

kazuooooo/SwiftUIInfinityScroll

I have also studied design recently, so I made a logo to increase my motivation 👏

Target audience

• Those who want to implement infinite scroll in SwiftUI
• Those who like wombat

Implementation mechanism

Mechanism for generating elements indefinitely

How to implement infinite scrolling? … I want you to think about it once by yourself, what kind of method can you come up with? I also came up with three ideas or so, I finally adopted was something like the following figure.

1. Prepare N elements and place them in the scroll view. A user scrolls the screen.
2. When the view reach to the N-1 item, N+1 element is generated.
3. Since the number of elements increases by one, the current view becomes N-2.
4. Return to step 2. Infinite …

In the implementation, I wrote ViewModel using @ObservedObject to manage the scroll view state. It looks like this (* Only important parts are excerpted. See detail here)

Horizontal scroll

Since ListView does not have a horizontal direction, in order to support horizontal scrolling, I used very hacky way that rotate List to -90 degrees, and 90 degrees items in List View.

If you already have experiences for SwiftUI

Wait! wait! why don’t you use HorizonView? 😈

Yes, I thought so too. From here, I will write about the problems I tried to implement with ScrollView.

Problems with ScrollView

If you use ScrollView, horizontal scrolling can be implemented relatively easily with the following code.

However, trying to make this in infinite scroll will cause various problems.

Fire even if OnAppear is not on the screen

First, when an element is added to ScrollView, OnAppear fires regardless of whether or not it is displayed on the screen. So you cannot use the above infinite element generation mechanism used in List View.

Cannot take scroll position

Then you might try to get the Scroll position and generate the element according to that position, but I could not find it as long as I searched for it. So, if you want to know scroll position, place an invisible element with a GeometryReader at the start of the ScrollView. Then calculate the current display area from it. However, I felt that the logic was likely to be complicated, so I once saw it off.

Common problems with ListView & ScrollView

Position shifts when the previous view is deleted

Considering performance, I tried to delete the view that disappeared, but when I deleted the previous view, the display position shifted. Therefore, the View that is no longer displayed is left and delegate SwiftUI to handle them. Notable performance problem has not occurred so far, but it is quite uncomfortable.

The scroll position cannot be controlled

If we can control the scroll position, we can solve position shift problem above. But unfortunately there is nothing for control scroll position.

Also, functions like below can be implemented by control scroll position.

• Ability to display page by flick
• Scroll backward (-N pages)

UIKit has contentOffset I wait for the same function in SwiftUI.

Summary

How was that?

The library created this time is not enough to be used in the product as it is, so sorry for those who expected it 🙇‍♂️

I would like to use it with my own products, so I will improve the quality a little while waiting for the SwiftUI version upgrade. (Contribute is also welcome 🐸

As an impression, I felt

“Swift UI doesn’t have enough api yet 😢”

but also felt

“It’s easy to develop and I like SwiftUI ❤️”

I am willing to continue using it 😙

Others -SwiftUI recommended links-

Japanese

Introduction to SwiftUI Practice

An important part of SwiftUI is tightly packed into a very thin book. Japanese & easy to understand, so getting started is better than doing an English tutorial. (For Japanese 🗾 👹)

English

Swift Official Tutorial

Needless to say. It seems that Apple made a lot of effort. Rather, I’m curious about web implementation.

HackingWithSwift

When you think “How will this be done?”, you can find simple sample code there. In addition, SwiftUI demon gate is a little around State, but this video is explained very clearly. (* Slightly old version. However, the concept is the same.)

If you have never used SwiftUI, please try it 🌳