【iOS開発】カスタムセルを使用したTable View(テーブルビュー)の使い方【iphoneアプリ・swift】

iphoneアプリ開発で頻繁に使用されるTable View。

メディアサイトの記事一覧ページ等で、同じカード型レイアウトの繰り返しに使われるUIコンポーネントです。

自分への備忘録として、カスタムセルを使用したテーブルレイアウトの使い方を紹介します。

Table Viewを作成する

table Viewを使用するために、まずはUI パーツから

Table View Controller
Table View

のどちらかをstoryboardに配置します。

配置したControllerのswiftファイルのclass宣言部分を

class TableViewController: UITableViewController {
}

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ファイルに対して、

    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
    }

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

}

と記載します。

上から順にソースの解説をすると、

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

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

Main.storyboardのtableViewに対して、今回作成したxibファイル(カスタムセル)を登録する記述です。

nibNameにファイル名
forCellReuseIdentifierに先程設定したxibファイルのidentityの名前

を設定します。

これで、Main.storyboardのtableViewと今回作成したカスタムセルが繋がりました。

    
    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
    }

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つ(適当)セルを表示する
セルの内容を編集

しているメソッドです。

func configureTableView() {
        tableView.rowHeight = 450
    }

func configureTableView() {

tableView.rowHeight = 450

}

最後のこのメソッドはカスタムセルの高さを調整しています。(なくても大丈夫です。)

この状態でアプリをビルドすると、以下のように空のセルが2つ表示されるアプリが作成されます。

カスタムセルの中身を編集する

Table Viewとカスタムセルが紐付いたので、カスタムセルの中身を編集しましょう。

Main.storyboardのUIパーツを配置して、Controllerと関連付けすることが可能です。

この画像は、Labelコンポーネントを配置して、TableViewCell.swiftに関連付けした(control + ドラッグアンドドロップ)した状態です。

ここで指定したアウトレット名に対して、Table View側のコントローラーから値を代入することで、カスタムセルの中身を編集します。

TableViewCell.swift

import UIKit

class TableViewCell: UITableViewCell {
    @IBOutlet var titleText: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
}

import UIKit

class TableViewCell: UITableViewCell {

@IBOutlet var titleText: UILabel!

override func awakeFromNib() {

super.awakeFromNib()

// Initialization code

}

TableViewControllerのcellを編集するメソッド内

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "customTableViewCell", for: indexPath) as! TableViewCell
        cell.titleText?.text = "タイトル！！"
        return cell
    }