0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@IBDesignable, @IBInspectableなカスタムビューを実装する

Posted at

はじめに

どの画面に何のパーツがあるのか一目でわかるようにカスタムビューをIB上に表示したい時がありました。
@IBDesignable, @IBInspectableを使った実現方法を紹介します。

環境

Xcode 12.5.1
macOS Big Sur 11.5.2

完成形

完成すると動画のように変更がリアルタイムで確認できます。

大まかな実装手順

  1. UIViewを継承したCocoa Touch Class(CustomView.swift)を作成する
  2. xibファイル(CustomView.xib)を作成する
  3. File's ownerでswiftファイルとxibファイルを紐付ける
  4. @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上で見えることで、どこに何があるか一目で分かります。
後からプロジェクトに入った方も実装を進めやすいと思いました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?