最近正在学习 RxSwift,希望能实践到项目中并更换几个模块,本系列文章会持续更新。这次的文章介绍了 TableView 在 RxSwift 下的使用
基础
RxSwift 是一个响应式框架,类似于 KVO 和 Swift 中的 didSet
的概念。接下来先介绍三个重要的类。
Observables 和 Observers
-
Observables
能够发出值改变的通知,就类似于一个属性值改变了,didSet 就被触发 -
Observers
能够订阅Observers
,他能够收到Observers
发出的通知,就类似于NotificationCenter.addObserver
DisposeBag
只要有函数返回 DisposeBag
就必须加上 addDisposableTo(disposeBag)
。这句话就是说在 deinit
的时候会自动销毁 Observers
,不这样做也许会导致程序崩溃或是别的问题。
接下来进入正题
首先在 storyBoad 中创建好一个控制器,并且给 cell 添加好 Identifier
![屏幕快照 2016-10-20 下午10.28.26-w442](https://o909w11l5.qnssl.com/屏幕快照 2016-10-20 下午10.28.26.png)
然后让我们创建一个数组,这个数组是一个静态数组,Observable
可以当值改变时发出通知,但是 just
代表只发送一次值,接下来值改变不会发送。
var dataArray = Observable.just([1, 2, 3, 4, 5, 6, 7, 8, 9])
接下来让我们创建一个 tableView,平常写法我们都要写上一堆的数据源方法,使用 RxSwift 会相当省事,几句代码就创建好了 tableview,并且不用担心会出任何问题。
![屏幕快照 2016-10-20 下午10.32.17](https://o909w11l5.qnssl.com/屏幕快照 2016-10-20 下午10.32.17.png)
这样一个 tableview 就创建好了,当你启动程序就可以看到 cell 显示在你的模拟器上。接下来让我解释一下这五个步骤的意思。
- 第一步先把数据源写好
- 第二步
bindTo
的意思是将数组与 tableview 绑定,dataArry 发出的通知会告知到tableView,并且这个函数是一个柯里话 - 第三步
rx
是为了调用接下来 Rxcocoa 的代码 - 第四步是绑定 cell,直接让 cell 支持重用,然后在闭包中对 cell 进行操作
- 第五步是确保控制器销毁的时候这个监听者也同时销毁
这五步完成后,你就完成了一个 tableView,让我们运行一下。
![屏幕快照 2016-10-21 上午11.00.44-w374](https://o909w11l5.qnssl.com/屏幕快照 2016-10-21 上午11.00.44.png)
接下来我们来完成点击 cell 以后一系列的逻辑。
首先我们创建一个空数组 var storedArray = Variable<[Int]>([])
然后处理 cell 的点击逻辑
![屏幕快照 2016-10-21 上午11.07.42](https://o909w11l5.qnssl.com/屏幕快照 2016-10-21 上午11.07.42.png)
- 第一步是处理 model 的点击,将 model 自身传进去
- 第二步是当值改变时,闭包会被触发
- 第三步是在闭包中我们将被点击行的模型数据 append 到 storedArray 中,并且输出相应被点击的 indexPath
当 storedArray 值改变时,我们也可以相应观察到
![屏幕快照 2016-10-21 上午11.13.15](https://o909w11l5.qnssl.com/屏幕快照 2016-10-21 上午11.13.15.png)
- 第一步是将 storedArray 变成 Observable,让这个值在改变时能发出通知
以上这几句我们就完成了创建 cell,设置数据源并且处理了点击 cell 的逻辑,但是这几步只适合于创建一个静态的 tableview。接下来让我们模拟一下上拉刷新来 reload tableView。
创建一个 Variable 数组 var a = Variable<[Int]>([1, 2, 3, 4, 5, 6, 7, 8, 9])
创建一个按钮,当点击后在数组末尾添加一个元素 a.value.append(1)
接下来重新设置 tableView
![屏幕快照 2016-10-21 上午11.18.43](https://o909w11l5.qnssl.com/屏幕快照 2016-10-21 上午11.18.43.png)
设置完以后运行一下软件,当点击按钮时你会发现 tableView 会自动刷新
![屏幕快照 2016-10-21 上午11.20.17-w369](https://o909w11l5.qnssl.com/屏幕快照 2016-10-21 上午11.20.17.png)
以上操作我们就完成了一个简单的 tableView 逻辑,接下来的文章我会逐步将常用的控件和逻辑用RxSwift来完成。
有任何问题欢迎大家一起讨论。