1. ホーム
  2. uiview

[解決済み] ストーリーボードでuiviewのxibを再利用する

2023-07-03 11:26:19

質問

私は通常、インターフェースビルダーでuiviewsを作成し、設計するのが好きです。時々、ストーリーボード内の複数のビューコントローラーで再利用できる単一のビューをxibで作成する必要があります。

どのように解決するのですか?

ストーリーボードでxibを再利用してレンダリングする。

Swift 2.2 & Xcode 7.3.1 でテスト済み。

1 ---- 「DesignableXibView」という名前のUIViewを新規に作成します。

  • ファイル > 新規作成 > ファイル > ソース > Cocoa Touch クラス > UIView

2 ---- 'DesignableXibView' という名前の一致する xib ファイルを作成します。

  • ファイル >新規作成 >ファイル >ユーザーインターフェイス >ビュー

3 ---- xibのファイル所有者の設定

  1. xibを選択します。
  2. ファイルの所有者を選択
  3. アイデンティティインスペクタでカスタムクラスを「DesignableXibView」に設定する。

  • 注意: ビューのカスタムクラスはxibに設定しないでください。ファイル所有者のみ!

4 ---- DesignableXibViewの実装

//  DesignableXibView.swift

import UIKit

@IBDesignable

class DesignableXibView: UIView {

    var contentView : UIView?

    override init(frame: CGRect) {
        super.init(frame: frame)
        xibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }

    func xibSetup() {
        contentView = loadViewFromNib()

        // use bounds not frame or it'll be offset
        contentView!.frame = bounds

        // Make the view stretch with containing view
        contentView!.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]

        // Adding custom subview on top of our view (over any custom drawing > see note below)
        addSubview(contentView!)
    }

    func loadViewFromNib() -> UIView! {

        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView

        return view
    }

}

5 ---- ストーリーボードで再利用可能なビューをテストする

  1. ストーリーボードを開く
  2. ビューを追加する
  3. そのビューのカスタムクラスを設定します。
  4. ちょっと待って BOOM!