UITableViewのRxSwiftデータバインディング、CustomCellを使ったバインディング
概要
前回はUITableViewの基本形を紹介しました。
他の日本語での記事が検索に引っかかりにくいこともあります。
今回はより実務レベルにシフトしてCustomCell
クラスを使ったデータバインディングのやり方について解説します。
開発環境について
Xcode: 10.1
Swift: 4.2
RxSwift: 4.4.0
RxCocoa: 4.4.0
(まだRxDataSourceを使う必要はありません)
storyboardの構成について
今回はカスタムセルを使うのですがxib
ファイルから生成するのではなくクラスを作成するだけです。
よってxib
ファイルを作成する必要はありません。
(xibファイルを使って連携する方法は次の記事ぐらいで紹介します)
なので、最初はカスタムはUITableViewCell
クラスを作成する必要があります。
今回はそのクラスをCustomCell
と命名します。
CustomCell
のソースコードは次のようになります。
CustomCell
import UIKit /// CustomCellのラベルに反映させるようにModelクラス struct CustomCellModel { let name: String let email: String } class CustomCell: UITableViewCell { @IBOutlet weak var nameLabel: UILabel! @IBOutlet weak var emailLabel: UILabel! override func awakeFromNib() { super.awakeFromNib() // Initialization code } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) // Configure the view for the selected state } }
また、storyboardの配置は次のようになります。
コツは先にUITableViewCell
をCustomCell
と認識させ、nameLabel
とemailLabel
をそれぞれ@IBOutlet
で接続させます。
storyboard嬢のUITableViewCell
のidentifier
にはCustomCell
と入力します。
基本的な準備は以上となります。
ソースコードについて
では次にVC側のソースコードの解説に入ります。
ViewController.swift
import UIKit import RxCocoa import RxSwift class ViewController: UIViewController { @IBOutlet weak var tableView: UITableView! let data = Observable<[CustomCellModel]>.just([ CustomCellModel(name: "山田花子", email: "hanako@gmail.com"), CustomCellModel(name: "田中太郎", email: "taro@gmail.com"), CustomCellModel(name: "石田真一", email: "shinichi@gmail.com") ]) var disposeBag = DisposeBag() override func viewDidLoad() { super.viewDidLoad() data.bind(to: tableView.rx.items(cellIdentifier: "CustomCell", cellType: CustomCell.self)) { row, element, cell in // row: Int アイテムのインデックス // element: Item(CustomCellModel) アイテムのインスタンス // cell: CustomCell セルのインスタンス // ここでセルの中身を設定する cell.nameLabel.text = element.name cell.emailLabel.text = element.email } .disposed(by: disposeBag) } }
このようになります。 これでXcodeでアプリを起動してみましょう。
このように表示されたら成功です。
ソースコードを見直してみると見事にRxSwift
のメリットであるdelegateを設定する必要がない利点が活かせているのではないでしょうか。
UITableViewDataSource
をVC でセットしていないのがコードの特徴です。
まとめ
前回の基本形と違う部分は
data
の型をObservable<[CustomCellModel]>
にしている。- バインディング処理部分の
cellType
にCustomCell
を指定している。
これでxib
ファイルを使わないでUITableViewでカスタムセルを使用する方法が分かりました。
ここまで来るとRxSwiftを使ったUITableViewの設計方針が見えてきますね。