ichigoryume programming blog

プログラミングに関する備忘録。主にHTML5, C#, Swiftなど。

カスタムViewのxibファイルをStoryboard(InterfaceBuilder)で再利用する

概要

  • よく使う、あるいは複数配置するようなGUI部品は、別途xibファイルとViewサブクラスを用意して部品化しておけば簡単に再利用できる。
  • Storyboardに配置してInterfaceBuilderでプレビューすることも可能

手順

  • まずxibファイルを追加する。プロジェクトツリーの右クリックメニューからNew Fileを選択し、User Interface の欄にあるViewを選択し、名前をつけて保存。

f:id:ichigoryume:20180907162357p:plain

  • 追加したxibファイルをInterfaceBuilderで編集(略)
  • Swift Fileを追加し、修飾子@IBDesignableを付与し、UIViewを継承するクラスを作る。
@IBDesignable class MySubView : UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        loadFromNib()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadFromNib()
    }

    override func prepareForInterfaceBuilder() {
        loadFromNib()
    }
    
    private func loadFromNib() {
        let v = UINib(nibName: "MySubView", bundle: Bundle(for: MySubView.self)).instantiate(withOwner: self, options: nil)[0] as! UIView
        v.frame = self.bounds
        addSubview(v)
    }
}
  • ポイント
    • @IBDesignableを忘れずに!
    • init()を2種と、prepareForIntafeceBuilder()メソッドを記述すること
    • loadFromNib()メソッド内のUINibメソッドでは、nibNameに先に作成したxibファイルの拡張子無しの名前を与え、Bundle()のfor:にはビュークラス名.selfを与える。
  • 一旦ビルド
  • 次に、この部品を使う側のStoryboardを開き、Viewを画面に配置して、インスペクターでCustome Classで作成したViewを指定する。

f:id:ichigoryume:20180907163256p:plain

以上で部品作り完成。

作成した部品ViewクラスのプロパティをInterfaceBuilderでセットできるようにする

  • プロパティに@IBInspectable修飾子を付与すると可能になる
    @IBInspectable var myColor:UIColor = UIColor.black {
        didSet {
            self.layer.backgroundColor = myColor.cgColor
        }
    }

f:id:ichigoryume:20180907164340p:plain