1

I am currently working on a Zodiac Signs app in SwiftUI, and I want to display the next and previous images of a zodiac sign in a row and enable sliding to them.

Here is the code that displays the current zodiac sign image using a TabView with a PageTabViewStyle:

struct ZodiacSignsView: View {
    let zodiacSigns = ["aries", "taurus", "gemini", "cancer", "leo", "virgo", "libra", "scorpio", "sagittarius", "capricorn", "aquarius", "pisces"]
    @Binding var selectedZodiacSign: String
    
    var body: some View {
        TabView(selection: $selectedZodiacSign) {
            ForEach(zodiacSigns, id: \.self) { sign in
                withAnimation {
                    Image(sign)
                        .resizable()
                        .scaledToFit()
                        .opacity(selectedZodiacSign != sign ? 0.5 : 1)
                        .tag(sign)
                }
            }
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        .background(
            ZStack {
                Circle()
                    .stroke(
                        LinearGradient(colors: [Color(red: 1.0, green: 0.502, blue: 0.22), Color(red: 1.0, green: 0.761, blue: 0.22)], startPoint: .top, endPoint: .bottom),
                        lineWidth: 4)
                    .frame(width: 170, height: 170)
            }
        )
        .onChange(of: selectedZodiacSign) { _ in
            // Vibration here
            print("vibro starts")
            let generator = UINotificationFeedbackGenerator()
            generator.notificationOccurred(.success)
            print("vibro ends")
        }
    }
}

What modifications do I need to make in order to display the next and previous images in a row and enable sliding to them?

The ending result must be like that:

previouseImage(smaller) MAINIMAGE nextImage(smaller)

enter image description here

0 Answers0