Tik-Tok like swiping scroll view in SwiftUI (iOS 17+)
During WWDC engeniers from Apple introduced features that allows us to create Tik-Tok scrolling behavior only in a few lines of code
struct TikTokSwipingBehavior: View {
var body: some View {
ScrollView(.vertical) {
LazyVStack(spacing: 0) {
ForEach(0..<100) { i in
ZStack {
Rectangle()
.fill(Color.blue.opacity(0.6))
.containerRelativeFrame([.horizontal, .vertical])
Text("Video \(i+1)")
.font(.title)
.bold()
}
}
}
.scrollTargetLayout()
}
.scrollTargetBehavior(.paging)
.ignoresSafeArea()
}
}
#Preview {
TikTokSwipingBehavior()
}
scrollTargetLayout
and scrollTargetBehavior(_:)
together allows to create a paging behavior on a scroll view.
scrolTargetLayout
set all child views of a container to be a scroll target. Meanwhile scrollTargetBehavior sets actual attitude how scroll should work. So for paging
like in our example, you would scroll item by item, i.e. paging(obviously). But there’s another option viewAligned
. With this parameter your scroll view would work like with default implementation, though with a little difference — scroll always ends on the center of target view.