본문 바로가기

IOS Swift

IBDesignable, IBInspectable 알아보기

목차

  • @IBInspectable
  • @IBDesignable

@IBInspectable

inspector

xcode를 사용하면서 @IBOutlet, @IBAction은 자주봤습니다.

요 위의 녀석들은 인터페이스 빌더에서 생성한 UI 요소를 Swift 코드에 연결하기 위해서 사용했습니다.

마찬가지로 @IBInspectable도 위의 스크린샷의 Attributes inspector와 연결시키기 위해 사용합니다. 

@IBInspectable를 사용하면 기존에는 없던 Attribute을 만들어서 사용할 수 있습니다. (스토리보드를 사용한다면) 코드량을 줄일 수 있겠죠!?

그럼 연결 한번 해보겠습니다! ㄱㄱ

 

1. @IBInspectable을 사용하는 커스텀 뷰 만들기

import UIKit

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

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

 

2. 스토리보드의 뷰와 커스텀 뷰 연결하기

 


 

신기하다. ㅎㅎㅎ

그럼 스토리보드에서는 어떻게 보이는지 보겠습니다.

 


 

...?

다른 기본 속성바꾸면 바뀌는게 바로 보이는데

이거는 안보이네요.. (실행하면 보임)

실행안해도 보이도록 하기 위해서는 IBDesignable을 사용하면 됩니다!

 

@IBDesignable

import UIKit

@IBDesignable // <- 이거!!
class CustomView: UIView {
    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

 

근데 @IBDesignable 쓰니까 스토리보드 로딩하는 속도가

좀 느려지네요! 요부분 주의해야 할 것 같습니다!

반응형