この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
xibファイルでビューを定義して、カスタムクラスと紐付けると共に、これをストーリーボードからやコードから利用する方法をSwift3で簡単に整理しました。
2 xibの作成
File > New > File から Viewを選択し、新しいxibファイルを作成します。(名前は、XibView.xibとしました)
続いて、Viewを設計しますが、ここでは、簡単に、バックの色を変えて、ラベルをAutolayoutで中央に配置しました。
3 カスタムクラスの作成
File > New > File から Cocoa Touch Classを選択し、新しいカスタムクラスを作成します。
UIViewのサブクラスとし、名前は、XibView.swiftとしました。
4 紐付け
xibファイルとカスタムクラスの紐付けは、File's OwnerでCustom Classに指定することで行います。
これにより、@Outlet や @IBAction を、カスタムクラスで定義できるようになります。
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を設定します。
実行すると、ストーリーボードで配置した場所に、カスタムビューが表示されます。
7 動作確認(コードからの利用)
ボタンをタップした際に、カスタムビューを動的に生成するようにしてみました。
@IBAction func tapButton(_ sender: Any) {
let xibView = XibView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
view.addSubview(xibView)
}
下記は、その実行画面です。
8 最後に
今回は、簡単にxibの使用法を纏めてみました。 ストーリーボードからでも、コードからでも利用可能にしておくと、色々、使いやすいかも知れません。