HandySwiftUI Stiller: SwiftUI'ın Standart View'larını Güçlendirmek

Bu API’leri kendi uygulamalarımda 4 yıl boyunca geliştirdikten sonra, HandySwiftUI’ın ilk etiketli sürümünü paylaşmaktan mutluluk duyuyorum. Bu paket, yalnızca geçen yıl 10 uygulama yayınlamamda büyük rol oynayan çeşitli yardımcı araçlar ve kolaylık API’leri içeriyor. HandySwift paketimin Foundation için sunduğu kolaylıklara benzer şekilde, SwiftUI geliştirme için pratik çözümler sunuyor.

Bu yazıda, TranslateKit, FreemiumKit ve CrossCraft gibi uygulamalarımda günlük geliştirme sürecinde en değerli bulduğum stillerin bir seçkisini paylaşacağım. HandySwiftUI çok daha fazla yardımcı araç içerse de, bu stiller gerçek dünya uygulamalarında defalarca kendini kanıtladı ve senin SwiftUI projelerinde de işine yarayabilir.

Birincil, İkincil ve Titreşimli Düğmeler

Farklı kullanım senaryoları için hazır stillerle görsel açıdan çekici düğmeler oluştur:

struct ButtonShowcase: View {
   var body: some View {
       VStack(spacing: 20) {
           // Belirgin arka planlı birincil düğme
           Button("Get Started") {}
               .buttonStyle(.primary())

           // Kenarlıklı ikincil düğme
           Button("Learn More") {}
               .buttonStyle(.secondary())

           // Dikkat çeken titreşimli düğme
           Button {} label: {
              Label("Updates", systemImage: "bell.fill")
                 .padding(15)
           }
           .buttonStyle(.pulsating(color: .blue, cornerRadius: 20, glowRadius: 8, duration: 2))
       }
   }
}

Yatay, Dikey ve Sabit İkon Genişlikli Etiketler

Farklı düzen ihtiyaçları için birden fazla etiket stili:

struct LabelShowcase: View {
   var body: some View {
       VStack(spacing: 20) {
           // Sağ tarafta ikonlu yatay düzen
           Label("Settings", systemImage: "gear")
               .labelStyle(.horizontal(spacing: 8, iconIsTrailing: true, iconColor: .blue))

           // Hizalama için sabit genişlikli ikon
           Label("Profile", systemImage: "person")
               .labelStyle(.fixedIconWidth(30, iconColor: .green, titleColor: .primary))

           // Dikey yığın düzeni
           Label("Messages", systemImage: "message.fill")
               .labelStyle(.vertical(spacing: 8, iconColor: .blue, iconFont: .title))
       }
   }
}

Tüm parametreler makul varsayılanlarla isteğe bağlıdır, yani bunları .vertical() gibi kullanabilirsin. Sadece özelleştirmek istediğin şeyi belirtmen yeterli.

Dikey Etiketli İçerikler

FreemiumKit’in API yapılandırmasında kullanıldığı gibi, dikey etiketlerle yapılandırılmış form girdileri:

struct APIConfigView: View {
    @State private var keyID = ""
    @State private var apiKey = ""

    var body: some View {
        Form {
            HStack {
                VStack {
                    LabeledContent("Key ID") {
                        TextField("e.g. 2X9R4HXF34", text: $keyID)
                            .textFieldStyle(.roundedBorder)
                    }
                    .labeledContentStyle(.vertical())

                    LabeledContent("API Key") {
                        TextEditor(text: $apiKey)
                            .frame(height: 80)
                            .textFieldStyle(.roundedBorder)
                    }
                    .labeledContentStyle(.vertical())
                }
            }
        }
    }
}

.vertical stili hizalamayı (varsayılan leading) ve boşluğu (varsayılan 4) özelleştirmene olanak tanır. Özel bir etiket stili sağlıyorsan muteLabel: false geç, çünkü varsayılan olarak etiketler otomatik olarak daha küçük ve gri stillendirilir.

Örneğin, FreemiumKit’in özellik yerelleştirme formunda dikey etiketin daha büyük bir fontla gösterilmesini istiyorum:

LabeledContent {
   LimitedTextField(
      "English \(self.title)",
      text: self.$localizedString.fallback,
      characterLimit: self.characterLimit
   )
   .textFieldStyle(.roundedBorder)
} label: {
   Text("English \(self.title) (\(self.isRequired ? "Required" : "Optional"))")
      .font(.title3)
}
.labeledContentStyle(.vertical(muteLabel: false))

Çoklu Platform Toggle Stili

SwiftUI .checkbox toggle stili sunar ama sadece macOS’te kullanılabilir. HandySwiftUI, tüm platformlara onay kutusu stili toggle’lar getiren .checkboxUniversal‘ı ekler (macOS’te .checkbox olarak render edilir):

struct ProductRow: View {
    @State private var isEnabled: Bool = true

    var body: some View {
       HStack {
           Toggle("", isOn: $isEnabled)
              .toggleStyle(.checkboxUniversal)

           Text("Pro Monthly")

           Spacer()
       }
    }
}

Bu örnek, macOS için optimize edilmiş ancak diğer platformları da destekleyen FreemiumKit’in ürünler ekranından alınmıştır.

Hemen Başla

Bu stilleri projelerinde benim kadar faydalı bulacağını umuyorum. İyileştirme fikirlerin veya SwiftUI topluluğuna katkı sağlayabilecek ek stiller için GitHub’da katkıda bulunmaktan çekinme:

github.comFlineDev / HandySwiftUIHandy SwiftUI features that didn’t make it into SwiftUI (yet)

Bu yazı, HandySwiftUI’ın özelliklerini keşfeden dört makaleden oluşan serinin son makalesi. Henüz okumadıysan Yeni Tipler, View Modifier’lar ve Extension’lar hakkındaki önceki makalelere göz at!