xibファイルでビューを作成して、ストーリーボードやコードから利用する方法(Swift3編)

logo_swift_400x400

1 はじめに

xibファイルでビューを定義して、カスタムクラスと紐付けると共に、これをストーリーボードからやコードから利用する方法をSwift3で簡単に整理しました。

2 xibの作成

File > New > File から Viewを選択し、新しいxibファイルを作成します。(名前は、XibView.xibとしました)

001

続いて、Viewを設計しますが、ここでは、簡単に、バックの色を変えて、ラベルをAutolayoutで中央に配置しました。

004

3 カスタムクラスの作成

File > New > File から Cocoa Touch Classを選択し、新しいカスタムクラスを作成します。

002

UIViewのサブクラスとし、名前は、XibView.swiftとしました。

003

4 紐付け

xibファイルとカスタムクラスの紐付けは、File's OwnerCustom Classに指定することで行います。

これにより、@Outlet@IBAction を、カスタムクラスで定義できるようになります。

005

5 カスタムクラスの実装

カスタムクラスの実装では、loadNib()でxibファイルを読み込んでビューに追加しています。

コードから生成された場合はinit(frame:)、ストーリーボードから生成された場合はinit(coder:)で、それぞれ初期化されますが、どちらの場合も、同じように処理されるようになっています。

import UIKit

class XibView: UIView {
    override init(frame: CGRect){
        super.init(frame: frame)
        loadNib()
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        loadNib()
    }

    func loadNib(){
        let view = Bundle.main.loadNibNamed("XibView", owner: self, options: nil)?.first as! UIView
        view.frame = self.bounds
        self.addSubview(view)
    }

}

6 動作確認(ストーリーボードからの利用)

UIViewを配置し、Custom Classを設定します。

006

実行すると、ストーリーボードで配置した場所に、カスタムビューが表示されます。

007

7 動作確認(コードからの利用)

ボタンをタップした際に、カスタムビューを動的に生成するようにしてみました。

@IBAction func tapButton(_ sender: Any) {
    let xibView = XibView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
    view.addSubview(xibView)
}

下記は、その実行画面です。

008

8 最後に

今回は、簡単にxibの使用法を纏めてみました。 ストーリーボードからでも、コードからでも利用可能にしておくと、色々、使いやすいかも知れません。

  • 藤沢瞭介

    素晴らしい記事をありがとうございました。