SwiftUI: TextField
TextField kullanıcının bir metin girmesi için kullanılan UI elemanıdır. Bu UI elemanını SwiftUI ile nasıl kullanacağız hep birlikte görelim.
TextField elemanına eminim hepiniz UIKit kütüphanesinden aşikarsınızdır. SwiftUI dilinde bu elamanı nasıl kullanacağız hadi bunu öğrenelim.
Kodlamaya Başlayalım
Yeni bir proje açarak işe koyulalım.
Command + Shift + L ile Nesne kütüphanemizi açalım ve TextField nesnemizi kod ekranımıza sürükleyip bırakalım.
Değişken Oluşturma
TextField nesnesine girilen değerleri tutabileceğimiz bir değişken oluşturalım. Oluşturduğumuz değişkeni TextField nesnesi üzerinde tanımlayalım.
@State kelimesini kullanarak text adında bir değişken oluşturduk. Bu değişken TextField nesnesine girdiğimiz her veriyi tutacak. Peki bunu nasıl anlayacağız ?
Text Nesnesi Ekleme
Tekrar nesne kütüphanemizi açalım ve Text nesnemizi kod ekranımıza sürükleyip bırakalım ama bunu VStack içerisinde yapmalıyız.
Klavyemizden Command tuşuna basılı tutarak TextField nesnesinin üzerine tıkladığınız zaman popup menünün açıldığını göreceksiniz. Bu menüden VStack’i seçelim. Daha sonra kod bloğumuzu aşağıdaki gibi oluşturalım.
VStack {
Text(text)
TextField(“Placeholder”, text: $text)
}TextField nesnemizi biraz belirginleştirelim.
VStack {
Text(text)
TextField(“Placeholder”, text: $text)
.padding()
.background(Color.black.opacity(0.1))
.cornerRadius(15)
.padding()
}
Uygulamamızı çalıştıralım ve TextField nesnemize bir şeyler yazalım.
PreviewView ekranımızın üzerinde bulunan play butonu ile uygulamamızı başlatalım.
Farkettiyseniz siz TextField nesnesine değer girmeye başladığınız andan itibaren Text elemanı değişiyor. Bu @State kelimesi ile sağlanıyor. her yeni bir değer atandığında bağlı olduğu nesneyi tekrar yeniliyor ve ekrana basıyor.
TextField nesnesinin içerik türünü belirleyebilirsiniz. Nasıl mı ? .textContentType() fonksiyonu ile TextField nesnesinin içersine gelecek olan verinin türünü belirleyebilirsiniz.
VStack {
Text(text)
TextField(“Placeholder”, text: $text)
.textContentType(.password)
.padding()
.background(Color.black.opacity(0.1))
.cornerRadius(15)
.padding()
}Hatta cihazınızın klavye türünü bile değiştirebilirsiniz. Örneğin sadece numara girilecek bir TextField nesneniz varsa klavyenizde sadece rakamları gösterebilirsiniz. Bunu yapmak için keyboardType() fonksiyonunu kullanmalısınız.
VStack {
Text(text)
TextField(“Placeholder”, text: $text)
.textContentType(.password)
.keyboardType(.numberPad)
.padding()
.background(Color.black.opacity(0.1))
.cornerRadius(15)
.padding()
}TextField nesnesi içerisindeki “Placeholder” yazan yeri dilediğiniz gibi değiştirebilirsiniz.
Parola girebileceğimiz bir nesne daha ekleyelim.
SecureField
Command + Shift + L ile tekrar nesne kütüphaneimizi açalım ve oradan SecureField nesnesini kod ekranımıza sürükleyip bırakalım.
VStack {
Text(text)
TextField(“Placeholder”, text: $text)
.textContentType(.password)
.keyboardType(.numberPad)
.padding()
.background(Color.black.opacity(0.1))
.cornerRadius(15)
.padding()
SecureField("Şifre", text: Value)
}Bu sefer SecureField nesnesinin değerlerini tutabileceğimiz bir değişken oluşturalım.
@State var sifre: String = “”Değişkenimizi oluşturduktan sonra bu değişkeni SecureField nesnesinin text parametresine yazalım.
SecureField(“Şifre”, text: $sifre)SecureField nesnesimizi şekillendirelim.
VStack {
Text(text)
TextField(“Placeholder”, text: $text)
.textContentType(.password)
.keyboardType(.numberPad)
.padding()
.background(Color.black.opacity(0.1))
.cornerRadius(15)
.padding() SecureField(“Şifre”, text: $sifre)
.padding()
.background(Color.black.opacity(0.1))
.cornerRadius(15)
.padding()
}
SecureField nesnemizide şekillendirdiğimize göre uygulamamızı çalıştıralım.
Uygulama Testi
Uygulamamız düzgün çalışıyor. Bu makalede TextField nesnesinin kullanımını işledik. TexField nesnesinin içerisine girilecek olan nesnenin türünü belirledik ve klavyemizin de türünü belirledik. Bir makalemizin daha sonuna geldik.
Aşağıdaki linkten projeyi indirebilirsiniz. İyi çalışmalar dilerim. 🙂
