SwiftUI: Form
SwiftUI ile uygulama içerisinde bir Form elemanı oluşturmayı ve kullanmayı öğrenin.
Formlar, kullanıcı giriş kontrollerinin bir koleksiyonudur. Formlar bölümler içerebilir ve bir konteyner görünümü olarak işlev görür. Ayrıca SwiftUI, bir formun içine yerleştirildiğinde kontrolleri otomatik olarak uyarlar. Bu yazımızda, form görüntülemeyi öğreneceğiz. Hazırsanız hiç vakit kaybetmeden başlayalım.🤟🏻
Proje Kurulumu
Xcode’u açarak “Create a New Xcode Project” diyelim. Ardından, “Interface” bölümünü “SwiftUI” ve “Life Cycle” bölümünü de “SwiftUI App” olarak seçmeyi unutmayalım.
İlk olarak Xcode’un bizim için varsayılan olarak verdiği kodlardan Text elemanını ve padding metodunu silelim. Ardından, NavigationView ve Form elemanlarımızı ekleyelim. Son olarak da Form yapımızı oluşturalım.
import SwiftUIstruct ContentView: View {
var body: some View {
NavigationView {
Form {
}
.navigationBarTitle("Ayarlar")
}
}
}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
NavigationView elemanımızı ve Form elemanımızı oluşturduktan sonra Form elemanımızın iskeletini oluşturmuş olduk. Şimdi Form elemanımızın içeriğini daha da özelleştirelim.
İlk olarak Form elemanımızın içerisine bir başlık tanımlayalım, başlıkta “Kullanıcı Bilgisi” yazsın. Son olarak üzerinde “Hesap Aktif” yazan bir Toggle elemanı ekleyelim.
Section(header: Text("Kullanıcı Bilgisi")){
TextField("İsim Soyisim", text: $nameSurname )
TextField("Telefon Numarası", text: $phoneNumber) Toggle(isOn: $isActive) {
Text("Hesap Aktif")
}
}
Daha sonra struct objesi içerisine TextField elemanları ve Toggle elemanını tanımlamamız için @State objeleri oluşturalım.
@State var nameSurname: String = ""
@State var phoneNumber: String = ""
@State var isActive: Bool = trueKodumuzun son hali “Preview” ekranında şu şekilde görünecektir:
Uygulamamız Form yapısını gayet güzel oluşturmakta, şimdi de Form elemanımıza yeni bir Section oluşturarak Picker elemanımızı da kullanalım.
İlk Section bloğunun altına geçerek yeni bir başlık oluşturalım. Bu Section elemanımız da bildirimlerin ayarlaması ile alakalı olsun.
Section(header: Text("Bildirimler")) {
Toggle(isOn: $notificationEnable) {
Text("Etkinleştirildi")
} Picker(selection: $pickerMode, label: Text("Önizlemeler")) {
ForEach(0..<optionPicker.count) {
Text(self.optionPicker[$0])
}
}
}
Elemanımızın içerisine değişkenlerimizi oluşturmayı da unutmayalım.
@State var notificationEnable: Bool = false
@State private var pickerMode = 0var optionPicker = ["Her zaman", "Yalnızca Kullanırken", "Kilitliyken", "Asla"]
Kodumuzu kontrol edelim ve uygulamamızın son haline bakalım. Picker elemanı sayesinde oluşturduğumuz optionPicker değişkeninin değerini değiştirebilmemiz oldukça havalı. 🔥
Son olarak küçük eklemeler yapalım. Aktif olmayan bir buton görünümü ve yazılım versiyonunu gösteren bir Section ile uygulamamızı bitirelim.
Son Section bloğunun altına geçerek yeni bir Section oluşturalım. Bu Section elemanının içerisindeki başlığın adını “Hakkında” olarak ayarlayalım.
Section(header: Text("Hakkında")) {
HStack {
Text("Yazılım Versiyonu")
Spacer()
Text("14.3")
}
}Elemanlarımız yatay olarak yer alacağı için HStack yapısını kullandık. Oluşturduğumuz elemanlarımızı iki ayrı uç tarafta görebilmek için de Spacer elemanını kullandık.
Stack yapıları hakkında daha fazlasını öğrenmek için şu makalemize de göz atabilirsiniz.👇🏻
Son olarak uygulamamızda kullanımı aktif olmasa da “Sıfırla” adında bir buton kullanalım. Bir önceki Section bloğumuzun altına geçerek bu kodları yazalım.
Section(header: Text("Temizle")) {
Button(action: {
print("Eylemi Başlat")
}) {
Text("Sıfırla")
}
}Butonumuz aktif olarak bir şeyleri sıfırlamayacağı için her tıkladığımızda terminalde “Eylemi Başlat” metnini yazdıracağız.
Butonumuzun son haliyle birlikte uygulamamıza bir kez daha göz atalım.
İşte bu kadar! Artık Form yapısıyla ilgili neredeyse her şeyi biliyorsunuz! 🎊
Bu yazımızda yapmış olduğumuz projemize buradan ulaşabilirsiniz:
