Storyboard’da tasarlanabilen özel TextField oluşturma

Selamlar

Bir önceki yazımda IBInspectable ile Apple’ın bizim için hazırladığı view’lere yeni özellikler kazandırmıştık. Ancak burada bir sorun vardı. Yazdığımız kodların sonucu sadece çalışma anında görülebiliyordu. Peki ya çok karmaşık bir özellik ekliyorsak? o zaman sürekli değiştirerek simulatör de test etmemiz gerekiyor.

Bu konuda Apple sesimizi duymuş olacak ki bizim için IBDesignable diye bir özellik getirdi Xcode 6 ile beraber. Bu özellik sayesinde hazırladığımız özel view’ı tasarım zamanında ne durumda olduğunu görebiliyor. Özelliklerini istediğimiz gibi değiştirip istediğimizi sonucu alabiliyoruz.

Gelin isterseniz bir  örnekle IBDesignable’ın nasıl kullanıldığını görelim.

Tasarımcımız uygulamanın tasarımını yaparken haklı olarak uygulamanın içine güzel bir TextField koydu öyle ki soldan ve sağdan 10 px lik padding, 5px lik corner radius birde bunlar yemiyormuş gibi 1px lik border koymuş. Bunları storyboard’da kolay kolay yapamıyoruz malesef, ancak kodla yapabiliyoruz. O zaman öncelikle kendi TextField clasımızı geliştirerek Storyboard’dan tasarım yapabilir hale getirelim. Bunun için UITextField classından türeyen myTextField isimli bir class oluşturalım. (İsmi şimdilik salladım, burada daha güzel bir isim yazılmalıdır.)

 

import UIKit
@IBDesignable
class myTextField: UITextField {
@IBInspectable var leftPadding : CGFloat {
get {
if let left = self.leftView {
return left.frame.width
}
return 0
}
set  {
let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: self.frame.height))
self.leftView = paddingView
self.leftViewMode = UITextFieldViewMode.always
}
}
@IBInspectable var rightPadding : CGFloat {
get {
if let right = self.rightView {
return right.frame.width
}
return 0
}
set {
let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: self.frame.height))
self.rightView = paddingView
self.rightViewMode = UITextFieldViewMode.always
}
}
@IBInspectable var borderColor : UIColor {
get {
return UIColor(cgColor: layer.borderColor!)
}
set {
layer.borderColor = newValue.cgColor
}
}
@IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}
@IBInspectable var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}
}

 

Koddan da göründüğü gibi clasın en başına @IBDesignable ekledik. Böylece Xcode bunu görerek view’i canlı olarak render edecek. Aslında geri kalanı bir önceki yazımda anlattığım ile aynı tek farkımız designable özelliğini tanıyarak yeni bir TextField oluşturmak oldu. Son olarak storyboard’da view controller’ın içine eklediğimiz TextField’in class’ını Identitiy Inspector alanından myTextField olarak belirliyoruz.

Hadi sonuçları inceleyelim:

TextField’i ilk eklediğimizde storybard’da aşağıdaki gibi görünüyordu:

Attributes Inspector alanına baktığımıza ise bu TextField için yeni özelliklerin geldiğini görüyoruz:

O zaman aşağıdaki gibi özellikleri değiştirmeyi deneyelim:

Her özelliği değiştirdiğimizde view’in değiştiğini göreceksiniz. Üstteki ayarlara göre sonuç aşağıdaki gibi olmaktadır:

 

Bu özelliği her türlü custom view oluşturmada kullanabilirsiniz. İlla default olarak gelen view’leri kullanmak zorunda değilsiniz.

Bir sonraki yazımda bununla ilgili bir örnek daha yapacağım.

 

Mutlu kodlar…

Storyboard’da Corner Radius ve Border İşlemleri

Selamlar;

Bildiğimiz gibi storyboard’da bir view’e corner radius vermek istediğimizde yada border vermek istediğimizde bunu “User Defined Runtime Attributes” den yapmaya çalışıyoruz. Ancak bu kısım çok fazla gelişmemiş olduğu için yeteri kadar verim alamıyoruz.

Araştırmalarım sonucunda bu konuyu bazı üstadların güzel bir yaklaşımı ile çözdüğünü gördüm. Şöyle ki UIView’e bir extension yazsak. Extension’ın da içine @IBInspectable ile nitelendirilen property’ler yazsak bu istediğimizi artık her view için kolaylıkla yapabiliriz.

Gelin yeni bir dosya oluşturalım ve sonuçları beraber görelim. File > New File diyerek “UIViewExtension.swift” adında bir dosya oluşturalım ve içerisini aşağıdaki gibi doldurmaya başlayalım.

import UIKit
extension UIView {
@IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}
@IBInspectable var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}
@IBInspectable var borderColor: UIColor? {
get {
return UIColor(cgColor: layer.borderColor!)
}
set {
layer.borderColor = newValue?.cgColor
}
}
}

Bu kodu yazdıktan sonra projenizi build ettikten sonra artık herhangi bir view’e tıkladığınızda attributes inspector da aşağıdaki gibi bir görüntü elde edeceksiniz:

Bu demek oluyor ki artık bu view’e burdaki özellikleri değiştirerek istediğimiz gibi Border ve Corner radius verebiliriz.

 

Bir sonraki yazımda görüşmek üzere.