SwiftUI: ViewModifier
ViewModifier ile UI elemanlarınızı nasıl değiştirebileceğinizi keşfedin!
👋 Merhaba sevgili TurkishKit okuyucuları! Bu yazımızda temiz kod yazma yolunda önemli bir adım olan bir konsepti inceliyoruz: ViewModifier.
Giriş
SwiftUI projenizde bir sürü görünüme tekrar tekrar aynı “modifier”ları yazdığınızı farkediyordunuz, kodunuz uzuyor ve okunması zorlaşıyor. Eğer bu siz iseniz doğru makaleyi okuyorsunuz. 😄 Tekrar tekrar aynı şeyi yazmaktansa neden istediğimiz bütün UI “modifier”larını bir niteleyicide toplamayalım ki?
Aşağıda örnek bir Label görünümü yer almakta.
Label("SwiftUI", systemImage: "swift")
.font(.system(size: 50, weight: .semibold, design: .rounded))
.foregroundColor(.white)
.padding()
.background(LinearGradient(colors: [.indigo, .mint], startPoint: .topLeading, endPoint: .bottomTrailing))
.cornerRadius(25)
.shadow(radius: 15)
Şimdi burada gördüğünüz bütün niteleyicileri bir tanesinin içinde topluyoruz. Bunun için SwiftUI’daki ViewModifier protokolünü kullanacağız — bunlar da SwiftUI görünümleri gibi struct kullanılarak oluşturuluyor.
struct GradientTag: ViewModifier {
func body(content: Content) -> some View {
content
.font(.system(size: 50, weight: .semibold, design: .rounded))
.foregroundColor(.white)
.padding()
.background(LinearGradient(colors: [.indigo, .mint], startPoint: .topLeading, endPoint: .bottomTrailing))
.cornerRadius(25)
.shadow(radius: 15)
}
}Özel nitelecinin bütün niteleyicilerini body fonksiyonunun content parametresine uyguluyoruz. content parametresi, özel niteleyicinizin uygulandığı görünümün kendisini; body fonksiyonunun içeriği de niteleyicinin görünümüze uygulandıktan sonraki yeni halini temsil etmekte — yani standart bir SwiftUI görünümü.
Özel niteleyicinizi görünümlerinize uygulamak için ihtiyacınız olan şey… kendisi başka bir niteleyici olan .modifier.
// ContentView.swift:struct ContentView: View {
var body: some View {
Label(“SwiftUI”, systemImage: “swift”)
.modifier(GradientTag())
}
}
Parametreler!
Sonraki adımlarda SwiftUI’ın View protokolüne bir Extension oluşturarak .modifier niteleyicisine olan ihtiyaçtan kurtulacağız ama ondan önce bir adım daha ileri gidip özel niteleyicilerinize parametre eklemeyi keşfedelim.
Aslında temel mantığı SwiftUI görünümlerine parametre eklemekle tamamen aynı. Niteleyicimizin yeni haline Color tipinde değerlere sahip bir dizi parametresi ekliyoruz ve LinearGradient görünümüne atıyoruz. Böylece gradyan renklerini istediğimiz gibi özelleştirebileceğiz.
// GradientTag.swiftstruct GradientTag: ViewModifier {
let gradientColors: [Color] func body(content: Content) -> some View {
content
.font(.system(size: 50, weight: .semibold, design: .rounded))
.foregroundColor(.white)
.padding()
.background(LinearGradient(colors: gradientColors, startPoint: .topLeading, endPoint: .bottomTrailing))
.cornerRadius(25)
.shadow(radius: 15)
}
}// ContentView.swiftstruct ContentView: View {
var body: some View {
Label(“SwiftUI”, systemImage: “swift”)
.modifier(GradientTag(gradientColors: [.indigo, .mint]))
}
}
View Extension
Evet şimdi size daha önce bahsettiğim gibi .modifier niteleyicisinden kurtulma zamanı. 😄 Artık .modifier(GradientTag(...)) yerine .gradientTag(...) kullanacağız!
Burada yaptığımız
// GradientTag.swift dosyasına ekleyin:extension View {
func gradientTag(gradientColors: [Color]) -> some View {
self.modifier(GradientTag(gradientColors: gradientColors))
}
}// ContentView.swiftstruct ContentView: View {
var body: some View {
Label(“SwiftUI”, systemImage: “swift”)
.gradientTag(gradientColors: [.indigo, .mint])
}
}
Kod gitgide uzuyormuş gibi gelebilir, ancak büyük projelerde ana dosyaları kalabalıklaştırmamak ve okunabilirliği artırmak için yaptığımız şey oldukça önemli.
Şimdilik bizden bu kadar. Umuyorum ki burada öğrendikleriniz işinize yarar, ve tabii ki bir sonraki makaleye kadar kendinize çok iyi bakın. 🙂
