Swift Beginner, I want to achieve a scrolling effect similar to Snapchats filter changer.
It's a static circlestroke with round images you can drag into it. Here's a Screenshot.
I'm using a horizontal ScrollView() with a .scrollTargetBehavior(.paging). Unfortunately, by default, it tends to only show one element on screen.
Therefore, I put the view in a smaller frame and used .scrollClipDisabled().
Now the problem is that my scrollable area seems to be bound to that frame. Increasing the frame pushes the Images out of the screen, while decreasing makes the scroll area too small.
Is there a way to increase the scroll area, while keeping the current scroll effect, or is there a better solution that still utilizes ScrollView()?
Isolated Code:
import SwiftUI
struct ScrollViewPagingBootcamp: View {
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 0) {
ForEach(0..<20) { index in
Rectangle()
.frame(width: 150, height: 150)
.clipShape(Circle())
.overlay(
Text("Image: " + "\(index)").foregroundColor(.white)
)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding(10)
.containerRelativeFrame(.horizontal, alignment: .center)
}
}
}
.ignoresSafeArea()
.scrollClipDisabled()
.scrollTargetBehavior(.paging)
.scrollBounceBehavior(.basedOnSize)
.frame(maxWidth: 200, maxHeight: 300)
.background(Color.black.opacity(0.5))
.overlay(
Circle()
.stroke(Color.white, lineWidth: 5)
.frame(width: 160, height: 160)
)
}
}
#Preview {
ScrollViewPagingBootcamp()
}