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)