TableViewセルの作り方 その２（Xib）

環境

Xcode 12.2

1.Xibファイルの作成

• Project navigatorでNew File...

• User InterfaceのViewを選択してNext　→　Xib名を入力してCreate

2.TableViewCellの作成

• デフォルトのViewを消す（選択してdelete)

• （＋）をクリックしてLibraryからTableViewCellを選択しXibファイルにドラッグアンドドロップ

• できたセル
  

• UIパーツを配置して、レイアウトの制約を追加する

3. UITableViewCell クラスの作成

仮にSecondTableViewCellというUITableViewCell クラスにした場合

SecondTableViewCell.swift

class SecondTableViewCell :UITableViewCell{

  override func awakeFromNib() {
    super.awakeFromNib()
  }

  override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

  }

4. XibとUITableViewClassの紐付け

• 使用するUITableViewCellクラスの設定

5. CellIdの設定

後でTableViewに登録する際に使う

6. UIをUITableViewCellクラスに紐付ける（ついでにUIのプロパティーも変更）

SecondTableViewCell.swift

class SecondTableViewCell :UITableViewCell{

  //★★★UIとの接続
  @IBOutlet weak var cellImageView: UIImageView!
  @IBOutlet weak var textView: UITextView!

  override func awakeFromNib() {
    super.awakeFromNib()

    //CellのUIのプロパティー変更
    cellImageView.layer.cornerRadius = 25
  }

  override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
  }
}

7. TableViewへのセルの登録

viewDidLoad内などに記述

private let cellId = "cellId"

  @IBOutlet weak var secondTableView: UITableView!

  override func viewDidLoad() {
    super.viewDidLoad()

    //セルの登録（Xibファイル名:SecondViewTableViewCell.xibの場合)
    secondTableView.register(UINib(nibName: "SecondViewTableViewCell", bundle: nil), forCellReuseIdentifier: cellId)

  }
}

出来上がり

全コード

SecondTableViewCell.swift

import UIKit

class SecondTableViewCell :UITableViewCell{

  //cellIdを決めて格納
  private let cellId = "cellId"

  //★★★UIとの接続
  @IBOutlet weak var cellImageView: UIImageView!
  @IBOutlet weak var textView: UITextView!

  override func awakeFromNib() {
    super.awakeFromNib()

    //CellのUIのプロパティー変更
    cellImageView.layer.cornerRadius = 25

  }

  override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

  }
}

SecondViewController.swift

import UIKit

class SecondViewController : UIViewController{


  private let cellId = "cellId"

  @IBOutlet weak var secondTableView: UITableView!
  override func viewDidLoad() {
    super.viewDidLoad()

    secondTableView.delegate = self
    secondTableView.dataSource = self

    //セルの登録（Xibファイル名:SecondViewTableViewCell.xibの場合)
    secondTableView.register(UINib(nibName: "SecondViewTableViewCell", bundle: nil), forCellReuseIdentifier: cellId)
  }
}

extension SecondViewController :UITableViewDelegate,UITableViewDataSource{

  //セルの高さを指定
  func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 100
  }
  //セルの個数
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
  }
  //セルの内容
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = secondTableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath)
    cell.backgroundColor = .lightText

    return cell
  }
}

最後に

私の理解が間違っていたらご指摘いただければ幸いです。