RxSwift笔记 - RxCocoa 基础 (四) : UITableView + RxDataSources

---

RxDataSources 介绍

RxDataSources Github 地址: RxDataSources

官方介绍:

UITableView and UICollectionView Data Sources for RxSwift (sections, animated updates, editing ...)

---

特点:

• 1、RxDataSource 的本质就是使用 RxSwift 对 UITableView 和 UICollectionView 的数据源做了一层包装。使用它可以大大减少我们的工作量

• 2、RxDataSources 是以 section 来做为数据结构的。所以不管我们的 tableView 是单分区还是多分区，在使用 RxDataSources 的过程中，都需要返回一个 section 的数组

---

安装

• CocoaPods

Podfile

pod 'RxDataSources', '~> 3.0'

• Carthage

Cartfile

github "RxSwiftCommunity/RxDataSources" ~> 3.0

---

单分区 TableView

方式一：使用自带的Section

// 创建表格
tableView = UITableView(frame: view.bounds, style: .plain)
// 注册单元格
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cellID")
view.addSubview(tableView)

// 初始化数据
let items = Observable.just([
    SectionModel(model: "",
                 items: ["UILabel的用法",
                         "UIButton的用法",
                         "UITextField的用法"])
    ])

// 创建数据源
let dataSource = RxTableViewSectionedReloadDataSource<SectionModel<String, String>>(configureCell: {
    (dataSource, tableView, indexPath, element) -> UITableViewCell in
    let cell = tableView.dequeueReusableCell(withIdentifier: "cellID")!
    cell.textLabel?.text = "\(indexPath.row): \(element)"
    return cell
})

// 数据绑定
items.bind(to: tableView.rx.items(dataSource: dataSource)).disposed(by: disposeBag)

---

方式二：使用自定义的Section

自定义 SectionModel

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

extension XMSessionModel: AnimatableSectionModelType {
    
    typealias Item = String
    
    var identity: String {
        return header
    }
    
    init(original: XMSessionModel, items: [Item]) {
        self = original
        self.items = items
    }
}

// 创建表格
tableView = UITableView(frame: view.bounds, style: .plain)
// 注册单元格
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cellID")
view.addSubview(tableView)

// 初始化数据
let sections = Observable.just([
    XMSessionModel(header: "",
                   items: ["UILabel的用法",
                           "UIButton的用法",
                           "UITextField的用法"])
    ])

// 创建数据源
let dataSource = RxTableViewSectionedReloadDataSource<XMSessionModel>( configureCell: {
    (dataSource, tableView, indexPath, item) -> UITableViewCell in
    let cell = tableView.dequeueReusableCell(withIdentifier: "cellID") ?? UITableViewCell(style: .default, reuseIdentifier: "cellID")
    cell.textLabel?.text = "\(indexPath.row): \(item)"
    return cell
})

// 数据绑定
sections.bind(to: tableView.rx.items(dataSource: dataSource)).disposed(by: disposeBag)

---

多分区的 TableView

方式一：使用自带的Section

// 创建表格
tableView = UITableView(frame: view.bounds, style: .plain)
// 注册单元格
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cellID")
view.addSubview(tableView)

// 初始化数据
let items = Observable.just([
    SectionModel(model: "基本控件",
                   items: ["UILabel的用法",
                           "UIButton的用法",
                           "UITextField的用法"]),
    SectionModel(model: "高级i控件",
                   items: ["UITableView的用法",
                           "UICollectionView的用法"])
    ])

// 创建数据源
let dataSource = RxTableViewSectionedReloadDataSource<SectionModel<String, String>>( configureCell: {
    (dataSource, tableView, indexPath, element) -> UITableViewCell in
    let cell = tableView.dequeueReusableCell(withIdentifier: "cellID")!
    cell.textLabel?.text = "\(indexPath.row): \(element)"
    return cell
})

// 设置分区头标题
dataSource.titleForHeaderInSection = { dataSource, index in
    return dataSource.sectionModels[index].model
}

// 设置分区尾部标题
dataSource.titleForFooterInSection = { dataSource, index in
    return "footer"
}

// 数据绑定
items.bind(to: tableView.rx.items(dataSource: dataSource)).disposed(by: disposeBag)

---

方式二：使用自定义的Section

XMSessionModel 请参考上面的结构

// 创建表格
tableView = UITableView(frame: view.bounds, style: .plain)
// 注册单元格
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cellID")
view.addSubview(tableView)

// 初始化数据
let items = Observable.just([
    XMSessionModel(header: "基本控件",
                   items: ["UILabel的用法",
                           "UIButton的用法",
                           "UITextField的用法"]),
    XMSessionModel(header: "高级i控件",
                   items: ["UITableView的用法",
                           "UICollectionView的用法"])
    ])

// 创建数据源
let dataSource = RxTableViewSectionedReloadDataSource<XMSessionModel>( configureCell: {
    (dataSource, tableView, indexPath, element) -> UITableViewCell in
    let cell = tableView.dequeueReusableCell(withIdentifier: "cellID")!
    cell.textLabel?.text = "\(indexPath.row): \(element)"
    return cell
})

// 设置分区头标题
dataSource.titleForHeaderInSection = { dataSource, index in
    return dataSource.sectionModels[index].header
}

// 设置分区尾部标题
dataSource.titleForFooterInSection = { dataSource, index in
    return "footer"
}

// 数据绑定
items.bind(to: tableView.rx.items(dataSource: dataSource)).disposed(by: disposeBag)