SwiftUI: GroupBox
Basit ve Özelleştirilebilir Görüntü Gruplamaları
Bu yazımızda SwiftUI ile GroupBox objesini keşfediyoruz. GroupBox ile arayüz bileşenlerini kolayca gruplayarak “Sağlık” uygulamasından aşina olduğunuz kartlara benzer görünümler oluşturabilirsiniz. Hazırsanız işe koyulalım. 😃
Giriş
GroupBox objesi WWDC20 ile karşımıza çıkmaya başkadı. Oldukça basit ve net bir görevi var: Görüntüleri dikdörtgensel bölge içinde gruplamak. Ayıraca, opsiyonel başlık ve içerik parametrelerini kabul ediyor — parametrelerin ikisi de View tipinde. Aşağıdaki örnekte basit bir kişi kartı oluşturuyoruz.
GroupBox(label:
Label(“Steven Paul Jobs”, systemImage: “person.fill”)
.font(.title)
.foregroundColor(Color(.systemIndigo))
.padding(.bottom)
) {
HStack {
VStack(alignment: .leading, spacing: 8) {
Label(“Telefon: 0123 456 78 90”, systemImage: “phone”)
Label(“E-Posta: stevej@email.com”, systemImage: “envelope”)
Label(“İşyeri: Apple Inc.”, systemImage: “building.2”)
Label(“Adres: 1 Infinite Loop; Cupertino, CA 95014, USA”, systemImage: “mappin.and.ellipse”)
}.font(.title3)
Spacer()
}
}Başlıkta bir adet sistem sembolünü ve metni gruplamak için Label görünümünden yararlandık. Aynı Text görünümünde olduğu gibi standart niteleyicilerle rengini ve fontunu kolayca ayarlayabiliyoruz.
İçerik kısmı da aynı şekilde Label görünümlerinden oluşuyor. VStack gruplamasının alignment parametresine .leading değerini atayarak içerdiği görünümlerin sol başta hizalıyoruz, ve spacing parametresine 8 değerini atayarak .padding() “modifier”ında kurtuluyoruz.
Şimdiyse geriye VStack içerisindeki objeleri sola hizalamak kaldı. Bunun için VStack gruplamasını bir HStack içine gömüyor ve ardına bir Spacer -yani boşluk- ekliyoruz. SwiftUI boşluk miktarını bizim için otomatik olarak ayarlıyor.
Tebrikler, ilk GroupBox görünümünüzü oluşturdunuz! 🥳
GroupBoxStyle Protokolü 🎨
Diğer bazı SwiftUI görünümleri gibi GroupBox da bir stil protokolüne sahip: GroupBoxStyle. Bu protokole uyan bir yapı oluşturup bunu GroupBox görünümüne .groupBoxStyle() “modifier”ı ile uygulayarak GroupBox görünümünüzü istediğiniz gibi özelleştirebilirsiniz. Böylece sıklıkla kullandığınız niteleyicileri her seferinde tek tek yazmak yerine bir kere tanımladıktan sonra sadece bir satır kod ile uygulayabiliyorsunuz. Aşağıda özelleştirilmiş bir GroupBoxStyle örneği görüyorsunuz.
struct ContactCardGroupBoxStyle: GroupBoxStyle {
func makeBody(configuration: Configuration) -> some View {
VStack(alignment: .leading) {
configuration.label
.font(.title)
.foregroundColor(Color(.systemIndigo))
HStack {
configuration.content
.font(.title3)
Spacer()
}
}
.padding()
.background(Color(.systemGroupedBackground))
.clipShape(RoundedRectangle(cornerRadius: 25))
.shadow(radius: 8)
}
}Kodumuz GroupBoxStyle protokolünün gerektirdiği gibi makeBody metodunun içinde yaşıyor. configuration.label ile GroupBox görünümüne atadığımız label parametresine, configuration.content ile de content parametresine erişiyoruz.
Daha önce yazdığımız GroupBox kodunda içeriği bir HStack içine gömerek sola hizalamıştık. Burada da aynısını configuration.content için gerçekleştirdik. Ayrıca daha önce başlığa ve içeriğe uyguladığımız renk ve font niteleyicilerini de configuration.label ve configuration.content parametrelerine uyguladık.
Bir stil oluşturduğumuzda arka plandaki dikdörtgeni kendimiz sağlamamız gerekiyor — tabii istiyorsanız. Arka planımızı eklemeden önce .padding() niteleyicisiyle kenarlardan biraz boşluk bırakmamız oldukça önemli. Hazır özelleştirme fırsatı bulmuşken kenarları biraz daha yuvarlatıp gölge de ekledim.
Artık istediğimiz sonuca sadece aşağıdaki kod ile ulaşabiliriz. Öncekinden çok daha temiz oldu.
GroupBox(
label:
Label(“Steven Paul Jobs”, systemImage: “person.fill”)
) {
VStack(alignment: .leading, spacing: 8) {
Label(“Telefon: 0123 456 78 90”, systemImage: “phone”)
Label(“E-Posta: stevej@email.com”, systemImage: “envelope”)
Label(“İşyeri: Apple Inc.”, systemImage: “building.2”)
Label(“Adres: 1 Infinite Loop; Cupertino, CA 95014, USA”, systemImage: “mappin.and.ellipse”)
}
}
.groupBoxStyle(ContactCardGroupBoxStyle())
GroupBox sayesinde artık aynı sonuca çok daha basit ve temiz bir kaynak koduyla ulaşabiliyoruz.
Şimdilik bizden bu kadar, eğer sorularınız varsa yorumlardan soru sormayı unutmayın.
