SwiftUI: Material
Görünümlerinize şeffaflık efekti ekleyin!
👋 Hepinize yeniden merhaba sevgili TurkishKit okurları! Bu yazımızda iOS 15'te yeni olan Material’ı keşfediyoruz! Artık Material ile SwiftUI görünümlerinize şeffaflık efekti eklemek hiç olmadığı kadar kolay! Hadi başlayalım.
Öncelikle kodumuza güzel bir arka plan görseli ve ZStack ekleyerek başlayalım.
struct ContentView: View { // MARK: - View
var body: some View {
ZStack {
Image(“background”)
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all)
}
}
}
Şimdi de bir Label görünümü oluşturup kodumuza ekleyelim. Minik bir detay dışında aslında pek de bir yenilik olmadığını fark edeceksiniz: .backgound niteleyecisine atadığımız değer.
struct ContentView: View { // MARK: - View
var body: some View {
ZStack {
Image(“background”)
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all) Label(“Material!”, systemImage: “eyes”)
.font(.title)
.padding()
.background(.thinMaterial)
.cornerRadius(20)
}
}
}
Arka plan niteleyicisine atadığımız .regularMaterial değeri görünümümüze orta derecede şeffaflık kazandırdı. Evet, gerçekten de yapmanız gereken tek şey bu. 😄
Tabii ki başka şeffaflık seçenekleri de bulunmakta. Karanlık moddaki görünümlerini de içeren bu listeye bir göz atmanızı mutlaka öneririm.
SwiftUI Materyalleri:
.ultraThinMaterial
.thinMaterial
.regularMaterial
.thickMaterial
.ultraThickMaterial
💡İpucu: Material arka planları sadece uygulamaların içinde sınırlandırılmıştır. Mesela bir Widget oluşturup arka planında Material kullanırsanız Widget şeffaflaşmayacaktır.
Son olarak da şimdiye kadar siyah olan metnimizi SwiftUI sihri ile arka planımız ile uyumlu hale getirelim. 😄 Bunun için Label görünümümüze .foregroundColor(.secondary) niteleyicisini eklememiz yeterli.
struct ContentView: View { // MARK: - View
var body: some View {
ZStack {
Image(“background”)
.resizable()
.scaledToFill()
.edgesIgnoringSafeArea(.all)
Label(“Material!”, systemImage: “eyes”)
.foregroundColor(.secondary)
.font(.title)
.padding()
.background(.regularMaterial)
.cornerRadius(20)
}
}
}
Bu sefer farklı olarak .regularMaterial arka planını kullandım. Gördüğünüz gibi Label görünümümüz artık arka plana oldukça doğal bir şekilde uyum sağlıyor.
Okuduğunuz için teşekkürler! Umarım burada öğrendikleriniz işinize yarar. Bir sonraki makaleye kadar kendinize çok iyi bakın. 🙂
