목적

UIView, UIButton 등의 모퉁이 원, 테두리나 UITextField의 Placeholder의 색등은 통상 Storyboard로부터 값을 설정할 수 없고, 코드로 쓰는 것이 많다고 생각합니다만, 할 수 있는 것이라면 Storyboard상에서 외형을 확인해 한편 설정할 수 있으면 일일이 빌드하지 않아도 좋고 편하다.
그래서 이번에는 보통 Storyboard에서 편집할 수 없는 것을 @IBDesignable , @IBInspectable

@IBDesignable , @IBInspectable 란 무엇입니까?

@IBDesignable
@IBInspectable


클래스 앞에 붙이는 한정자
속성 앞에 붙이는 한정자

IBInspectable 가 지정된 property에 변화가 있었을 경우, 그것을 반영한다
스토리 보드에서 값을 변경할 수 있습니다.

@IBInspectable 을 사용할 수 있는 형식

Bool

Int

CGFloat

Double

String

CGPoint

CGSize

CGRect

UIColor

UIImage

UIFont를 지정할 수없는 것이 유감입니다.

방법

UIView, UIButton 등을 상속한 커스텀 클래스를 작성합니다.

CustomView

import UIKit

@IBDesignable class CustomView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            self.layer.cornerRadius = self.cornerRadius
            self.clipsToBounds = (self.cornerRadius > 0)
        }
    }

    @IBInspectable var borderColor: UIColor = UIColor.clearColor() {
        didSet {
            self.layer.borderColor = self.borderColor.CGColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0.0 {
        didSet {
            self.layer.borderWidth = self.borderWidth
        }
    }
}

다음과 같이 쓸 수 있습니다.

CustomView

import UIKit

@IBDesignable class CustomView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 0.0
    @IBInspectable var borderColor: UIColor = UIColor.clearColor()
    @IBInspectable var borderWidth: CGFloat = 0.0

    override func drawRect(rect: CGRect) {
        self.layer.cornerRadius = cornerRadius
        self.clipsToBounds = (cornerRadius > 0)

        self.layer.borderColor = borderColor.CGColor
        self.layer.borderWidth = borderWidth

        super.drawRect(rect)
    }
}

UIView를 배치하고 CustomView와 연결
Designables가 "Up to date"가 되면 OK


후에는 Storyboard에서 편집할 수 있게 되어 있으므로 적당하게 값을 넣는다.
그러면 실시간으로 외형이 갱신되어 간다!


다음은 UITextField의 Placeholder 색상을 변경해 보겠습니다.

CustomTextField

import UIKit

@IBDesignable class CustomTextField: UITextField {

    @IBInspectable var placeholderColor: UIColor = UIColor(red: 199/255, green: 199/255, blue: 205/255, alpha: 1)

    override func drawRect(rect: CGRect) {

        if self.placeholderColor != UIColor(red: 199/255, green: 199/255, blue: 205/255, alpha: 1), let placeholder = self.placeholder {
            let attributesColor = [NSForegroundColorAttributeName: self.placeholderColor]
            self.attributedPlaceholder = NSAttributedString.init(string: placeholder, attributes: attributesColor)
        }

        super.drawRect(rect)
    }
}

마지막으로

아쉬운 것은, 커스텀 클래스를 만들어야 하는 곳. extension에서 @IBDesignable , @IBInspectable 을 설정할 수 있다면 기쁘지만.

사용법에 따라서는 여러가지 할 수 있을 것 같고 재미있다.