UKey's Labo

swift – xibの使い方

概要

xibファイルとは、間違いを恐れずに言えば、Viewのパーツ群です。
通常は、storyboardにパーツを配置して画面を構成しますが、
xibはUIViewで、単体では使用しません。

storyboardとは別でviewを作成するため、以下のような場合に使えます。

通常はstoryboardで作成したViewを表示するが、〇〇な条件のときはこっちのViewを出したい。
〇〇な条件のときは、遷移先を変えるまでもないけど、ちょっとレイアウトは変えたい。

共通のパーツを複数画面で使用する。

動作環境

環境 バージョン
Xcode 9.4.1
iOS 11.4
swift 4.1.2

xibファイルの作成

では。xibファイルを作成してみましょう。 command + N、もしくはメニューからFile > New > File...をクリック。

Viewを選択し、next。

任意の名前でxibファイルを作成

Xibファイルが作成されたら、Storyboardと同じようにパーツを配置していく。

Viewファイルの作成

ViewControllerとstoryboardを紐付けるように、
Viewとxibを紐付けるために、Viewのクラスを作成します。

command + N、もしくはメニューからFile > New > File...をクリック。

Cocoa Touch Classを選択し、「Next」

Classは任意の名前、Subclassには“UIView”を選択して、Viewファイルを作成します。

作成したViewクラスには以下を実装しておきます。

import UIKit

class XibView: UIView {

    // コードから呼び出す際に使用される
    override init(frame: CGRect) {
        super.init(frame: frame)
        loadNib()
    }

    // Storyboardから利用する際に使用される
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadNib()
    }

    // 上記どちらのinitからも使用される共通関数で、xibファイルを呼び出す。
    func loadNib() {
        // 第1引数のnameには、xibファイル名
        // ownerはself固定
        // optionsはここではnil
        let view = Bundle.main.loadNibNamed("XibTest", owner: self, options: nil)?.first as! UIView
        view.frame = self.bounds
        self.addSubview(view)
    }
}

xibファイルviewクラスの紐づけ

xibファイルとviewクラスを作成したら、xibviewのFile’s Ownerのclassに、viewクラスを指定します。

XibViewクラスをViewControllerから利用する

その他Viewを呼び出す場合と同じように呼び出せます

// XibViewクラスをインスタンス化
let xibView: XibView = XibView(frame: CGRect(x: 0, y: 0, width: width, height: height))
// xibViewを追加する
self.view.addSubview(xibView)