LoginSignup
3
3

More than 3 years have passed since last update.

Xibファイルで作ったUIをViewに読み込む方法

Last updated at Posted at 2020-11-15

AutoLayoutの制約をなるべく簡単にしたいですよね。
XibをViewに読み込むことでViewController内の制約をよりシンプルに!そして簡略化します。

解説

まずはsampleViewController.Xibの中にViewを置きます。
スクリーンショット 2020-11-14 12.09.12.png

このようにViewを置いたらSwiftファイルとViewのXibファイルを作成していきます。

Swiftファイル
スクリーンショット 2020-11-14 11.55.32.png
ViewのXibファイル
スクリーンショット 2020-11-15 21.04.17.png

ファイル名は同名にしましょう!!(今回はsampleHomeViewと命名)

sampleHomeView.swiftにコードを書きます。こちらはコピペでOKです。

sampleHomeView.swift
import UIKit

class sampleHomeView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        loadView()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadView()
    }

    private func loadView() {
        let className = String(describing: type(of: self))
        let view: UIView = Bundle.main.loadNibNamed(className, owner: self, options: nil)?.first as? UIView ?? UIView()
        view.frame = bounds
        addSubview(view)
    }
}

このコードを書くことでFile's Ownerのクラス設定ができ、Viewに読み込めるようになります。
sampleHomeView.XibのFile's Ownerを選択し、ClassをsampleHomeViewにします。
スクリーンショット 2020-11-15 20.51.38.png

そしたらsampleHomeView.XibにUIパーツを置いていきます。(今回はButtonを配置します)
スクリーンショット 2020-11-14 12.01.59.png

次にsampleView.Xibの設定をしていきます。
一番最初に置いたViewを選択して、CustomClassのClassをsampleHomeViewにします。
スクリーンショット 2020-11-15 20.55.59.png
これでXibをViewに読み込ませることができるようになりました。
しかし、この状態ではViewに読み込んでいることがわからないのでビルドしましょう!!
スクリーンショット 2020-11-14 12.09.28.png

これで読み込ませることができましたね(^ ^)
こうすることにより、UIパーツのレイアウトを簡略化できそうです。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3