はじめに
どの画面に何のパーツがあるのか一目でわかるようにカスタムビューをIB上に表示したい時がありました。
@IBDesignable
, @IBInspectable
を使った実現方法を紹介します。
環境
Xcode 12.5.1
macOS Big Sur 11.5.2
完成形
大まかな実装手順
- UIViewを継承したCocoa Touch Class(CustomView.swift)を作成する
- xibファイル(CustomView.xib)を作成する
- File's ownerでswiftファイルとxibファイルを紐付ける
-
@IBDesignable
,@IBInspectable
を使ってCustomView.swift
を実装する
次にCustomView.swift
の実装について詳しく見ていきます。
CustomView.swift
CustomViewでは受け取った文字列をUILabelに反映します。
文字列を画像のようにインスペクタ上で変更できるよう@IBInpspectable
を宣言します。
また、カスタムビューの変更をIB上に表示するためにCustomViewに@IBDesignable
を設定します。
CustomView.swift
@IBDesignable
class CustomView: UIView {
@IBOutlet weak var label: UILabel!
@IBInspectable var labelString: String = ""
override init(frame: CGRect) {
super.init(frame: frame)
loadNib()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
loadNib()
}
override func layoutSubviews() {
super.layoutSubviews()
setupLabel()
}
private func loadNib() {
guard let view = Bundle(for: type(of: self)).loadNibNamed("CustomView", owner: self, options: nil)?.first as? UIView else {
return
}
view.frame = bounds
addSubview(view)
}
private func setupLabel() {
label.text = labelString
}
}
最後に
カスタムビューがIB上で見えることで、どこに何があるか一目で分かります。
後からプロジェクトに入った方も実装を進めやすいと思いました。