0

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()
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.