[Swift] [Xcode] xibを使用してUITableViewを実装してみた

#完成品

#実装
##tableView
controllerにtableViewを追加します

tableViewを選択した状態でcontrollerにoutlet接続します

##xibファイルの作成
続いてxibファイルの作成です。
左上のFile→New→Fileを選択します。

ここではCocoa Touch Classを選択してください。

SubClass ofをUITableViewCellにしてください。またAlso create Xib fileにチェックが入れてください。これらが確認できたらClass名をつけます。ここではGafaTableViewCellとしています。ここまでできたらNextを押してください。

GafaTableViewCellのxibファイルができました。右上の＋ボタンを選択しcellにLabelを追加してください。

labelに対して、先ほど生成したGafaTableViewCellファイルにoutlet接続します。

ここではgafaLabelとしておきます。

Custum Classの下のClassがGafaTableViewCellになっていることを確認してください。

Identifierが空になっていることを確認してください。

Identifierをcellと入力します。

##ViewController
ViewControllerの全体のコードを先に載せます。
このままコピペしてビルドすれば完成です。

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    let gafaList = ["Google","Amazon","FaceBook","Apple"]
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(UINib(nibName: "GafaTableViewCell", bundle: nil), forCellReuseIdentifier: "cell")
    }


}
extension ViewController:UITableViewDelegate,UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return gafaList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! GafaTableViewCell
        cell.gafaLabel.text = gafaList[indexPath.row]
        return cell
    }
}

カスタムセルでない一般的なTableView?と違う点は下記のコードだと思います。nibNameは先ほど作成したXibファイルのファイル名を、bundleは基本nilでforCellReuseIdentifierは先ほど設定したidentifier(=cell)を書いてください。

tableView.register(UINib(nibName: "GafaTableViewCell", bundle: nil), forCellReuseIdentifier: "cell")

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? GafaTableViewCell else { fatalError("The dequeued cell is not instance") }
        cell.gafaLabel.text = gafaList[indexPath.row]
        return cell
    }

#完成品
完成品のコード