SwiftUI: Combine Views
SwiftUI ile uygulamaların temeli stack görünümlerden oluşmaktadır. Stack görünümler kullanarak uygulamanızı kodlamaya başlayın!
SwiftUI sayesinde birden fazla elemanı bir araya ortaya toplayıp yeni bir eleman ortaya çıkartmak çok kolaydır. Bu yazımızda SwiftUI ile elemanları nasıl bir araya getirebileceğimizi öğreneceğiz. Hazırsanız hiç vakit kaybetmeden başlayalım! ✌️
Stack Yapıları
SwiftUI üzerinde birden fazla elemanı bir arada kullanmak için Stack yapıları mevcuttur: VStack, HStack ve ZStack.
- VStack: Dikey bir şekilde elemanlarımızı sıralamamızı sağlar.
- HStack: Yatay bir şekilde elemanlarımızı sıralamamızı sağlar.
- ZStack: Elemanları üst üste sıralamamızı sağlar.
Yapıları anladığımıza göre, bunlarla birlikte bir örnek kodlamaya başlayabiliriz!
Kodlama
Yapacağımız örnek, basit bir liste hücresidir. İçinde bir görsel ve yazı olacaktır. İlk yapacağımız şey, liste hücremizin arka plan rengini ayarlamaktır. Bunun için ZStack yapısını kullanacağız. Çünkü rengimiz, tıpkı bir masa örtüsü gibi, elemanımızdaki bütün her yeri kaplayacak ve ondan sonra diğer elemanlarımız rengimizin (yani masa örtümüzün) üstüne getirilecektir.
Gördüğünüz üzere, elemanımız artık görünür bir hal adlı. Yalnız, fark edeceğiniz üzere, elemanımız, neredeyse bütün ekranı kaplıyor. Hatırlayacak olsanız, biz sadece bir liste hücresi yapacağız. Bu yüzden, elemanımızı küçültmeliyiz. Bunun içinse ZStack yapımızda frame metodunu çalıştıracağız.
Ayrıca, liste hücremizin bir kutu gibi kaba gözükmemesi için liste hücremizi bir kapsüle benzeteceğiz. Bunun için, ZStack yapımızda clipShape metodunu çalıştıracağız.
Şimdi sıra, liste hücremizin içerisindeki elemanları oluşturmakta. Elemanlarımız yatay olarak olacağı için bir HStack yapısı oluşturalım.
struct ContentView: View {
var body: some View {
ZStack {
Color.green
HStack {
}
}
.clipShape(Capsule())
.frame(width: UIScreen.main.bounds.width - 40, height: 100)
}
}İlk oluşturacağımız elemanımız, bir arka plandan ve bir resimden oluşacak. Bu yüzden yeniden ZStack elemanı oluşturmamız gerekiyor.
HStack {
ZStack { }
}
ZStack yapımızın arka tarafında bulunacak arka planımız bir Circle elemanı olacaktır.
Onun üstünde duracak resim de tabii ki bir Image elemanı olacaktır. Image elemanında göstereceğimiz resim bir SF sembolü olacaktır.
Sıra resmimizin yanında duracak yazı elemanında. Onu da yaratmak için tabii ki bir Text elemanı oluşturuyoruz.
Bu oluşturduğumuz elemanları sol tarafa doğru yatırmamız gerekiyor. Bunun için de Spacer elemanını kullanacağız.
Görüldüğü üzere, görselimiz sağ taraftan ve sol taraftan hiç boşluk almadığı için gerçekten çok kötü gözüküyor. Bunu düzeltmek için padding metodu ile resmimizin sağ ve sol tarafına boşluklar ekleyelim.
İşte bu kadar. Liste hücremizi oluşturduk!
Bir makalemizin daha sonuna geldik. Stack yapılarının ne olduğunu öğrenip, onlarla bir liste hücresi kodladık. Artık siz de kendi özgün çok katmanlı elemanlarınızı yaratabilirsiniz! Hepinize keyifli kodlamalar dilerim! 😊
Bu yazımızda yapmış olduğumuz projemize buradan ulaşabilirsiniz:
