【Swift】カスタムUIViewの作成方法

1 はじめに
- 1.1 実行環境
2 Xibを用いたカスタムViewの作成
- - 2.0.1 以下のような手順になります。
3 コードを用いたカスタムViewの作成
- - 3.0.1 基本的な流れはXibを用いた場合を同じです
4 おわりに

はじめに

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に変更します）

右側のAttributes inspectorのSizeをFreedomにすることでサイズを自由に調整できます

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

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

これでCustomView.swiftとCustomView.xibの紐付けが完了しました

カスタム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を設定します。

StoryBoardにUIViewを配置し、そのUIViewクラスを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)
    }
}