Custom Button Tasarımı

Merhabalar, bu yazımda UIButton kullanmadan herhangi bir view’a istediğimiz görünümü vererek kendi butonumuzu tasarlayabileceğimizden bahsedeceğim.

Öncelikle UIControl sınıfını miras alan bir CustomButton sınıfı yaratalım.

 

Şimdi de butonumuzun alacağı şekli inceleyelim.

Butonumuza baktığımızda dikkatimizi çekmesi gereken birkaç nokta var. Öncelikle butonumuz bir arkaplan rengine ve biraz da corner radius’a sahip. Bunun dışında içerisinde de bir ikon ve ayrıca text barındırıyor. Bahsettiğimiz bu 4 özellik ve butonun ne iş yapacağı proje boyunca buton nerede kullanılırsa oraya özel olabileceği için 5 adet public özellik barındırması gerektiğini anlıyoruz.

Public Özellikler

  • Arkaplan rengi
  • Corner Radius
  • İkon
  • Text
  • Aksiyon

Şimdi bu 5 özelliği sınıfımıza ekleyelim.

Şimdi de belirttiğimiz özellikleri bize sunacak olan UI bileşenlerini belirleyelim. İkonumuzu bir UIImage nesnesinde, text’imizi de bir UILabel nesnesinde göstereceğiz. Onun dışındaki özelliklerimiz ise butonumuzun kendi özelliği olacak.

Ardından public özelliklerimiz setlendikleri zaman ne olmasını istediğimizi yazalım.

Sınıfımızın sahip olmasını istediğimiz özelliklerini belirttik. Şimdi sınıfımızın init fonksiyonlarını yazalım.

Ardından sınıfımız oluştuktan sonra almasını istediğimiz şekli verecek olan “setup” fonksiyonunu oluşturalım ve init metotlarımızdan çağıralım.

Sırada “Setup” fonksiyonu içerisinde yapacağımız işlemler var. Bunlar auto layout, nesnelerimizi özelleştirmek ve sınıfımıza bir gesture recognizer eklemek olacaktır.

Burada butonumuza tıklandığı zaman bizim butonumuzu kullandığımız yerden atadığımız aksiyonu yapmasını ve görünümlerin bir düzen içerisinde yerleşmesini sağladık.

Şimdi storyboard’dan bir UIView objesini ViewController’ımıza yerleştirelim.

Ardından View’ın sınıfına kendi oluşturduğumuz “CustomButton” sınıfını atayalım.

Storyboard’daki butonumuzu ViewController’a bağlayalım.

Son olarak buton nesnemizin didSet’inde gerekli olan public özellikleri verelim.

Butonumuza tıkladığımız zaman da “Join Wimbledon” yazısını log’a basacaktır.

Gördüğünüz gibi UIButton sınıfını kullanmadan istediğimiz butonu elde etmeyi başardık.

Öneriler:

“CustomButton” sınıfımıza margin’ler için public özellikler ekleyerek sayfa özelinde konumlandırmalar da yapabilir. Label için public bir alignment özelliği oluşturup yine istediğimiz yerden değiştirebiliriz.

Okuduğunuz için çok teşekkür ederim.

Bir cevap yazın