IBInspectable 기본 사용법

IBInspectable: inspector에서 해당 인터페이스 요소의 속성을 변경할 수 있게 하는 방법.

IBInspectable를 사용해보기 앞서 먼저 storyboard 위에 View 하나를 추가해 봅시다.

이렇게 만든 View의 Background 색상을 변경하려면 오른쪽 inspector에서 변경이 가능합니다.

그렇다면 View의 테두리 두께와 색상을 변경하려면 어떻게 해야 할까요?

1) 첫번째는 View의 IBOutlet을 연결 시킨후에 코드로 borderWidth와 borderColor를 지정하는 방식이 있습니다.

2) 두번째로는 위에서 inspector로 View의 Background 색상을 변경했던것처럼 borderWidth와 borderColor를 변경하는 방식입니다. 바로 이때 사용하는 것이 IBInspectable 입니다.

1. cocoa Touch class_UIView 파일 하나를 만들어주세요.

2. 위 1번에서 만든 View를 storyboard 위에 View에 연결시켜주세요.

3. IBInspectable 사용하기.

• 1) borderWidth 변경하기

    @IBInspectable var borderWidth: CGFloat {
        
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

이제 다시 storyboard의 inspector로 이동해 봅시다. 변화가 생기셨나요? borderWidth속성이 inspector에 생성되었습니다.

• 2) borderColor 변경하기

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }

역시 storyboard의 inspector로 이동해 봅시다. 변화가 생기셨나요? 이번에는 borderColor속성이 inspector에 생성되었습니다.

inspector에서 borderWidth와 borderColor의 속성값을 변경해보겠습니다.음...변화가 없네요 하지만 실제로 실행시켜보면 변경된 속성값이 잘 적용되었네요. 이렇게 IBInspectable만 지정하면 컴파일타임에는 반영되지 않아 실시간으로 storyboard상에서 확인할수 없습니다.

바로 위의 이런 문제를 해결하고 실시간으로 storyboard상에서 확인할수 있게 해주는 방법이 IBDesignable입니다.

IBInspectable로 borderWidth와 borderColor의 속성값을 설정한 View로 돌아가서 @IBDesignable 선언하고 storyboard로 가주세요.

짜잔! 이렇게 inspector에서 변경한 borderWidth와 borderColor의 속성이 컴파일타임에서 실시간 반영되는것을 확인할수 있습니다.