IBInspectable, IBDesignable 다루기

안녕하세요. KataRN입니다.

 

오늘은 IBinspectable, IBDesignable에 대해 알아보겠습니다.

 

우선 IBinspectable, IBDesignable에 대해 설명드려야겠군요

만약에 저희가 스토리보드를 통해서 view의 모서리를 둥글게 하고싶다! 코드로는 당연히 가능합니다. 그럼 스토리보드로 가능할까요?

 

 

정답은 없지만 가능하다입니다.

 

... ???

 

없는데 가능하다????.. 없으면 있게 만들면 되니까요.

 

???

 

이렇게 스토리보드에 없는 항목을 넣을때 필요한것입니다.

 

자세한건 예제로 설명드리겠습니다.

아래 오른쪽사진을 보시면 오른쪽 영역을 inspector이라고 합니다.

저희가 알아보려는건 IBInspectable이었죠? 비슷합니다.

저희가 속성을 추가하려는 View(왼쪽사진)의 Custom Class에 UIView를 넣어주면 됩니다.

 

우선 코드는 아래와 같습니다.

class RoundView: UIButton {
    @IBInspectable var isRound: Bool = false {
        didSet {
            if isRound {
                self.layer.cornerRadius = self.frame.height / 2
            }
        }
    }
    
    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }
}

 

두가지를 추가해보겠습니다.

 

핵심은 연산프로퍼티(get, set)라는 점과 @IBInspectable 입니다.

그리고 Custom Class에 추가해보겠습니다.

적용이 안됐다면 build(command + "B")를 해줍시다.

위의 오른쪽 사진을 보시면 속성이 늘어난것을 볼 수 있습니다.

하지만 속성이 On인데도사각형모양이죠? 

시뮬레이터로 빌드를 해봅시다.

 

네 적용이 됐습니다.

하지만 이런식이면 굳이 스토리보드에 넣을필요가 없겠죠?

그리고 저희가 2가지를 알아보기로했는데 한개가 안나왔죠? 여기서 필요한게 바로 IBDesignable입니다.

@IBDesignable
class RoundView: UIButton {

	   ...
           
}

이렇게 클래스위에 써주시면 됩니다.

그럼 아래 사진처럼 바로 적용된것을 볼 수 있습니다.

 

IBInspectable, IBDesignable은 스토리보드를 열때마다 새로 빌드를 한다고합니다.

그렇기때문에 많이 사용한 경우에는 스토리보드를 여는데 시간이 많이 필요합니다.

가급적 필요한 경우에만 사용하는걸로...

 

오늘도 긴글 읽어주셔서 감사합니다.