列表tableview collectionview如何使用Rx

1. RxSwift

Rx里面有列表的扩展，支持基本的列表展示
● 有下面两种方式

 let items = Observable.just([
             "First Item",
             "Second Item",
             "Third Item"
         ])

         items
         .bind(to: tableView.rx.items) { (tableView, row, element) in
             let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")!
             cell.textLabel?.text = "\(element) @ row \(row)"
             return cell
         }
         .disposed(by: disposeBag)


 
 items
  .bind(to: tableView.rx.items(cellIdentifier: "Cell", cellType: UITableViewCell.self)) { (row, element, cell) in
                cell.textLabel?.text = "\(element) @ row \(row)"
   }.disposed(by: disposeBag)


// 要实现 添加 删除 ，修改
//  直接修改Observable

看上面的方式，只支持简单的列表，有多个section的情况就不行了

2. 复杂的列表使用RxDataSource

上面说了Rx只能用来展示简单的列表，复杂的列表以及列表的添加删除动画过程如何实现呢，就是RxDataSource 提供了一些高级的方法实现。

RxTableViewSectionedReloadDataSource 和RxTableViewSectionedAnimatedDataSource

比如要实现下图的列表，

image

2.1 RxTableViewSectionedReloadDataSource

要实现上面的列表，要先定义sectionmodel和cellmodel，并且sectionmodel 要实现 SectionModelType 协议

struct SectionModel {
    var header: String

    var numbers: [CellModel]

    var updated: Date

    init(header: String, numbers: [Item], updated: Date) {
        self.header = header
        self.numbers = numbers
        self.updated = updated
    }
}

struct CellModel {
    let number: Int
    let date: Date
}

extension NumberSection: SectionModelType {
    init(original: NumberSection, items: [IntItem]) {
        self = original
        self.numbers = items
    }
    typealias Item = IntItem
    var items: [IntItem] {
        return numbers
    }
}

二，要实现RxTableViewSectionedReloadDataSource, 泛型使用刚才定义的sectionmode

let dataSource = RxTableViewSectionedReloadDataSource(
            configureCell: { ds, tv, _, i in
                let cell = tv.dequeueReusableCell(withIdentifier: "Cell") ?? UITableViewCell(style: .default, reuseIdentifier: "Cell")
                cell.textLabel?.text = "\(i)"
                return cell
            },
            titleForHeaderInSection: { ds, index in
                return ds.sectionModels[index].header
            }
        )

三，创建列表数据 Observal ，把datasour和tableview 绑定起来

Observal.just([数据源])
.bind(to: tableView.rx.items(dataSource: dataSource))
.disposed(by: disposeBag)`

通过上面步骤一个包含的多个section的列表就展示出来了。

2.2 RxTableViewSectionedAnimatedDataSource

如果要实现添加移动删除动态效果，使用这个DataSource，

首先 sectionmodel 要实现AnimatableSectionModelType协议,
cellModel 要遵循 IdentifiableType + Equatable 协议

extension SectionModel
    : AnimatableSectionModelType, Equatable {
        
        typealias Identity = String

    var identity: String {
        return header
    }  
    }

extension CellModel
    : IdentifiableType
    , Equatable {
    typealias Identity = Int

    var identity: Int {
        return number
    }
}


func == (lhs: CellModel, rhs: CellModel) -> Bool {
    return lhs.number == rhs.number && lhs.date == rhs.date
}


func == (lhs: SectionModel, rhs: SectionModel) -> Bool {
    return lhs.header == rhs.header && lhs.items == rhs.items && lhs.updated == rhs.updated
}

实现这些协议可以更好的比较不同sectionmodel 和cellmodel 的变化，来实现列表的刷新。

3. 一个demo 实现了列表的添加删除移动