Nibでデザインを作って、InterfaceBuilderからもコードからも使えるカスタムViewの作成方法。
※MyCustomViewというカスタムビューを作成するとする。
1. MyCustomView.swiftファイルを作成する。
UIViewを継承する。
2. MyCustomView.xibファイルを作成する。
「New File > View」 から作成する。
3. MyCustomViewに初期化処理を実装する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import UIKit class MyCustomView: UIView { //コードから生成したときに通る初期化処理 override init(frame: CGRect) { super.init(frame: frame) self.commonInit() } //InterfaceBulderで配置した場合に通る初期化処理 required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) self.commonInit() } fileprivate func commonInit() { //MyCustomView.xibファイルからViewを生成する。 //File's OwnerはMyCustomViewなのでselfとする。 guard let view = UINib(nibName: "MyCustomView", bundle: nil).instantiate(withOwner: self, options: nil).first as? UIView else { return } //ここでちゃんとあわせておかないと、配置したUIButtonがタッチイベントを拾えなかったりする。 view.frame = self.bounds //伸縮するように view.autoresizingMask = [.flexibleHeight, .flexibleWidth] //addする。viewオブジェクトの2枚重ねになる。 self.addSubview(view) } } |
4. MyCutomView.xibのFile’s OwnerのCustom Classに、MyCustomViewを設定する。
5. MyCutomView.xibを好きなように編集する。IBOutletやIBActionの接続をする。
これでOK。
で、使い方。
Interface Builderから使う
ビューを配置して、CustomClassにMyCustomViewを設定すればOK。
コードから使う
こんな感じでOK。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let customView = MyCustomView(frame: CGRect(x: 0.0, y: 0.0, width: 300, height: 400)) self.view.addSubview(customView) } } |
おまけ
デバッガで見ると、Viewがピッタリ2枚重なっている。
コメント