[iOS] IBDesignable, IBInspectable 사용하기

오늘은 정말 기본적이면서도 iOS로 개발할 때, 유용하게 사용할 수 있는 기능을 알아보려고 합니다.

바로 IBDesignable, IBInspectable입니다.

 

저도 IBDesignable은 아니지만 IBInspectable은 자주 사용하고 있는데요..!! 

일단 둘 다 알아두면 유용한 기술이니 알아보겠습니다 :)

 

우선 두개의 이름에 전부 IB라는 말이 들어가게 되죠? IBOutlet, IBAction들과 똑같이 IB는 Interface Builder의 약자입니다.

둘다 뭔가 Interface Builder에서 어떤 것을 컨트롤 할 수 있다는 뜻이겠죠~

 

자 이제 알아보겠습니다..!!

 

IBInspectable

IBInspectable은 Inspectable이라는 의미를 보아야합니다. 여러분들이 iOS를 개발할 때, 엄청 자주 접했던 것인데요.

Xcode의 오른쪽 화면에 보면 있는 툴바..(?) 고게 바로 Inspector Bar라고합니다.

바로 이 창을 Inspector Bar라고 합니다.

 

그럼 IBInspectable(?)란..?

느낌이 오죠 아,,, 여기 Inspector Bar에서 뭔가를 컨트롤 할 수 있다는 뜻이구나.

 

그럼 이제 그동안 보던 오른쪽 창이 좀 다른 시각으로 보이지 않나요? 

backgroundColor, TintColor 등 여러가지를 설정할 수 있던 것들이 내부에서는 IBInspectable로 구현되어 있어서 그런거겠죠!!

그럼 실제로 사용을 할 때는 어떻게하면 될까요

 

우선 SampleView라고 하나 만들어서 사용해볼게요.

class SampleView: UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get { return self.layer.cornerRadius     }
        set { self.layer.cornerRadius = newValue }
    }
    
    @IBInspectable var borderWidth: CGFloat {
        get { return self.layer.borderWidth     }
        set { self.layer.borderWidth = newValue }
    }
}

이렇게 만들고 스토리보드 상에서 SampleView를 상속받는 UIView를 만들면 Inspector Bar에서 어떻게 나타날까요?

바로 이렇게 Inspector Bar에서 설정할 수 있게 나타납니다 :)

그렇다면 이렇게 설정하고 Run을 누르면 시뮬레이터에서 저희가 원하는 값들이 적용된 것을 확인할 수 있겠죠?~

 

물론 저희가 기대했던 것은 Run을 했을 때, 적용되는 것이지만 뭔가 조금 아쉽지 않나요?

뭔가 바로 Interface Builder에서도 이 적용한 값들이 바로 확인이 되었으면 좋겠는데, 아직은 시뮬레이터로 확인하는 방법 밖에는 없죠..?

그래서 알아보는데 IBDesignable입니다.

 

IBDesignable

이제 위에서 아쉬웠던 점을 이 IBDesignable을 사용함으로서 해결할 수 있습니다..!!

즉, 런타임에 확인해야했던 이 값들을 컴파일 타임에 확인할 수 있게 해주는 역할을 합니다.

 

그렇다면 이 것은 어떻게 사용할 수 있을까요?

 

아까 선언했던 SampleView라는 클래스에 @IBDesignable이라는 어노테이션을 붙여줍니다.

그러면 어떤 일이 일어날까요 ㅎㅎ

바로 이렇게 적용된 값들이 런타임이 아닌 컴파일 타임에 확인할 수 있게 바뀌게 됩니다..!!!

유용하게 사용할 수 있겠죠 :)

 

하지만.. 너무 남용해서 사용하게 되면, 원래도 버벅거리는 스토리보드가 컴파일 타임에 더욱 많이 돌면서.. 엄청난 버벅거림으로 이어질 수  있을 것 같네요. 

 

코드는 다음과 같습니다.

@IBDesignable
class SampleView: UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get { return self.layer.cornerRadius     }
        set { self.layer.cornerRadius = newValue }
    }
    
    @IBInspectable var borderWidth: CGFloat {
        get { return self.layer.borderWidth     }
        set { self.layer.borderWidth = newValue }
    }
}

 

오늘은 이렇게 Interface Builder를 이용할 때, 유용하게 사용할 수 있는 IBDesignable, IBInspectable에 대해 알아보았습니다.

유용하게 사용하셨으면 좋겠네요 :)