iphoneアプリ開発で頻繁に使用されるTable View。
メディアサイトの記事一覧ページ等で、同じカード型レイアウトの繰り返しに使われるUIコンポーネントです。
自分への備忘録として、カスタムセルを使用したテーブルレイアウトの使い方を紹介します。
Table Viewを作成する

table Viewを使用するために、まずはUI パーツから
- Table View Controller
- Table View
のどちらかをstoryboardに配置します。
配置したControllerのswiftファイルのclass宣言部分を
1 2 |
class TableViewController: UITableViewController { } |
に変更して、UITableViewControllerを使用できるようにします。
これで、Table Viewを使用できるようになりました。
カスタムセルを作成する
Table Viewの一つずつのセルを自由にカスタマイズするためにはカスタムセルを使用します。
カスタムセルを作成するには、以下のように
Also Create XIB File
にチェックをした状態で、新規ファイルを作成します。作成すると、
- TableViewCell.swift
- TableViewCell.xib
という2ファイルが作成されます。
この2ファイルがカスタムセルという、Table Viewの各コンテンツの内容を定義するファイルになります。
カスタムセルを定義する
作成後、カスタムセルをMain.storyboardのTable Viewに紐付ける作業が必要です。
まずは、

TableViewCell.xibのIdentityに対して、任意の名前を設定します。
その後に、TableViewを配置したControllerファイルに対して、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
override func viewDidLoad() { super.viewDidLoad() tableView.register(UINib(nibName: "TableViewCell", bundle: nil),forCellReuseIdentifier:"customTableViewCell") configureTableView() } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 2; } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "customTableViewCell", for: indexPath) as! TableViewCell return cell } func configureTableView() { tableView.rowHeight = 450 } |
と記載します。
上から順にソースの解説をすると、
1 |
tableView.register(UINib(nibName: "TableViewCell", bundle: nil),forCellReuseIdentifier:"customTableViewCell") |
Main.storyboardのtableViewに対して、今回作成したxibファイル(カスタムセル)を登録する記述です。
- nibNameにファイル名
- forCellReuseIdentifierに先程設定したxibファイルのidentityの名前
を設定します。
これで、Main.storyboardのtableViewと今回作成したカスタムセルが繋がりました。
1 2 3 4 5 6 7 8 9 |
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 2; } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "customTableViewCell", for: indexPath) as! TableViewCell return cell } |
この部分はtable viewの記述で、それぞれ
- 2つ(適当)セルを表示する
- セルの内容を編集
しているメソッドです。
1 2 3 |
func configureTableView() { tableView.rowHeight = 450 } |
最後のこのメソッドはカスタムセルの高さを調整しています。(なくても大丈夫です。)
この状態でアプリをビルドすると、以下のように空のセルが2つ表示されるアプリが作成されます。

カスタムセルの中身を編集する
Table Viewとカスタムセルが紐付いたので、カスタムセルの中身を編集しましょう。
Main.storyboardのUIパーツを配置して、Controllerと関連付けすることが可能です。

この画像は、Labelコンポーネントを配置して、TableViewCell.swiftに関連付けした(control + ドラッグアンドドロップ)した状態です。
ここで指定したアウトレット名に対して、Table View側のコントローラーから値を代入することで、カスタムセルの中身を編集します。
TableViewCell.swift
1 2 3 4 5 6 7 8 9 |
import UIKit class TableViewCell: UITableViewCell { @IBOutlet var titleText: UILabel! override func awakeFromNib() { super.awakeFromNib() // Initialization code } } |
TableViewControllerのcellを編集するメソッド内
1 2 3 4 5 |
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "customTableViewCell", for: indexPath) as! TableViewCell cell.titleText?.text = "タイトル!!" return cell } |
このように変更すると、TableViewControllerから紐付いているカスタムセルのtitleTextに文言が代入されます。
そして、この状態でビルドすると、

カスタムセルが編集された状態でアプリが表示されます。
これで、カスタムセルを使用したTable Viewの完成です!
あとは、好きなように、カスタムセルをレイアウトし、TableViewControllerから値を渡してやりましょう!!