İçeriğe geç

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

 

 

Tarih:SwiftUI

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2021 Kenan Atmaca