[IOS] IBInspectable, IBDesignable

* 본 포스팅은 패스트캠퍼스의 "30개 프로젝트로 배우는 IOS 앱 개발 with Swift"를 참조하였습니다.

 

 

 

IBInspectable

IBInspectable은 커스텀 뷰 속성을 스토리뷰에서 바로 변경이 가능하게 만든다. inspectable의 말 그대로 해당 속성을 inspector 가능하게 만든다는 의미이다. 예시를 들면 쉽게 이해 된다!

 

 

자 다음 사진과 같이 계산기 앱이 있다. 사각형 모양의 보튼을 둥근 모양으로 바꾸어 주려고 한다. 하지만 UIButton은 둥글게 만들어 주는 속성을 가지고 있지 않다. 이제 그 속성을 만들어 주고자 한다. 물론 viewcontroller파일에서 해당 button들을 가져와 둥글게 만들어주어도 되지만, 우리는 이를 inspertor창에서 속성부여가 가능하도록 만들고자 한다!

 

해당 프로젝트에 RoundButton 이라는 파일을 만들어 주고 다음과 같이 코드를 작성해주자!

import Foundation

import UIKit

class RoundButton: UIButton {
    @IBInspectable var isRound : Bool = false{
        didSet{
            if isRound{
                self.layer.cornerRadius = self.frame.height / 2
            }
        }
    }
}

class RoundButton이 UIButton을 상속하도록 하였고 isRound라는 변수에 didSet 옵저버 프로퍼티를 통해 해당 버튼의 모서리를 조절하도록 작성하였다. 그리고 오늘의 주제인 @IBInspectable을 추가해주었다. 연산프로퍼티와 옵저버프로퍼티을 아직 잘 모른다면 이전 포스팅을 참조해주기 바란다!

 

2022.11.28 - [IOS] - [IOS] 프로퍼티 초기화(get, set, didset, willset)

[IOS] 프로퍼티 초기화(get, set, didset, willset)

 

 

 

이제 파일을 저장하고 해당 버튼들의 Inspector을 열어보자

 

다음과 같이 Custom Class에 우리가 좀전에 작성한 RoundButoon을 채택하도록 하자.

 

 

RoundButoon은 UIButton을 상속했기 때문에 IsRound 속성과 기존 UIButton들의 속성이 같이 존재함을 확인 할 수 있다. 해당 프로젝트를 실행해 본다면 IsRound 속성이 반영된 것을 확인할 수 있다. 하지만 스토리보드에서는 변화가 없다. @IBInspectable는 런타임으로만 확인 할 수 있으며 스토리 보드에 해당 속성을 반영하기 위해 필요한 것이 IBDesignable이다!

 

 

 

 

IBDesignable

위에서 설명한 것처럼 inspectable을 사용하면 속성이 적용된 모습을 런타음으로만 볼 수 있다. 즉 build한 후에 실행해야 확인할 수 있다 하지만 IBDesignable을 사용한다면 컴파일타임에 볼 수 있으며 실시간으로 조정할 수 있다.

 

위의 RoundButoon class에 다음과 IBDesignable을 추가해 준다면 스토리보드에서 컴파일 타임에 IsRound 속성 변화를 확인할 수 있다.

import Foundation

import UIKit

@IBDesignable
class RoundButton: UIButton {
    @IBInspectable var isRound : Bool = false{
        didSet{
            if isRound{
                self.layer.cornerRadius = self.frame.height / 2
            }
        }
    }
}

 

 

IBDesignable를 추가한 뒤의 스토리 보드에서의 화면이다!

 

IBDesignable를 작성하여도 바로 적용이 되지 않는 경우가 많다. 따라서 시간적 여유를 두고 확인하는 것을 추천한다. 또한 IBInspectable, IBDesignable을 너무 남용한다면 해당 앱이 버벅거릴 수도 있으니 참고바란다.