UIKit: UISlider

UISlider bir değer aralığından tek bir değer seçmek için kullanılan bir UI elemanıdır.

Merhaba TurkishKit okuyucuları, yeni bir UIKit makalesi ile karşınızdayız! Bugünkü konumuz UISlider.

UISlider Nedir?

UISlider zincirleme bir değer aralığından tek bir değer seçmek için kullanılan görsel bir UI elemanıdır.

Genel Bakış

Bir UISlider elementi üzerinde parmağınızı kaydırdığınızda üzerindeki minimum ve maksimum aralığında istediğiniz değeri elde edebilirsiniz.

Kullanım Alanları

UISlider elementinin kullanım alanları oldukça fazladır. Örneğin yazı boyutu ayarlamada, müzik uygulamarında ses seviyesi kontrolünde ve renk paletlerinde RGB aralığı ayarlamada kullanılır.

UISlider Yapısı

Thumb: Kullanıcıyla etkileşimin bulunduğu bölüm.

Track: Slider üzerinde zincirleme değerlerin sıralandığı yol.

Minimum Image: UISlider elementinin minimum değer aldığını belirtmek için kullanılan image(isteğe bağlı).

Maximum Image: UISlider elementinin maximum değer aldığını belirtmek için kullanılan image(isteğe bağlı).

Kodlama Zamanı

UILabel ve UISlider elementlerini bağlıyoruz.

UISlider elementini hem IBAction hem de IBOutlet olarak tanımlıyoruz.

import UIKit
class ViewController: UIViewController {
    // MARK: - UI Elements
    @IBOutlet weak var valueLabel: UILabel!
    @IBOutlet weak var slider: UISlider!
    // MARK: - Life Cycle
    override func viewDidLoad() {
    }
    // MARK: - Actions
    @IBAction func sliderMoved(_ sender: UISlider) {
    }
}

UISlider elementini neden IBOutlet olarak tanımladık? 🤨

UISlider elementinin ‘value’ değerine ulaşmak için IBOutlet olarak tanımladık.

UISlider elementini neden IBAction olarak tanımladık? 🤔

UISlider elementi kullanıcı ile etkileşime giren bir yapıya sahiptir. Kullanıcının UISlider üzerinde yaptığı hareketleri almak için IBAction olarak tanımladık.

UISlider elementinin ayarlarına göz atalım.

UISlider elementinin üzerine tıklayıp “Show the Attributes inspector” sekmesini açalım.

Value: Kullanıcının UISlider ile karşılaşıcağı ilk değerdir.

Minimum: UISlider elementinin minimum value değeridir.

Maximum: UISlider elementinin maximum value değeridir.

Value değeri: 50

Value değeri: 1

Maximum, Minimum ve Value değerlerini ayarladığımıza göre artık UISlider elemanının anlık değerini UILabel elemanında gösterelim. 😉

import UIKit
class ViewController: UIViewController {
    // MARK: - UI Elements
    @IBOutlet weak var valueLabel: UILabel!
    @IBOutlet weak var slider: UISlider!
    // MARK: - Life Cycle 
    override func viewDidLoad() {
    }
    // MARK: - Actions
    @IBAction func sliderMoved(_ sender: UISlider) {
        valueLabel.text = "\(slider.value)"
    }
}

"\(slider.value)"— Bu gösterim, değerimizi String türünden bir değer haline getirmemizi sağlar.

String(slider.value)— Bu gösterimin yukarıdaki gösterim ile arasında hiçbir fark yoktur.

İşte bu kadar basit. 😉 Anlık olarak UISlider üzerindeki parmak hareketlerini tanımlamış olduğumuz UILabel elementine aktarıyoruz.

Sayıyı neden String türüne çevirdik? 🤔

Ekranda okuduğumuz tüm değerler String türündedir. Int, Double, Float… ne olursa olsun, eğer bu tür veriler ekranda kullanıcıya gösterilecekse mutlaka String türüne dönüştürülmelidir.

class ViewController: UIViewController {
    // ...
    // MARK: - Actions
    @IBAction func sliderMoved(_ sender: UISlider) {
        valueLabel.text = "\(Int(slider.value))"
    }
}

"\(Int(slider.value))" ile slider.value değerini önce Int türüne ve sonrasında da String türüne çeviriyoruz. Matematikte olduğu gibi işlem iç parantezden başlar ve dışa doğru gerçekleşir.

Uygulamamızı ilk açtığımızda UILabel elemanının text özelliğinde ne tanımlıysa o gözükür.

Hatırlarsanız ilk başta UISlider elementinin “Value” değişkenine bir değer vermiştik.

Uygulamamız ilk açıldığında “Value” değerini tanımladığımız UILabel elemanına atalım.

class ViewController: UIViewController {
    // ...
    // MARK: - Life Cycle 
    override func viewDidLoad() {
        valueLabel.text = "\(Int(slider.value))" 
    }
}

viewDidLoad fonksiyonu uygulamamızın arayüz elemanları yüklendikten sonra çalışır ve gerçekleşek olan işlemleri yapmakla sorumludur.

Uygulamamızın arayüz elemanları yüklendikten sonra UISlider elemanının değerini alacak ve UILabel elemanına yazacak.

Projenizi siz de çalıştırıp test edebilirsiniz.

Bu yazımızda UIKit Kütüphanesinin bir elemanını daha işledik. Bir sonraki yazımızda UISlider elementimizi yakışıklı hale getireceğiz. 😎

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz.

Twitter | Instagram | Facebook