iOS ) 왕초보를 위한 IBInspectable / IBDesignable 사용해보기

안녕하세요 :) Zedd입니다.

쓰려고 한 글들은 많지만...저는 그날그날 땡기는 글들을 쓰는 편인데, 오늘은 갑자기 이게 생각나서...!!!ㅎㅎ

처음에 이걸 봤을 때 엄청 신기했거든요!!

이 글을 읽기전에 <연산프로퍼티>글을 읽고오시는 것을 추천드려요ㅎㅎ. get, set이 나오거든요!

시작할게요! 

IBInspectable / IBDesignable

---

먼저 IBInspectable부터 살펴봅시다. 

일단 이름에 뭔가 익숙한게 붙어있네요.

IB!

IBOutlet이랑 IBAction은 들어봤는데.. IBInspectable은 뭐지?

그리고 또.. 익숙한 말이 하나 들어있는데, 바로 inspector!

우리한테 inspector는 

이거였죠?

네, 위 inspector와 IBInspectable은 관련이 있어요 :)

View를 하나 추가해줘봅시다. 

이러면 inspector쪽에서 이 View에 대해 여러가지? 작업을 할 수 있게 되죠.

오른쪽 inspector에 Background 보이시죠? 이 Background는 지금 하얀색이지만, 저기서 우리가 주고싶은 색깔을 줄 수 있죠.

하지만, View의 테두리만!!을 무슨색으로 할지는 inspector에 나와있지않네요 ㅜㅜ 만약 테두리를 주고싶으면, 저 View의 IBOutlet을 딴 다음, borderWidth와 borderColor를 지정해줘야겠죠?

하지만, 바로!!! 이럴 때!!! IBInspectable을 사용하면 조금 편해진답니다. 

잘 이해가 안가시죠?

예제로 볼게요. 

먼저 cocoa Touch class파일 하나를 만들어주세요. UIView로요!!

이제 이 ZeddView를 우리가 만든 View에 할당해줘야겠죠?

main 스토리보드로 가셔서

ZeddView라고 클래스를 지정해주세요.

그리고 이제 IBInspectable를 사용할거에요. 

우리 IBOutlet이나 IBAction을 따면, 앞에 @가 붙었었죠?

IBInspectable도 마찬가지입니다.  

class ZeddView: UIView {

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

자..우리가 보던 IBOutlet이나 IBAction과 다를게 없습니다!! 어려워하지마세요. weak만 빠졌네요. 그리고 연산프로퍼티라는점?

일단 테두리 색깔을 주려면, 테두리가 "있어야" 줄 수 있겠죠? borderWidth를  함께 줘야한답니다. 

borderWidth는 CGFloat타입이었으니, CGFloat으로 줘야겠죠?

그리고 get, set연산을 합니다.

set에는 원래 파라미터 이름을 받을 수 있지만, 없을 때 이름은 반드시 "newValue"라고 그랬죠?

아무튼 어떻게 set해주는 건지는 모르겠는데, 어떤 CGFloat값을 받으면, 그 값을 layer.borderWidth에 할당하네요.

그리고 그 값을 리턴합니다. 

자..이렇게 borderWidth를 어케어케 지정해준 것같은데...뭐가 달라졌을 까요?

main스토리보드로 가봅시다. 

헉

뭐가 생겼네요!!!!!!!!!!

한번에 이해가 가시죠? 바로 이렇게 inspector에서 해당 인터페이스 요소의 속성을 변경할 수 있게 하는 것이 IBInspectable입니다. 저기서 값을 변경하는 것이 바로 "set연산"이 되는것이죠. 

borderWidth도 해봤으니, borderColor를 줘봅시다. 

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

흐음..이 코드를 보고 궁금증이 생기시는 분들도 계실거에요. 분명 <CGColor와 UIColor의 차이> 글에서 레이어와 관련된 아이들은 CGColor를 줘야한다고 그랬는데....UIColor타입인것도 이상하고....또 set할 때는 CGColor로 바꿔서 set하고...

일단, 우리는 "여러가지" 색을 주고싶죠? CGColor에는 검정, 흰색..이런색상들밖에 없는데 비해, UIColor는 여러가지 색상들을 가지고 있답니다. 

그래서 UIColor로 타입을 주되, layer.borderColors는 CGColor타입이기때문에 convert를 해준거에요. 

(get에서, return 할 때, layer.borderColor가 안되는 이유도 아시겠나요? 리턴타입이 UIColor인데, CGColor를 리턴하려고 그래서 에러가 난답니다.)

자...이렇게 해서 borderColor까지 지정을 해줬습니다.

main스토리보드로 가보죠.

이얄

하지만, 지금 당황하고 계신분들이 있을거에요.

왜냐하면 아무리 borderWidth를 줘도, borderColor를 줘도, 메인 스토리보드의 우리의 View는 아무런 변화가 없거든요...

하지만 실행해보시면,

잘 나오는 것을 볼 수 있습니다.

네! 맞아요. 이렇게 IBInspectable만 지정하면 "런타임"에 우리는 속성이 적용된 것을 볼 수 있어요.

그럼 "컴파일타임"으로, 즉 실시간으로 못보는 건가요?

...를 가능하게 해주는 것이 바로 IBDesignable입니다 :)

우리 다시 ZeddView파일로 가볼까요?

이렇게 역시 @와 함께  IBDesignable을 선언해주고 main 스토리보드로 가면...!!

갑자기 뭔가를 실행하더니..!!

이렇게 실시간으로 보여지게 됩니다!!!!!!XD

신기하죠?ㅎㅎ

이런 간단한 것들은 코드가 더 편하다고 느끼실 수 있어요 :) 하지만, 알아두시면 언젠가는 써먹을 일이 있겠죠? ㅎㅎ

오늘도 도움이 되었길 바라며 ㅎㅎ 안녕!!