SwiftUI ile Custom PageIndicator

Merhabalar bu yazımda SwiftUI ile Custom bir Page Indicator oluşturacağız.

iOS ile bütünleşen ve kaydırmalı sayfaların altında gördüğümüz yuvarlak page indicator nesnelerini SwiftUI ile kendi View nesnemizi oluşturarak yazmak oldukça kolay.

Aşağıda yazdığım örnek ile uygulamalarınızda kullanabilirsiniz.

struct ContentView: View {
    
    @State var selectedIndex: Int = 0
    
    var body: some View {
        VStack {
            Spacer()
            PageIndicatorView(selectedIndex: $selectedIndex, count: 4, color: Color.gray.opacity(0.7), selectedColor: .black)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white.ignoresSafeArea())
        .onTapGesture {
            selectedIndex = 2
        }
    }
}

struct PageIndicatorView: View {
    
    @Binding var selectedIndex: Int
    
    var count: Int
    var color: Color = .black
    var selectedColor: Color = Color.gray.opacity(0.5)
    var circleSize: CGFloat = 12
    
    var body: some View {
        HStack {
            ForEach(0..<count, id: \.self) { index in
                if index == selectedIndex {
                    Circle()
                        .fill(selectedColor)
                        .frame(width: circleSize, height: circleSize)
                } else {
                    Circle()
                        .fill(color)
                        .frame(width: circleSize, height: circleSize)
                }
            }
        }.animation(.easeInOut(duration: 0.5))
    }
}