RxDataSources 을 보면서 적절한 TableView 만들기

절차

1. Model 만들기

다음과 같은 Model이 있다고 한다.

struct CustomData {
    var str: String
}

TableView의 Section을 나타내는 구조체 만들기

struct SectionOfCustomData {
    var header: String
    var items: [Item]
}

extension SectionOfCustomData: SectionModelType {
    typealias Item = CustomData

    init(original: SectionOfCustomData, items: [SectionOfCustomData.Item]) {
        self = original
        self.items = items
    }
}

SectionOfCustomData 는 SectionModelType 를 준수해야 한다.

2. ViewController 만들기

Storyboard에서 ViewController 위에 TableView를 둡니다.
Storyboard에서 datasource/delegate를 설정하지 마십시오.

ViewController의 코드는 다음과 같다.

import UIKit
import RxSwift
import RxDataSources

class ViewController: UIViewController, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!
    var dataSource: RxTableViewSectionedReloadDataSource<SectionOfCustomData>!
    let d = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.rx.setDelegate(self).disposed(by: d)
        setupDataSource()
        bindModels()
    }

    func setupDataSource() {
        dataSource = RxTableViewSectionedReloadDataSource<SectionOfCustomData>(configureCell: {
            (ds: TableViewSectionedDataSource<SectionOfCustomData>, tableView: UITableView, indexPath: IndexPath, model: CustomData) -> UITableViewCell in

            let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
            cell.textLabel?.text = model.str
            return cell
        })
        dataSource.titleForHeaderInSection = { ds, index in
            return ds.sectionModels[index].header
        }
    }

    func bindModels() {
        let sections = [
            SectionOfCustomData(header: "First section",
                                items: [CustomData(str: "zero"),
                                        CustomData(str: "one") ]),
            SectionOfCustomData(header: "Second section",
                                items: [CustomData(str: "two"),
                                        CustomData(str: "three") ])
        ]
        Observable.just(sections)
            .bind(to: tableView.rx.items(dataSource: dataSource))
            .disposed(by: d)
    }
}

DataSource 설정하기

setupDataSource() 에서 표시되는 셀을 설정합니다.

다음 멤버에 클로저를 놓습니다.

configureCell (required) : Cell

titleForHeaderInSection : 섹션 헤더

titleForFooterInSection : 섹션 바닥글

etc

모델 바인딩

Model을 적절하게 만들고 SectionOfCustomData를 만들고 DataSource에 Bind합니다.

이상

UITableViewDelegate, UITableViewDataSource를 사용해보기

같은 것을 UITableViewDelegate , UITableViewDataSource 를 사용해 써 보았다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    let sections = [
        SectionOfCustomData(header: "First section",
                            items: [CustomData(str: "zero"),
                                    CustomData(str: "one") ]),
        SectionOfCustomData(header: "Second section",
                            items: [CustomData(str: "two"),
                                    CustomData(str: "three") ])
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self
    }
}

extension ViewController: UITableViewDataSource {

    func numberOfSections(in tableView: UITableView) -> Int {
        return sections.count
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return sections[section].items.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let model = sections[indexPath.section].items[indexPath.row]
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        cell.textLabel?.text = model.str

        return cell
    }
}

extension ViewController: UITableViewDelegate {

    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sections[section].header
    }
}

개인적인 감상

이번에는 셀과 모델이 간단하기 때문에 일반적으로 말할 수는 없지만

되어 있는 것이 사용하기 쉽다.

작법적인 쓰기가 역시 기억하기 쉽지 않다.

RxDataSource 사용하면 numberOfxxx 라든지 쓰지 않아도 좋고 편합니다.

쓰면서 디버깅하여 외형을 조정하고 싶을 때라든가는 UITableViewDelegate , UITableViewDataSource

여러 셀, 같은 Section 내에 여러 종류의 셀이 있을 때는 다시 이번 시도하려고 한다.