【Swift】CustomViewをXibで作成してコードベースで利用する

2020-08-18

こんにちは、しょーです。

普段はStroyBoardをあまり使用せず、コードベースでビューを作成しています。
だいたいはインスタンスを作成してSnapKitを使用すればそれなりに楽にできるのですが、
オブジェクトが混み合ってくるとレイアウトのコードが増えてきたりレイアウト自体が難しくなってきます。

そういった場合はXibでViewを作成してしまおう、のメモです。

基本的にカスタムセルを作成する際はXibを使用して作成するのですが、カスタムビューの作成には使用してきませんでした、というかやり方がわかりませんでした。
今回業務で凝ったビューを作成する機会があり、Xibが必要になったので実装してみました。

1. classファイルとXibファイルを作成する
2. 終わりに

classファイルとXibファイルを作成する

classファイルの作成

はじめにClassファイルを作成します。

UIViewで作成すれば問題ありません。

後ほど使用するのでinitializerの作成しておきましょう。

import UIKit

final class SampleView: UIView {

    init() {
        super.init(frame: .zero)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Xibファイルの作成

次にXibファイルを作成します。
カスタムクラス名と同名で大丈夫です。

そうすると初めはこのようなViewControllerのViewになっているかと思います。

こちらをUIView仕様に変更していきます。

下記のように、Simulated Metricsの

size > Freedom
Top Bar > None
Bottom Bar > None

とし、希望の大きさに調整しましょう。

サイズをfreedomにすることにより任意のサイズに変更可能になり、Top/Bottom Bar を None にすることにより、ステータスバーなどを非表示にできます。

Xib を Custom Class に紐付ける

Xib を CustomClass に紐づける作業を行います。

最初に File's owner を先ほど作成したクラスファイルに紐付けます。

View の CustomClass は空欄で大丈夫です。

あとは作成したいViewをレイアウトしてください。

Xibを使用する処理をクラスに記述する

最後にXibをコードベースで使用するための処理をclassに記述します。

import UIKit

final class SampleView: UIView {

    @IBOutlet weak var label: UILabel!

    init() {
        super.init(frame: .zero)

        let view = UINib(nibName: "SampleView", bundle: nil).instantiate(withOwner: self, options: nil).first as! UIView
        view.frame = bounds
        addSubview(view)
        view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

ベースの作成は以上になります。

Viewを使用する

試しに使って見るとこのような感じになります。

import UIKit
import SnapKit

final class ViewController: UIViewController {

    private let sampleView = SampleView()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(sampleView)
        sampleView.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.width.height.equalTo(200)
        }
    }
}