RxSwift - UITableview

452 阅读2分钟

一、基本使用

1. 展示

image.png


// 添加视图
view.addSubview(tableView)

// 初始化数据
let items = Observable.of([
    EDUNewsModel.init(title: "RxSwift"),
    EDUNewsModel.init(title: "土豆,土豆"),
    EDUNewsModel.init(title: "RxSwift"),
    EDUNewsModel.init(title: "土豆,土豆"),
])

// 设置列表数据 展示数据
items.bind(to: tableView.rx.items) { (tableView, row, element) in
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")!
    cell.textLabel?.text = "\(row): \(element.title)"
    return cell
}.disposed(by: dispostBag)
        

2.分区

image.png

import RxDataSources


// 添加视图
view.addSubview(tableView)

// 初始化数据
let items = Observable.of([
    SectionModel(model: "第一个分区", items: [
        EDUNewsModel.init(title: "RxSwift"),
        EDUNewsModel.init(title: "土豆,土豆"),
        EDUNewsModel.init(title: "RxSwift"),
        EDUNewsModel.init(title: "土豆,土豆")]),

    SectionModel(model: "第一个分区", items: [
        EDUNewsModel.init(title: "RxSwift"),
        EDUNewsModel.init(title: "土豆,土豆"),
        EDUNewsModel.init(title: "RxSwift"),
        EDUNewsModel.init(title: "土豆,土豆")])
])

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

// 创建分区头
dataSource.titleForHeaderInSection = { item, index in
    return item.sectionModels[index].model
}

// 设置列表数据 展示数据
items.bind(to: tableView.rx.items(dataSource: dataSource)).disposed(by: dispostBag)
       

二、交互

1. 点击交互


// 点击行
tableView.rx.itemSelected.subscribe(onNext: { indexPath in
    print("点击了第\(indexPath.row)行")
}).disposed(by: dispostBag)


// 点击行获取对应模型
tableView.rx.modelSelected(EDUNewsModel.self).subscribe(onNext: { model in
    print("点击行,对应的标题:\(model.title)")
}).disposed(by: dispostBag)

       

2. 数据交互

import Foundation


enum TableViewEditingCommand {
    case setItems(items: [EDUNewsModel]) // 设置列表
    case addItem(item: EDUNewsModel) // 添加行
    case insertItem(item: EDUNewsModel, at: IndexPath) // 插入行
    case moveItem(from: IndexPath, to: IndexPath) // 移动行
    case deleteItem(index:IndexPath) // 删除行
}

struct TableViewModel {
    var items: [EDUNewsModel]
    init(items: [EDUNewsModel]) {
        self.items = items
    }

    func execute(command: TableViewEditingCommand) -> TableViewModel {
        switch command {
        case .setItems(let items):
            print("设置列表数据")
            return TableViewModel.init(items: items)

        case .addItem(let item):
            print("添加行")
            var items = self.items
            items.append(item)
            return TableViewModel.init(items: items)

        case .insertItem(let item, let at):
            print("插入行")
            var items = self.items
            items.insert(item, at: at.row)
            return TableViewModel.init(items: items)

        case .moveItem(let from, let to):
            print("移动行")
            var items = self.items
            items.insert(items.remove(at: from.row), at: to.row)
            return TableViewModel.init(items: items)

        case .deleteItem(let index):
            print("删除行")
            var items = self.items
            items.remove(at: index.row)
            return TableViewModel.init(items: items)
        }
    }
}

- 设置刷新数据/添加/插入/删除

let initiaVM = TableViewModel()

        

// 刷新列表

let refreshCommand = setButton.rx.tap.asObservable()
    .startWith(()) // 加这个为了页面初始化时会自动加载一次数据
    .flatMapFirst(getRandomResult)
    .map(TableViewEditingCommand.setItems)


let addCommand = addButton.rx.tap.asObservable()
    .map{EDUNewsModel.init("RxSwift", id: "\(Int(arc4random()))")}
    .map(TableViewEditingCommand.addItem)



// 移动条目
let moveCommand = tableView.rx.itemMoved.asObservable()
    .map(TableViewEditingCommand.moveItem)


// 删除条目
let deleteComand = tableView.rx.itemDeleted.asObservable()
    .map(TableViewEditingCommand.deleteItem)


let obsevableTable = Observable.of(refreshCommand,addCommand,moveCommand,deleteComand)
obsevableTable.merge()
    .scan(initiaVM, accumulator: { (vm: TableViewModel, command: TableViewEditingCommand) -> TableViewModel in
        return vm.execute(command: command)
    })
    .startWith(initiaVM)
    .map {
        [AnimatableSectionModel(model: "", items: $0.items)]
    }
    .share(replay: 1)

    .bind(to: tableView.rx.items(dataSource: EDUFeaturesNewSViewController.dataSource()))

    .disposed(by: dispostBag)

tutieshi_640x1240_12s.gif