UIKit: UISegmentedControl
UISegmentedControl elemanı sayesinde uygulamanıza bölümler ekleyerek bu bölümlere özel aksiyonlar gerçekleştirebilirsiniz.
Merhaba TurkishKit okuyucuları!👋 Uygulamanızda birden fazla duruma göre farklı aksiyonlar almak istiyorsanız, UISegmentedControl elemanı sizin için iyi bir seçenek olabilir. İşte bu yazımızda UISegmentedControl elemanını nasıl kullanabileceğimizi öğreneceğiz. Hazırsanız hiç vakit kaybetmeden başlayalım! 🦾
WWDC 2020 Haftasını Keşfedin!
TurkishKit Medium sayfamızda WWDC 2020 konferansı boyunca tanıtılan bütün yenilikleri blog serisi haline getirdik.
Sizde WWDC 2020 haftası boyunca tanıtılan yenilikleri keşfetmek istiyorsanız aşağıdaki linke tıklamanız yeterli:
Projenizi Oluşturun
Her şeyden önce yeni bir Xcode projesi oluşturalım. Bunun için “Create a new Xcode project” tuşuna tıklayalım.
Sonrasında projemizin nasıl olması gerektiğini belirlemek için “Single View App” şablonunu seçelim.
Son olarak proje ayarlarımızı yapalım. (“User Interface” bölümünün “Storyboard” olarak seçmeniz gerekiyor.)
Projemizi oluşturduktan sonra ViewController.swift dosyasına gidelim. Artık kod yazmaya başlayabiliriz!
Arayüz Elemanlarını Oluşturma
Bu makalemizde bir UISegmentedControl elemanınındaki durumların hangisinin seçili olduğuna göre farklı aksiyonlar alacağımız bir proje yapacağız; UISegmentedControl elemanımızda toplam beş durum olacak. Bu durumların değişimine göre uygulamanın içerisindeki yazı değişecektir.
Bunları yapabilmemiz için tabii ki de uygulamamızın içerisinde bulunacak arayüz elemanlarını oluşturmamız gerekmektedir. Bunun için Main.storyboard sayfasına gidin. Sayfa açıldıktan sonra UIViewController elemanınız içerisine bir UILabel elemanı yerleştirin.
Sıra bu UILabel elemanını konumlandırmakta. Elemanının üzerine iki parmağınızla basılı tutarak tıklayın ve elemanın dışında bir yere imlecinizi götürün. Ortaya çıkan bölümdeki “Center Horizontally in Safe Area” ve “Center Vertically in Safe Area” sekmelerine tıklayın. (İkisine birlikte tıklamak için cmd tuşuna basılı tutun.) Böylece elemanınız uygulamanın tam merkezinde hizalanacaktır.
Şimdi sıra UISegmentedControl elemanını uygulamamıza eklemekte. Bunun için yine UILabel elemanını eklediğimiz gibi UIViewController elemanımızın içerisine elemanımızı ekliyoruz.
İki elemanımız arasında mesafe koymak için UISegmentedControl elemanımıza tıklayıp “Add Constraints” butonuna tıklayalım. Bu butona tıkladıktan sonra önümüze çıkan bölümden elemanımızın yukarısında 50 piksellik bir boşluk olacağını belirtin.
Sonrasında elemanımıza iki parmakla basılı tutarak tıklayalım ve elemanımızın dışına bir yere sürükleyip bırakalım. Ortaya çıkan bölümden “Center Horizontally in Safe Area” sekmesine tıklayın.
Artık projemizi kodlamaya başlayabiliriz!
Kodlama
İlk önce arayüz elemanlarını yazacağımız kodlar ile kullanmak için bu arayüz elemanlarını kod sayfasına bağlamalıyız.
Bunun için sağ üstteki “Add Editor on Right” tuşuna tıklayalım. Göreceğiniz üzere, Main.storyboard sayfası sağ tarafa geçecektir. Sol taraftaki sayfayı ViewController.swift sayfası olarak ayarlayın.
UILabel elemanını sol taraftaki sayfaya bağlamak için UILabel elemanına çift tıklayın ve ikinci sayfaya sürükleyin. İmleci bıraktığınızda bir bölüm karşınıza gelecektir. Bu bölümde elemanınızın ismini girin. “Connect” tuşuna bastığınızda elemanınızı sayfaya bağlamış olacaksınız.
UISegmentedControl elemanını da aynı şekilde çift tıklayacağız ama diğerinden farklı olarak viewDidLoad fonksiyonunun altında tanımlayacağız. (Bunun sebebi, bu eleman ile bir aksiyon alacak olmamızdır.)
Şimdi, bu fonksiyonun içerisinde, elemanın aldığı farklı durumlara karşı farklı aksiyonlar almak için bir switch yapısı yazalım.
@IBAction func segmentedControlTapped(_ sender: UISegmentedControl) {
switch sender.selectedSegmentIndex {
case 0:
label.text = "iPhone"
case 1:
label.text = "iPad"
case 2:
label.text = "Mac"
case 3:
label.text = "Apple Watch"
case 4:
label.text = "Apple TV"
case 5:
break
}
}Uygulama ilk açıldığı zaman UISegmentedControl elemanımız ilk durum seçili olsa bile daha çalışmadığı için ekranda “Label” yazacaktır. (Bunu görmek için uygulamayı çalıştırabilirsiniz.) Bunun olmaması için viewDidLoad fonksiyonunun içerisinde UILabel elemanımızın yazısını “iPhone” olarak ayarlayalım.
override func viewDidLoad() {
super.viewDidLoad() label.text = "iPhone"
}
Artık projemiz hazır! Artık tek yapmanız gereken projenizi çalıştırmak ve yaptıklarınızı deneyimlemek. 😎
Bu makalemizde yapmış olduğumuz projemize buradan ulaşabilirsiniz:
Bir makalemizin daha sonuna geldik. Bu makalemizde UISegmentedControl elemanının ne olduğunu ve nasıl kullanılabileceğini öğrendik. Keyifli kodlamalar! 🧠
