Swift - RxSwift的使用详解34(UITableView的使用5:可编辑表格)
作者:hangge | 2018-03-16 08:10
八、可编辑表格
1,效果图
(1)程序启动后表格会自动加载 5 条随机数据。点击“刷新”按钮则又重新生成 5 条数据并显示。
(2)点击“加号”图标后,会在当前数据集的末尾添加一条随机数据并显示。
(3)点击单元格左侧的“减号”图标则可以将该行数据删除。
(4)拖动单元格右侧的控制图标可以改变显示顺序。
2,样例代码
(1)由于编辑操作比较多,我们首先使用 enum 创建一个命令枚举,里面定义了对 tableView 数据的各种操作。//定义各种操作命令 enum TableEditingCommand { case setItems(items: [String]) //设置表格数据 case addItem(item: String) //新增数据 case moveItem(from: IndexPath, to: IndexPath) //移动数据 case deleteItem(IndexPath) //删除数据 }
(2)接着定义 tableView 对应的 ViewModel。这里面除了保存有表格数据外,还包含上面定义的 4 个操作命令的具体实现。
//定义表格对应的ViewModel struct TableViewModel { //表格数据项 fileprivate var items:[String] init(items: [String] = []) { self.items = items } //执行相应的命令,并返回最终的结果 func execute(command: TableEditingCommand) -> TableViewModel { switch command { case .setItems(let items): print("设置表格数据。") return TableViewModel(items: items) case .addItem(let item): print("新增数据项。") var items = self.items items.append(item) return TableViewModel(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(items: items) case .deleteItem(let indexPath): print("删除数据项。") var items = self.items items.remove(at: indexPath.row) return TableViewModel(items: items) } } }
(3)最后便是主视图控制器代码。
import UIKit import RxSwift import RxCocoa import RxDataSources class ViewController: UIViewController { //刷新按钮 @IBOutlet weak var refreshButton: UIBarButtonItem! //新增按钮 @IBOutlet weak var addButton: UIBarButtonItem! //表格 var tableView:UITableView! let disposeBag = DisposeBag() override func viewDidLoad() { super.viewDidLoad() //创建表格视图 self.tableView = UITableView(frame: self.view.frame, style:.plain) //创建一个重用的单元格 self.tableView!.register(UITableViewCell.self, forCellReuseIdentifier: "Cell") self.view.addSubview(self.tableView!) //表格模型 let initialVM = TableViewModel() //刷新数据命令 let refreshCommand = refreshButton.rx.tap.asObservable() .startWith(()) //加这个为了页面初始化时会自动加载一次数据 .flatMapLatest(getRandomResult) .map(TableEditingCommand.setItems) //新增条目命令 let addCommand = addButton.rx.tap.asObservable() .map{ "\(arc4random())" } .map(TableEditingCommand.addItem) //移动位置命令 let movedCommand = tableView.rx.itemMoved .map(TableEditingCommand.moveItem) //删除条目命令 let deleteCommand = tableView.rx.itemDeleted.asObservable() .map(TableEditingCommand.deleteItem) //绑定单元格数据 Observable.of(refreshCommand, addCommand, movedCommand, deleteCommand) .merge() .scan(initialVM) { (vm: TableViewModel, command: TableEditingCommand) -> TableViewModel in return vm.execute(command: command) } .startWith(initialVM) .map { [AnimatableSectionModel(model: "", items: $0.items)] } .share(replay: 1) .bind(to: tableView.rx.items(dataSource: ViewController.dataSource())) .disposed(by: disposeBag) } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) tableView.setEditing(true, animated: true) } //获取随机数据 func getRandomResult() -> Observable<[String]> { print("生成随机数据。") let items = (0 ..< 5).map {_ in "\(arc4random())" } return Observable.just(items) } } extension ViewController { //创建表格数据源 static func dataSource() -> RxTableViewSectionedAnimatedDataSource <AnimatableSectionModel<String, String>> { return RxTableViewSectionedAnimatedDataSource( //设置插入、删除、移动单元格的动画效果 animationConfiguration: AnimationConfiguration(insertAnimation: .top, reloadAnimation: .fade, deleteAnimation: .left), configureCell: { (dataSource, tv, indexPath, element) in let cell = tv.dequeueReusableCell(withIdentifier: "Cell")! cell.textLabel?.text = "条目\(indexPath.row):\(element)" return cell }, canEditRowAtIndexPath: { _, _ in return true //单元格可删除 }, canMoveRowAtIndexPath: { _, _ in return true //单元格可移动 } ) } }
全部评论(0)