UIKit: UIPickerView
Kullanıcınızdan sadece istediğiniz değerleri seçmesini mi istiyorsunuz? UIPickerView ile bunu yapabilirsiniz!
Merhaba TurkishKit okuyucuları. Bu yazımızda sizlerle Apple’ın 2008 yılında tanıtmış olduğu UIPickerView elementine bir giriş yapacağız.
UIPickerView Nedir?
UIPickerView, aynı çoktan seçmeli sorular gibidir; yapmanız gereken tek şey, içindeki seçeneklerden birini seçmektir. Bu sayede, uygulamanızın kullanıcılarını sadece istenilen verileri (istenilen şekilde) girmesini garanti altına almış olursunuz.
Kullanım Alanları
PickerView elementini birçok alanda kullanıldığını görmek mümkündür. Büyük bir ihtimalle, size cinsiyetinizi soran bir uygulama ile karşılaşmışsınızdır ve büyük bir ihtimalle o uygulamanın o bölümünde sizi “Mr.”, “Ms.” gibi seçenekler barındıran bir PickerView karşılamıştır.
PickerView elementinin ne olduğunu öğrendiğimize göre, artık onunla birlikte bir uygulama geliştirebiliriz!
Hadi Kodlayalım
Bu yazımızda yapacağımız uygulama, sadece PickerView elementine girilen değerleri yazan basit bir uygulama olacak.
Uygulamamızı yapmaya, bir “Single View App” yaratarak başlayalım.
İlk yapacağımız iş, “Main.storyboard” sayfamızdan View Controller elementimize bir UILabel ve bir UIPickerView eklemek.
Tabii ki bu elementleri kod sayfamıza bağlamamız gerekiyor.
Elementlerimizi bağladığımıza göre artık gerçekten kodlamaya geçebiliriz.
PickerView elementimizi kurmadan önce, PickerView elementinde kullanılacak değerleri bir Array (dizi) içerisinde tanımlayalım.
let source = ["iPhone", "iPad", "Mac", "Apple Watch", "Apple TV", "iPod"]Artık PickerView elementinin kurulumuna geçebiliriz. Açıkçası, bu kısım tıpkı TableView ya da CollectionView elementlerinin kurulumuna çok benziyor. Tıpkı onlarda olduğu gibi PickerView elementininde “Delegate” ve “DataSource” elementlerini çağırıyoruz ve kendisinin (ve bileşenlerinin) ne kadar gösterileceği gibi bilgileri giriyoruz.
import UIKitclass ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
@IBOutlet weak var label: UILabel!
@IBOutlet weak var pickerView: UIPickerView!
let source = ["iPhone", "iPad", "Mac", "Apple Watch", "Apple TV", "iPod"]
override func viewDidLoad() {
super.viewDidLoad()
pickerView.delegate = self
pickerView.dataSource = self
}
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return source.count
}
}
- numberOfComponents: Kaç tane PickerView kullanacağımızı yazmak için.
- numberOfRowsInComponent: PickerView elementimizin içinde kaç tane bileşen olacağını yazmak için.
Ayrıca, “pickerView.delegate = self” ve “pickerView.datasource = self” eşitliklerini yazmadan PickerView elementinizi çalıştıramazsınız. Aslında, bu eşitlikleri yazmadan da aynı işi “Main.storyboard” üzerinden birkaç kaydırma ile yapabilirsiniz. Yapacağımız tek şey, PickerView elementine iki parmakla bastırarak View Controller elementimizin tepesindeki sembolüne bırakıp “delegate” ve “dataSource” butonlarına basmak.
Her neyse. İşte, bu şekilde PickerView elementimiz çalıştırabiliriz.
Ama gördüğünüz üzere, dizimizde yazılan değerler çıkmıyor! Bu sorunu çözmek için ekstra bir fonksiyon daha kullanacağız: “titleForRow”!
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return source[row]
}Bu fonksiyonu ekledikten sonra, PickerView elementimiz düzgün bir şekilde çalışacaktır.
Artık yapacak tek bir işimiz kaldı: PickerView elementimizde seçili olan değeri Label elementine yazdırmak. Bunun için de ekstra bir fonksiyon daha kullanacağız: “didSelectRow”!
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
label.text = source[row]
}Daha önce TableView ya da CollectionView elementleri ile alakalı bilgi sahibi olanlar bilir, bu tarz elementlerin içindeki bileşenlere ulaşmak için row veya section kullanırız. Üstte gördüğünüz üzere, biz o bileşenlere ulaşmak için row kullandık. Bunun sebebi, her bir bileşenin bir row ile tanımlanmış olmasıdır (örneğin, “iPad” birinci row değeridir). Yani anlayacağınız, bu fonksyion bize, PickerView elementinde hangi bileşen seçiliyse o bileşenin değerini Label elementine yazdır, diyor.
Yalnız, fark edeceğiniz üzere, ilk başta Label elementimiz bir değer almadığı için “Main.storyboard” sayfasında yazdığımız şekliyle kalıyor. Bunun olmaması için, “viewDidLoad” fonksiyonumuzda Label elementimize dizimizin sıfırıncı değerini verebiliriz ve böylece Label elementimiz sırıtmaz. (Tabii ki bu o kadar da önemli bir şey değil.)
override func viewDidLoad() {
super.viewDidLoad() label.text = source[0]
}
Gördüğünüz üzere, artık her şey düzgün çalışıyor!
Böylece bu yazının da sonuna gelmiş bulunuyoruz. Bu yazıda yapmış olduğumuz projemize buradan ulaşabilirsiniz:
Bir yazımızın daha sonuna geldik. Bu yazımızda UIPickerView elementine bir giriş yaptık. İleriki yazılarımızda bu konuya daha derinlemesine gireceğiz. Keyifli kodlamalar! 🤟
Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.
Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.
