xib を使って再利用可能な View を作成する

はじめに

xib を使って色々な画面で使いまわせる汎用的な View のつくり方を紹介します。

xib ファイルを作成する

File -> New -> File... (⌘ + N) からファイルを新規作成します。Cocoa Touch Class を選択して Next しましょう。

名前は適当に CustomTableViewCell としておきます。
Also create XIB file にチェックをつけ Next をクリックし、任意のディレクトリに保存します。

作成が完了すると CustomTableViewCell.xib と CustomTableViewCell.swift の二つが Project navigator に追加されます。

xib を編集する

Storyboard と同じ要領で編集することが可能です。取り合えず今回は backgroundColor に Twitter カラーを指定してみます。
cell identifier (画像右上) も忘れずに設定しておきましょう。

xib をコードから呼び出す

真っさらな何もない TableView に xib をセットしていきます。

MainTableViewController

import UIKit

class MainTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // tableView に CustomTableViewCell を登録する
        self.tableView.register(UINib(nibName: "CustomTableViewCell", bundle: nil),
                                forCellReuseIdentifier: "customCell")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // ここで CustomTableViewCell を呼び出す
        return self.tableView.dequeueReusableCell(withIdentifier: "customCell") as! CustomTableViewCell
    }
}

実行結果

以下が実行結果です。

xib でヘッダーやボタンなどの View を作成しておくと色々な画面で使いまわすことができて便利ですね。