RxSwift 系列文章(一)

作者: 没阳光的午后 | 来源:发表于2016-10-21 12:05 被阅读338次

最近正在学习 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来完成。

有任何问题欢迎大家一起讨论。

项目地址

相关文章

网友评论

    本文标题:RxSwift 系列文章(一)

    本文链接:https://www.haomeiwen.com/subject/ojlquttx.html