IBInspectable, IBDesignable

Projede bir arayüzü yönetirken kullanacağınız nesnelerin standart bir yapıda olması, farklı projelerde kullanılabilecek şekilde hazırlanması önemlidir. Bir örnekle konuşalım.

XCode içerisinde RadioButton veya Checkbox benzeri kontroller yok maalesef. Fakat UIButton’ı düzenleyerek ve birazda kod yazarak bu işlevi kazandırma şansınız var. Siz şayet bu düzenlemeleri standart bir UIButton üzerinde yaparsanız, farklı bir ekranda veya farklı bir projede tekrar tekrar bir iş yükünüz olacaktır. Bu iş yükü yazdığınız kodu tekrar kopyalamak kadar kısa da görünebilir. Fakat kopyala/yapıştır, sonra çalıştır, sonra bir test et bakalım ki belki eksik/yanlış yapıştırmışsındır. Yani demek istediğim kopyala, yapıştır bile yapsan bu bir ekstra, gereksiz ve zahmetli bir iştir. Bunun yerine UIButton’dan türeyen bir CheckBoxButton nesnesi oluştursanız ve her projede bu nesneyi kullansanız daha şık olur. İşte buna benzer birçok durum gereği arayüzde kullandığınız nesnelerin aslında kendi oluşturduğunuz nesneler olmasını başka fırsatlarda da dile getirdim.

Bu noktada şöyle bir ihtiyaç çıkıyor karşımıza. Keşke Storyboard üzerinden bir view seçip arka plan rengini değiştirebildiğim gibi, kendime ait parametreler oluştrurup tasarım yaparken storyboard’dan düzenleyebilsem. Bunu yapabilmek için IBInspectable ve IBDesignable attribute’lerini kullanıyoruz.

Belki kullanmışsınızdır, XCode içerisinde güzel bir özellik var. Mesela bir UIView’ın köşelerini yuvarlamak için kullandığımız layer.cornerRadius property’sini değiştirmek için illa ki bir IBOutlet ekleyip, .swift dosyası içerisine kod yazmanıza gerek yok. StoryBoard üzerinde bulunan “User Defined Runtime Attributes” üzerinden de key/value şeklindeki düzenlemeleri yapmanız mümkün.

Fakat burada otomatik tamamlama (autocomplete) gibi özellikler çalışmadığı için veya hatalı yazsanız da farkedemediğiniz için biraz sıkıntılıydı. IBInspectable bu sorunu çözmektedir. Yine cornerRadius örneğinden ilerleyelim. Bir UIView’in köşelerini yuvarlamayı storyboard üzerinden yapmak istiyoranız yukarıda bahsettiğim gibi MyView : UIView şeklinde kendi MyView nesnenizi oluşturup IBInspectable tanımlamasını onun içinde yapabilirsiniz. Veya alternatif olarak UIView için extension yazarak oluşturabilirsiniz.

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = true
        }
    }
}

Bu extension sonrasında ekrana bıraktığınız UIView nesnesi için cornerRadius property’sini kullanabilirsiniz. İsimlendirmeyi CamelCase formatı üzerinden XCode değiştirecektir. cornerRadius = “Corner Radius” şeklinde


IBDesignable,
IBInspectable’ın bir tamamlayıcısı olarak görebilirsiniz. IBInspectable property’ler için, IBDesignable ise nesne için kullanacağınız attribute’dür. Interface Builder’a nesnenin design edilebilir bir nesne olduğunu belirtir ve sonuç olarak siz storyboard üzerinde bir değeri değiştirdikten sonra sonuç görüntünün storyboard’a tasarım aşamasında yansımasını sağlar. Bunu denemek için uygulamaya MyView isminde UIView’den türeyen bir nesne ekleyelim ve aşağıdaki hale getirelim.

@IBDesignable
class MyView: UIView {
        @IBInspectable var cornerRadius: CGFloat {
            get {
                return layer.cornerRadius
            }
            set {
                layer.cornerRadius = newValue
                layer.masksToBounds = true
            }
        }
}
  1. adım olarak StoryBoard’a eklediğiniz view’in class’ını MyView olarak değiştiriniz

 

Attributes Inspector penceresine geçtiğiniz zaman yine Corner Radius property’sini göreceksiniz. Bu değeri değiştirdikçe MyView nesnenizin de yenilendiğini gözlemleyebilirsiniz. İşte bunu IBDesignable attritube’üne borçluyuz.:)

Arayüz nesneleri için kendi kütüphanelerinizi oluştururken, uygulama içinde ne gibi özelliklere ihtiyaç duyabileceğinizi düşünerek IBInspectable’larınızı hazırlamanız çok işinize yarayacaktır.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Bu yazıyı beğendiyseniz daha fazla kişiye ulaşmasını sağlamak için paylaşabilirsiniz.

Leave a reply