UIKit: UIStepper

Tanıdık (+) ve (-) düğmeleri günlük hayatımızda sık sık karşımıza çıkmaktadır. UIStepper ile artan — azalan düğmeleri yapabilirsiniz.

Merhaba! 👋🏻 Yeni bir Swift ile UIKit yazısıyla karşınızdayız. Bugünkü konumuz, değerleri arttırmak/azaltmak için kullanılan UIStepper elementi. Eğer Swift ile UIKit serimizdeki önceki yazıyı henüz okumadıysanız okumanızı öneririm:

Swift ile UIKit | UISwitch

UIStepper Nedir?

iOS UIStepper

UIStepper, kullanıcının (+) ve (–) düğmeleriyle bir değeri arttırıp azaltmasını sağlayan görsel bir UIKit elementidir. Bu değer, elementin value özelliğinde saklanır.

UIStepper elementinin görüntüsü hem rengi değiştirilerek, hem de resimler eklenerek özelleştirilebilir.

Kullanım Alanları

UIStepper, birçok alışveriş uygulamasında kullanılan bir elementtir.

UIStepper’ın en yaygın kullanım alanı, alışveriş uygulamalarında sepetteki bir ürünün miktarını arttırıp azaltmaktır. Örneğin Yemeksepeti uygulamasında sepetinize bir pizza eklerken, adetini değiştirmek için bir tür UIStepper elementi kullanırsınız.

UIStepper elementinin değeri UISlider gibi kaydırmaktan ziyade düğmelere basarak arttırıldığından çoğunlukla küçük değerler için kullanılır (mesela söylediğiniz pizza sayısı — gerçi o biraz fazlaysa da problem olmaz 😉).

UIStepper Elementinin Özellikleri

UIStepper elementinin çalışma şeklini etkileyen altı farklı özelliği vardır:

• minimumValue: UIStepper elementinin alabileceği en küçük değerdir. (Varsayılan değeri 0'dır.)
• maximumValue: UIStepper elementinin alabileceği en büyük değerdir. (Varsayılan değeri 100'dür.)

Not: maximumValue için girdiğiniz değer, minimumValue değerinden büyük olmalıdır. Bu kurala uymayan yeni bir değer girerseniz, Xcode bu yeni değeri hem minimumValue değerine hem de maximumValue değerine atayacaktır.

• stepValue: UIStepper elementinin artma aralığıdır, yani değerinin her tıklamayla ne kadar artacağıdır. (Varsayılan değeri 1'dir.)
• autorepeat: Bool değeri alan bu özellik true değerini alırsa UIStepper elementinin değeri düğmeye basılı tuttuğunuz sürece artmaya devam eder. Eğer değeri false ise, UIStepper elementinin değerini düğmeye tekrar tekrar basıp bırakarak arttırırsınız. (Varsayılan değeri true’dur.)

UIStepper elementinin autorepeat özelliğinin görsel bir incelemesi

• continuous: Bu özellik true değerini alırsa, UIStepper elementinin değeri siz düğmeye bastıkça güncellenir. Eğer değer false ise, UIStepper elementinin değeri siz düğmeye basmayı bırakınca güncellenir. (Varsayılan değeri true’dur.)

UIStepper elementinin continuous özelliğinin görsel bir incelemesi

• wraps: Bu özellik true değerini alırsa, UIStepper elementi maximumValue değerine ulaştıktan sonra otomatik olarak minimumValue değerinden devam eder (örneğin 100'e vardığınızda arttırmaya devam ederseniz 0'dan yeniden başlarsınız). Aynısı tam tersi için de geçerlidir (0'dan azaltmaya devam ederseniz 100'den geri saymaya başlarsınız). Eğer değer false ise, UIStepper elementi maximumValue veya minimumValue değerine ulaştıktan sonra değişmez. Bunun yerine değeri manüel olarak “ters yöne” hareket ettirmeniz gereklidir. (Varsayılan değeri false’tır.)

UIStepper elementinin wraps özelliğinin görsel bir incelemesi

Bu altı özelliğin nasıl yapılandırılacağı, UIStepper elementinin uygulama içerisindeki amacına bağlıdır.

UIStepper Elementi Nasıl Kodlanır?

UIStepper elementi, hem kod üzerinden hem de Interface Builder üzerinden yaratılabilir. Örnek uygulamamızda elementi Interface Builder ekranından oluşturup sonrasında kodlayacağız.

UILabel ve UIStepper Elementlerini Ekrana Yerleştirme

Yeni bir Xcode projesi açarak Main.storyboard dosyasına girdikten sonra karşınızda her zamanki gibi boş bir ViewController bulacaksınız. İlk olarak Library menüsünden ekrana bir Label, bir de Stepper elementi ekliyoruz.

UIStepper Elementinin Özelliklerini Ayarlama

UIStepper elementinin hem görsel, hem de fonksiyonel özelliklerini Interface Builder menüsünden ayarlayabiliriz. Sağ taraftan Attributes Inspector menüsüne girerek, UIStepper elementinin tüm özelliklerini varsayılan değerlerde olduğunu kontrol ediyoruz.

Interface Builder’dan UIStepper elementinin özelliklerini belirledik.

Ayrıca yine Attributes Inspector menüsünden UIStepper elementimizin backgroundColor ve tintColor (yani çizgi rengini) ayarlayabiliriz. Örnek uygulamamızda arka plan rengini gri, tintColor özelliğini ise turuncu olarak ayarladık.

UIStepper ve UILabel Elementlerini Kodlama

İlk olarak Interface Builder ekranından yarattığımız görsel elementleri Outlet olarak koda bağlamalıyız. Örnek uygulamada UILabel elementini stepperValueLabel , UIStepper elementini ise stepper olarak tanımladık.

Interface Builder’dan yarattığımız elementleri outlet ile kodumuza bağlıyoruz.

stepperValueLabel ve stepper değişkenlerini tanımladıktan sonra kullanıcının UIStepper elementiyle etkileşimi hakkında bilgi alabilmek için bu elementi bir de Action olarak tanımlıyoruz. Bu fonksiyonun ismini stepperValueChangedolarak belirledik. (Type’tan UIStepper seçeneğini seçmeyi unutmayın!)

Bunu yaptıktan sonra karşımıza aşağıdaki gibi bir kod çıkacaktır. Bu fonksiyonun içerisinde stepper elementinin değeri değiştiğinde çalışacak olan kodu yazacağız:

UIStepper elementindeki değişiklikleri algılamak için IBAction tanımlamalıyız.

stepper elementinin değeri değiştiğinde, bu değişikliği stepperValueLabel elementimize yansıtmak istiyoruz. Bunun için aşağıdaki gibi stepperValueLabel elementinin text özelliğini değiştirmeliyiz:

UILabel elementini kullanarak UIStepper elementinin değerini ekrana yansıtıyoruz.

Şimdi bu kodumuzu biraz daha detaylı olarak inceleyelim. İlk olarak stepper.value satırıyla UIStepper elementinin içerisindeki değeri alıp stepperValue değişkeninde saklıyoruz.

Bu noktada aklımıza gelen bir soru var: Bu stepperValue değişkeninin tipi nedir? Apple’ın UIStepper hakkındaki dokümantasyonuna kısa bir bakış atarak, UIStepper elementlerinin value özelliklerinin Double, yani kesirli sayı olarak saklandığını görebiliriz. Eğer bu değerin kesirli kısmını atıp sadece tam sayı kısmını ekrana yazdırmak istersek, değeri Int(stepperValue) komutuyla Integer tipine çevirebiliriz.

Son olarak, stepperValue değerini ekrana yansıtmak için UILabel elementinin text özelliğini kullanıyoruz. Bu özelliğe atanan değer String tipinden olmalıdır. Bu nedenle öncelikle "\(Int(stepperValue))" komutuyla elimizdeki değeri String tipine çevirdik.

Bu kodları yazdıktan sonra uygulamamızı çalıştırırsak temelde çalıştığını, ancak uygulamayı ilk açtığımızda UILabel elementinde sayısal bir değer yerine varsayılan “Label” yazısının olduğunu görürüz. Bunu düzeltmek için önceden yazdığımız kodun aynısını, ekran ilk defa yüklenirken çağrılan viewDidLoad() metodumuzun içerisine ekliyoruz:

Artık uygulamayı ilk açtığımızda da karşımıza UIStepper elementinin değeri çıkacak.

Uygulamamız Bitti!

UIStepper elementini kullanan uygulamamızın son hali işte böyle gözüküyor. 💪🏻

UIStepper örnek uygulaması

Örnek uygulamayı kendiniz denemek istiyorsanız kaynak kodları GitHub üzerinden indirebilirsiniz:

TurkishKit/TurkishKit-UIStepper

Artık UIStepper elementinin temel özelliklerini ve çalışma mekanizmasını öğrenmiş bulunuyoruz. Yarattığımız basit örnekten yola çıkıp, kendi değişikliklerinizi yaparak siz de kolayca UIStepper elementini kendi iOS uygulamanızda kullanabilirsiniz. Keyifli kodlamalar! 💻

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

Twitter | Instagram | Facebook