UIKit: IBDesignable
IBDesignable özelliğini kullanarak nesneler üzerinde yaptığımız değişiklikleri uygulamamızı çalıştırmadan anında görüntülemeyi öğrenelim.
Merhaba sevgili TurkishKit okuyucuları!👋🏼 Bugün sizlerle IBDesignable özelliğini kullanarak nesneler üzerinde yaptığımız değişiklikleri uygulamamızı çalıştırmadan anında görüntülemeyi öğreneceğiz. Hazırsanız hemen başlayalım!🤗
Yazı Önerisi 😍
Makalemize başlamadan önce Apple’ın arttırılmış gerçeklik kütüphanesi olan ARKit ile uygulamalar yapmayı öğreneceğiniz ARKit serimize buraya tıklayarak ulaşabilirsiniz.
IBDesignable nedir?🧐
Uygulamanızın tasarım aşamasındayken storyboard üzerinde bir değeri değiştirdikten sonra bu değişimi görüntüleyebilmek için uygulamanızı çalıştırmanız gerekir. Maalesef bu ayrıntılı bir tasarım üzerinde çalışıyorsanız yorucu ve zaman alıcı bir hale gelebilir. Ancak Xcode 6 ile birlikte Apple, geliştiricilerin hayatını kolaylaştıracak olan IBDesignable ve IBInspectable özelliklerini tanıttı. IBDesignable, geliştiricilerin “Interface Builder” üzerinden yaptıkları değişiklikleri anında görebilmelerini ve tasarımlarını buna göre kolaylıkla değiştirebilmelerini sağlıyor. Eğer siz de uygulamanızı daha hızlı ve verimli bir şekilde tasarlamak/kodlamak istiyorsanız bu özellik tam size göre!🤩
Kodlayalım
Tabii ki yeni bir Xcode projesi oluşturarak kodlamaya başlıyoruz. Xcode uygulamasını açıyoruz “Create a new project” ve ardından “Single View App” seçeneklerine tıklıyoruz. Sonrasında ise “User Interface” bölümündeki “Storyboard” kısmını seçiyoruz. Projemizi oluşturduk. Artık IBDesignable özelliğini keşfetmeye geçebiliriz!🚀
Şimdi ise main.storyboard dosyasını açıyoruz ve bir “UI” elemanı oluşturuyoruz. Örneğin ben “ViewController” ekranına bir “Button” elemanı ekliyorum ancak tabii ki siz istediğiniz herhangi bir elemanı kullanabilirsiniz. Elemanımızın üzerinde yapacağımız değişiklikleri daha kolay görebilmek için de “Button” elemanımızın rengini “AttributesInspector” menüsünden siyah olarak değiştirelim.
IBDesignable özelliğini bir nesnede kullanabilmek için storyboard dosyamıza eklediğimiz eleman için bir sınıf oluşturmamız gerekiyor. Hadi gelin bu sınıfı oluşturalım.
“ViewController” ekranındaki elemanımızı bir sınıfa bağlamak için File>New>File…>Cocoa Touch Class adımlarını takip ederek “ViewController” ekranına eklediğimiz “Button” elemanını temsil edecek “CustomButton” isimli bir sınıf oluşturalım.
Şimdi ise kodlama zamanı!😜 Bunun için ilk olarak az önce oluşturduğumuz “CustomButton” sınıfına geliyoruz. Göreceğiniz üzere bizim için UIButton türünde olan bir “CustomButton” sınıfı otomatik olarak oluşturulmuş.
Peki main.storyboard dosyasına eklediğimiz “Button” elemanını nasıl bu “CustomButton” sınıfı ile bağlayabiliriz?🤔 Bunun için tek yapmamız gereken main.storyboard dosyasına gitmek ve “Button” elemanını seçmek. Daha sonra ise “ClassInspector” menüsündeki “Class” bölümünü CustomButton olarak tanımlamak. Unutmayın burada belirlediğiniz “Class” ismi az önce oluşturduğumuz Swift dosyasının ismiyle aynı olmalıdır, böylece “Button” elemanımızı Swift dosyasında oluşturduğumuz sınıf değeriyle kontrol edebiliriz.
Sıra heyecanla beklediğimiz ana geldi: IBDesignable özelliğini kullanmaya!🙌🏼 Bunun için tekrardan CustomButton.swift dosyasına gidiyoruz ve “CustomButton” sınıf değerimizin önüne @IBDesignable anahtar kelimesini veriyoruz.
IBInspectable ile de elemanlarımız üzerindeki kontrolümüzü bir adım ileriye taşıyacağız. Ama önce gelin IBInspectable özelliğini tanıyalım!
IBInspectable nedir? 🧐
IBInspectable oluşturduğunuz bir elemanın özelliklerini “Interface Builder”da değiştirmeniz için size kişileştirilmiş bir seçim şansı tanır. Elemanınızın özelliklerini tanımlarken @IBInspectable anahtar kelimesini kullanırsanız bu özellik “Interface Builder” sayfasında bulunan “AttributesInspector” kısmına bir parametre olarak gelir. Böylece uygulamanızda sürekli olarak kullanacağınız nesneleri çok daha kolay bir şekilde kişileştirebilirsiniz!😉
Örneğin diyelim ki “Button” elemanının sınır rengi üzerinde IBInspectable özelliğini kullanmak istiyoruz. Bunun için ilk olarak “Button” elemanımızın sınır rengini temsil edecek borderColor adında bir değişken tanımlayalım. Siz farklı bir özellik (sınır kalınlığı veya köşe yarıçapları gibi) üzerinden de gidebilirsiniz ancak ben örnek olsun diye IBInspectable özelliğini bir renk değerinde kullanacağım.
Şimdi ise tek yapmamız gereken @IBInspectable anahtar kelimesini borderColor değişkenin önüne koymak. Değişkenimizi UIColor.black olarak ayarlayarak borderColor değerinin değiştirilmeden önce siyah renkte görünmesini sağlıyoruz.
Ancak bu özelliğin “Interface Builder” üzerinden değiştirilebilir olmasını istiyoruz. Bunu nasıl yapabiliriz? Tek yapmamız gereken borderColor değişkeninin içinde bir didSet fonksiyonu tanımlamak. Fonksiyonumuzun içerisinde self.layer.borderColor değerini borderColor.cgColor olarak tanımlıyoruz. Bu fonksiyon sayesinde borderColor değişkeni değiştirildiğinde elemanımızın ilişkili özelliği de değişime göre güncellenecek. Yaptığımız örnekte bu değişim elemanımızın sınır rengi üzerinden olacak.
Sıra IBDesignable ve IBInspectable özelliklerini kullanarak elemanımıza kazandırdığımız özellikleri test etmeye geldi! 🥳 Bunun için main.storyboard dosyasındaki “AttributesInspector” menüsüne gidiyoruz. Burada borderColor özelliğini seçebilir ve elemanınızdaki değişikliği gözlemleyebilirsiniz. Örneğin borderColor değişkenini menüden herhangi bir renk olarak seçtiğimizde (ben örnek olarak maviyi seçiyorum), “Button” elemanımızın sınır renginin siyahtan maviye değiştiğini anında görebiliriz!
Makalemizin sonuna geldik! Birlikte IBDesignable ile IBInspectable özelliklerini kullanarak uygulamamızdaki elemanları kişileştirmemizi sağlayacak özellikler eklemeyi ve nesneler üzerinde yaptığımız değişimleri anında görmeyi öğrendik. Şimdi siz de uygulamanızdaki nesneleri daha hızlı ve etkili bir şekilde kodlayıp tasarlayabilirsiniz!🤩 Keyifli kodlamar dilerim!😋
