Swift: Custom Slider

0 802

Swift programlama dilinde base UI elemanlarını kullanarak, tasarımda bizden istenen custom componentleri kolayca geliştirebiliriz.
Örneğin aşağıdaki gibi bir Slider yapısını UISlider’dan türeterek yapmaya çalışalım.

UISlider İnceleme


UISlider yukarıdaki gibi bir iskelete sahiptir.
Thumb -> Değer ayarlamak için sürükleme işlemi yapan araç
Track -> Thumb’un üzerinde hareket ettiği, minimum ve maksimum noktaları boyunca uzanan çizgi
MinimumTrackColor -> Thumb ve minimum noktasında kalan track rengi
MaximumTrackColor -> Thumb ve maksimum noktasında kalan track rengi
MinimumImage -> Minimum noktasını belirten görsel
MaximumImage -> Maksimum noktasını belirten görsel

Eğer bizden iskelette yer alan nesnelerinin özelliklerini (renk, görsel) değiştirerek elde edilebilecek bir Slider istenirse yukarıdaki özellikleri kullanarak kolayca elde edebiliriz.

Fakat şu an bizim oluşturmak istediğimiz Slider biraz daha özel bir yapı, bunu da hep birlikte nasıl oluşturacağımızı görelim.

Custom Slider Yapımı

Öncelikle UISlider’dan miras alan ‘Slider’ adında bir class oluşturalım.

Ardından tint color’lar bizim işimizi görmeyeceği için görsel olarak ortadan kaldıralım.

Şimdi de Track nesnesini çizelim.
Bunu yapmak için bir layer oluşturup, Slider’ımızın sahip olduğu layer’a subLayer olarak ekleyeceğiz.

Not: Buradan sonra yapılacak tüm boyut ayarlamaları vb. işlemler tasarım ve isteğe göre değiştirilebilir.

Nereye kadar geldik bir bakalım.
Görüldüğü üzere Track’imiz hazır. Şimdi de Thumb’u oluşturalım.

Öncelikle aşağıdaki gibi bir ThumbView oluşturalım.

UISlider API’ı Thumb verebilmek için bizden bir view değil image istiyor. Bu nedenle oluşturacağımız ThumbView’ın snapshot’unu almak için aşağıdaki gibi bir extension yazıyoruz.

Sıra geldi Slider içerisinde thumb image’ı oluşturmaya.

Burada karşımıza çıkan setThumImage fonksiyonu bizden bir adet image ve o image’in hangi Slider durumunda görünmesi istediğimizi bekliyor. Yukarıdaki gibi sadece ‘.normal’ durumu için bir geliştirme yaparsak aşağıdaki videoda olduğu gibi bir görünüm elde ederiz.

Bu nedenle bütün state’ler için thumb image ayarlamasını yapıyoruz.

Görüldüğü üzere artık her state için istediğimiz thumb image’i görebiliyoruz.

Şimdi de thumb image’in solunu yani slider üzerinden seçili kısmı örneğimizdeki gibi gradient bir görünüme kavuşturalım.

Bunun için öncelikle bir gradient layer objesini class düzeyinde yaratıyoruz.
Ardından tıpkı base layer’da yaptığımız gibi özelliklerini verip, layer’a ekliyoruz.

Şimdi de track layer’ın konum ve boyut bilgilerini slider aksiyonuna göre ayarlayalım.

Bunu yapabilmek için öncelikle kullanıcının aksiyonlarını algılayabilmemiz gerekir. Bu sebeple slider’ımıza aksiyonları tanıması için bir target ve fonksiyon ekleyeceğiz.

“valueChanged” fonksiyonumuzun içini dolduralım.

Burada öncelikle thumb image’imizin o anki konumunu öğreniyoruz. Bu bilgi ile track layer’ımızın sahip olacağı genişlik değerini elde etmiş oluyoruz.
Devamında elde edilen genişlik değeriyle beraber track layer’ın frame’ini oluşturuyoruz. Buradaki “y” ve “height” değerleri tercih ve tasarıma göre değişebilir.

Şimdi ne durumdayız bir bakalım.

Track layer’ımızın beklediğimiz gibi çizilmeye başladı ama bir sorunumuz var. Track layer bizim hareketlerimize sürekli geç tepki veriyor GİBİ! Aslında öyle değil, frame değişikliği ani olmak yerine bir transaction action altında animasyon ile gerçekleştiği için böyle göze hoş gelmeyen bir görüntü ortaya çıkıyor.
Şimdi bunu çözelim.

Geldiğimiz son noktada hedefimize ulaştık. Zaman ayırdığınız için teşekkür ederim, faydalı olması dileğiyle.

Email adresiniz yayınlanmayacaktır.