UITableViewでTableViewCell（Xib）を使ってみた

投稿日：2017年7月12日

1 はじめに
- 1.1 前提条件
- 1.2 事前準備
2 TableViewを準備
3 Xibを準備
4 tableviewに表示するcellにxibを指定する
5 さいごに

はじめに

どうも、はじめです。

今回はXib（TableViewCell）を使用したカスタムセルの使い方を書いてみようと思います。

前提条件

Swift 3.1

事前準備

SingleViewApplicationで新規プロジェクトの作成

TableViewを準備

まずはStoryBoard上に「Table View」を追加し、[Prototype Cells]を0に指定します。

次にUITableViewDelegateとUITableViewDataSourceを設定します。

[設定方法]

storyboardに追加したTableViewを右クリック
・Outlets → datasource
・Outlets → delegate
の右端にある○マークから自身のViewControllerにドラッグアンドドロップ

最後にViewController.swiftでdelegateとdatasourceを定義し、

TableViewをViewController.swiftにOutlet接続します。

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!
}

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

@IBOutlet weak var tableView: UITableView!

}

Xibを準備

Xib関連のファイルがわかりやすくなるように新規Groupを作成します。

→ Group名[UITableViewCell]とする

作成したGroup内に新規ファイル + Xibファイルの作成をします。

[command + N] → [Cocoa Touch Class]を選択
Next → Class:[TableViewCell],SubClass of:[UITableViewCell]
Also create XIB fileにチェックを入れてNext
保存したいディレクトリを選択してCreate

次にTableViewCell.xibにLabelを追加します。

このLabelにはTableViewのIndexPathを表示することとします。

Labelにデータをセットする準備として以下作業を行います。

・TableViewCell.swiftに先ほど追加したLabelをOutlet接続

・Labelにデータをセットするメソッドを作成

完成後のstoryboardとソースは以下のようになります。

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var indexPathNumber: UILabel!

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

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
    
    func setData(indexPathNumber: IndexPath) {
        self.indexPathNumber.text = String(indexPathNumber.row)
    }
    
}

import UIKit

class TableViewCell: UITableViewCell {

@IBOutlet weak var indexPathNumber: UILabel!

override func awakeFromNib() {

super.awakeFromNib()

}

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

super.setSelected(selected, animated: animated)

}

func setData(indexPathNumber: IndexPath) {

self.indexPathNumber.text = String(indexPathNumber.row)

}

tableviewに表示するcellにxibを指定する

XibをCellとして使用するには以下の二つを記述する必要があります。

・ViewDidLoadにて使用するXibを定義

・表示するCellに定義したXibを指定

以上で完成となりますので、追記後のソースと実行後の画面を載せておきます。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // nibName = xibに指定したUITableViewCellのClass名
        // forCellReuseIdentifier = このTableViewCellに設定するIdentifier
        tableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "Identifier")
    }

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

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // ひとまず今回は10件のみ表示とする
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // forCellReuseIdentifierに設定したIdentifierを指定
        let cell = tableView.dequeueReusableCell(withIdentifier: "Identifier", for: indexPath) as! TableViewCell
        cell.setData(indexPathNumber: indexPath)
        return cell
    }

}

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

@IBOutlet weak var tableView: UITableView!

override func viewDidLoad() {

super.viewDidLoad()

// nibName = xibに指定したUITableViewCellのClass名

// forCellReuseIdentifier = このTableViewCellに設定するIdentifier

tableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "Identifier")

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

// ひとまず今回は10件のみ表示とする

return 10

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

// forCellReuseIdentifierに設定したIdentifierを指定

let cell = tableView.dequeueReusableCell(withIdentifier: "Identifier", for: indexPath) as! TableViewCell

cell.setData(indexPathNumber: indexPath)

return cell

}

さいごに

最近すごく思うのは見た目に関するものは出来る限りstoryboard上で行いたい

（コードではあまり書きたくない）ということです。

今回書かせて頂いた内容ではmain.storyboard上に指定したXibの内容は表示されません。

Xibの内容をmain.storyboard上に表示させる方法等ご存知の方がいらっしゃれば

是非コメントいただければと思います。

最後まで見て頂きありがとうございました。

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。

Mig.TnTi より:

2018年2月16日 8:46 AM

勉強のためカスタムViewを調べていてたどり着きました。

最初の[Prototype Cells]を0にする理由がわかりませんでしたが、それ以外は、「なぜ？」「なにを」「どうする」がわかりやすくて、とても勉強になりました。

まだ、試していませんが、StoryBoardでCellのクラスに作成したカスタムCellのクラスを書くだけで表示できないでしょうか？

適当な発言で申し訳ありません。

返信
- nukky より:
  
  2018年2月25日 12:32 AM
  
  コメントありがとうございます！
  
  StoryBoardでCellのクラスに作成したカスタムCellのクラスを書くことで表示することは可能です、
  ですが、Xibを用意することにより汎用的に複数のクラスで扱うこともできますしコード上で追加したTableViewでも扱うことができるので今回はそのような形にしました。
  せっかくコメントもいただいたので、Xibを用意せずにStoryBoardでカスタムCellを扱う方法は今度記事にしたいと思います！
  
  返信