目次
はじめに
Swiftで開発していく中で、あるUIViewControllerで使用しているViewの一部が、他のUIViewControllerでも同じレイアウトで表示している場合があると思います。そのような時に同じレイアウトの部分をコピーしてそれぞれのUIViewControllerに貼り付けて利用していると変更があった場合に全ての箇所の変更をしなければなりません。
今回はそういった複数の箇所に対応できる、使いまわせるViewであるカスタムUIViewの実装方法についてXibを用いた実装、コードを用いた実装のそれぞれについてご紹介したいと思います。
実行環境
この記事は以下の動作環境で動作確認しています。
- swift 5.2
- Xcode 11.5
Xibを用いたカスタムViewの作成
以下のような手順になります。
- メニューバーのFile -> New -> FileからCocoa Touch Classを選択。Subclass of:をUIViewにし、UIViewクラスを作成します。(ここではClass名をCustomViewとしました)

import UIKit
class CustomView: UIView {
// 作成されたクラスになります
}
- 同じくメニューバーのFile -> New -> Fileから次はViewを選択。先ほど作成したUIViewクラスと同じ名前のXibファイルを作成します。(ここではCustomView.xibを作成しました)
- Xibファイルにてサイズを調整します。(右側のAttributes inspectorのSizeをFreedomに変更します)

- 複数のUIViewControllerで使いたいレイアウトの要素を配置します。

- UIViewクラスと接続します。(File’s Ownerを選択し、右側のAttributes inspectorからClassをCustomViewに変更します)

- カスタムViewの初期化の設定をし、再利用できる状態にします。
import UIKit
class CustomView: UIView {
@IBOutlet weak var customImageView: UIImageView!
@IBOutlet weak var customLabel: UILabel!
@IBOutlet weak var customButton: UIButton!
override init(frame: CGRect) {
super.init(frame: frame)
loadNib()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
loadNib()
}
private func loadNib() {
if let view = Bundle.main.loadNibNamed(String(describing: type(of: self)), owner: self)?.first as? UIView {
view.frame = self.bounds
self.addSubview(view)
}
}
}
- 最後に使用したいStoryBoard, UIViewControllerで作成したCustomViewを設定します。

- シミュレーターを起動すると、UIImageView, Label, Buttonが配置されていることが確認できます。


コードを用いたカスタムViewの作成
基本的な流れはXibを用いた場合を同じです
- メニューバーのFile -> New -> FileからCocoa Touch Classを選択。Subclass of:をUIViewにし、UIViewクラスを作成します。(Class名はCustomViewとしました)
- カスタムViewの初期化の設定をし、再利用できる状態にします。
import UIKit
class CustomView: UIView {
// 配置するプロパティの初期化の設定
lazy var customLabel: UILabel = {
let label = UILabel()
label.text = "カスタムView"
label.backgroundColor = .green
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(customLabel)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func layoutSubviews() {
// レイアウトの設定
customLabel.frame = CGRect(x: 0, y: 0, width: 150, height: 150)
}
}
- 使用したいUIViewController内で作成したCustomViewの設定をします
import UIKit
class ViewController: UIViewController {
// CustomViewのインスタンスの作成
let customView: CustomView = CustomView()
override func viewDidLoad() {
super.viewDidLoad()
// レイアウトの設定
customView.backgroundColor = .orange
customView.customLabel.textAlignment = .center
customView.frame = CGRect(x: (view.bounds.width - 200) / 2, y: (view.bounds.height - 200) / 2, width: 200, height: 200)
self.view.addSubview(customView)
}
}
- シミュレーターを起動すると、設定したカスタムViewが表示されています

おわりに
今回はカスタムUIViewの作成方法についてご紹介させて頂きました。カスタムUIViewでは何度も同じレイアウトを作成する必要がなくなり、後々の変更にも対応しやすくなるので是非作成してみてはいかがでしょうか。