【Swift】@IBInspectable와 @IBDesignable
소개
이번에는 IBDesignable과 IBInspectable에 대해 해설하고 싶습니다!
IBInspectable
이것을 사용하면 스토리 보드의 InterfaceBuilder에서 설정할 수 있습니다.
지난번 의 프로젝트를 사용해 해설합니다.
따라서 placeHolder에 @IBInspectable
를 사용합니다.
@IBInspectable
var placeHolder: String = "" {
willSet {
self.placeHolderLabel.text = newValue
self.placeHolderLabel.sizeToFit()
}
}
그러면 스토리보드의 InterfaceBuilder에서 변경할 수 있습니다.



다만, 코드로 placeHolder 를 지정했을 경우는 그쪽이 우선됩니다.
final class ViewController: UIViewController {
@IBOutlet private weak var textView: PlaceTextView!
override func viewDidLoad() {
super.viewDidLoad()
textView.placeHolder = "カキクケコ"
}
}

IBDesignable
IBInspectable을 지정하여 실시간으로 외형 변경을 스토리 보드에서 볼 수 있도록 해줍니다.
즉, 빌드하지 않아도 확인할 수 있도록 하기 위한 것입니다.
스토리 보드에서 적절하게 UIView를 배치하십시오.

그리고 ViewController에서 다음과 같이 작성해 보겠습니다.
final class DesignableView: UIView {
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
방금 배치한 View가 이 DesignableView를 상속하게 합니다.

방금 전 @IBInspectable
덕분에 스토리 보드에서 변경할 수 있으므로 적절하게 값을 변경합니다.

다만, 이 시점에서는 @IBDesignable
(을)를 아직 사용하고 있지 않기 때문에 리얼타임에서는 변경되지 않습니다.

@IBDesignable
를 붙여 줍니다.
@IBDesignable
final class DesignableView: UIView {
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
그러면 이렇게 실시간으로 변경을 볼 수 있다고 생각합니다!

결론
@IBInspectable
와 @IBDesignable
는 편리하네요! 적극적으로 사용하고 싶습니다!
Reference
이 문제에 관하여(【Swift】@IBInspectable와 @IBDesignable), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/REON/items/ef047c4f8722b79b2d57
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이것을 사용하면 스토리 보드의 InterfaceBuilder에서 설정할 수 있습니다.
지난번 의 프로젝트를 사용해 해설합니다.
따라서 placeHolder에
@IBInspectable
를 사용합니다. @IBInspectable
var placeHolder: String = "" {
willSet {
self.placeHolderLabel.text = newValue
self.placeHolderLabel.sizeToFit()
}
}
그러면 스토리보드의 InterfaceBuilder에서 변경할 수 있습니다.



다만, 코드로 placeHolder 를 지정했을 경우는 그쪽이 우선됩니다.
final class ViewController: UIViewController {
@IBOutlet private weak var textView: PlaceTextView!
override func viewDidLoad() {
super.viewDidLoad()
textView.placeHolder = "カキクケコ"
}
}

IBDesignable
IBInspectable을 지정하여 실시간으로 외형 변경을 스토리 보드에서 볼 수 있도록 해줍니다.
즉, 빌드하지 않아도 확인할 수 있도록 하기 위한 것입니다.
스토리 보드에서 적절하게 UIView를 배치하십시오.

그리고 ViewController에서 다음과 같이 작성해 보겠습니다.
final class DesignableView: UIView {
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
방금 배치한 View가 이 DesignableView를 상속하게 합니다.

방금 전 @IBInspectable
덕분에 스토리 보드에서 변경할 수 있으므로 적절하게 값을 변경합니다.

다만, 이 시점에서는 @IBDesignable
(을)를 아직 사용하고 있지 않기 때문에 리얼타임에서는 변경되지 않습니다.

@IBDesignable
를 붙여 줍니다.
@IBDesignable
final class DesignableView: UIView {
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
그러면 이렇게 실시간으로 변경을 볼 수 있다고 생각합니다!

결론
@IBInspectable
와 @IBDesignable
는 편리하네요! 적극적으로 사용하고 싶습니다!
Reference
이 문제에 관하여(【Swift】@IBInspectable와 @IBDesignable), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/REON/items/ef047c4f8722b79b2d57
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
final class DesignableView: UIView {
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
@IBDesignable
final class DesignableView: UIView {
@IBInspectable
var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
}
@IBInspectable
와 @IBDesignable
는 편리하네요! 적극적으로 사용하고 싶습니다!
Reference
이 문제에 관하여(【Swift】@IBInspectable와 @IBDesignable), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/REON/items/ef047c4f8722b79b2d57텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)