16.6Todo I - 通过一个真实的App体会Rx的基本概念

经过了前面几节的内容铺垫后,现在,是时候在一个真的应用里感受下这些的Rx的概念了。在日常的开发中,如何通过RxSwift绑定的用户界面和模式?如何在不同的控制器之间共享数据?通过对这些内容的实践,你就会更真实的感受到之前提到的那些基本概念的含义。

当然,作为开始,我们的目标还不是一个MVVM架构的应用程序,那是最终的目标。在这一节,我们先从一个常规开发的应用程序开始,用的Rx的思想改造一些常规功能的实现,以此,加深对观察的,订阅,主题,处置这些概念的理解。

ToDo App

首先,大家可以在Github的上下载RxToDoDemo源代码,进入ToDoDemoStarter目录,这是项目的起始源代码。执行先pod install安装RxSwift,完成后,打开ToDoDemo.xcworkspace

RxToDo

继续之前,我们先简单了解下这个项目:

首先,模型目录中,是应用使用的数据,是它遵从一个NSCoding的类,方便我们序列化成plist中保存和加载其中,。name表示待办事项的标题,isFinished表示是否完成;

class TodoItem: NSObject, NSCoding {
    var name: String = ""
    var isFinished: Bool = false

    // ...
}

其次,资产目录中,是应用程序的UI。在Main.storyboard中,我们希望点击应用程序的右上角+添加新的待办事项,点击待办事项内容所在行可以用一个蓝色的对勾切换完成状态,下面的绿色按钮清空整个待办事项列表;蓝色按钮保存当前所有的待办事项内容和完成状态;

第三,控制器目录中是目前App唯一的视图控制器。它包含了App的Model,@IBOutlet以及@IBAction。在最开始的这个版本里,为了简单起见,我们让所有添加的todo内容和状态都是相同的。

class TodoListViewController: UIViewController {
    var todoItems: [TodoItem] = []
    @IBOutlet weak var tableView: UITableView!

    required init?(coder aDecoder: NSCoder) {
        // ...
    }

    @IBAction func addTodoItem(_ sender: Any) {
        // ...
    }

    @IBAction func saveTodoList(_ sender: Any) {
        // ...
    }

    @IBAction func clearTodoList(_ sender: Any) {
        // ...
    }
}

最后,为了实现TodoListViewController中的功能,我们把一些具体的功能代码放在了Helper目录,其中TodoListTableView.swift中存放的是表视图的数据源以及委托,TodoListViewConfigure.swift中存放的,则是保存和加载待办事项模型相关的代码。

对待办事项的响应式改造

变量

对这个应用程序的第一个改造,让的英文TodoListViewController中的模型变成响应式的,为此,把我们之前的todoItems变成一个Variable,并一个添加用于回收取消订阅的DisposeBag对象:

// In TodoListViewController.swift

class TodoListViewController: UIViewController {
    let todoItems = Variable<[TodoItem]>([])
    let bag = DisposeBag()

    // ...
}

这样一来,所有之前直接访问todoItems数据的部分,都要改成访问todoItems.value。首先,是显示Todo列表的UITableView,打开TodoListTableView.swift,修改对应的数据源和委托方法。唯一需要注意的是,在左滑删除的代码里,我们只是删除了todoItems的数据,而没有执行删除cell UI的代码。稍后就会看到,在todoItems变成Variable之后,所有UI相关的代码,将会在对其的订阅中统一处理。

// UITableView delegate
extension TodoListViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView,
                   didSelectRowAt indexPath: IndexPath) {
        if let cell = tableView.cellForRow(at: indexPath) {
            let todo = todoItems.value[indexPath.row]

            todo.toggleFinished()
            configureStatus(for: cell, with: todo)
        }

        tableView.deselectRow(at: indexPath, animated: true)
    }

    func tableView(_ tableView: UITableView,
                   commit editingStyle: UITableViewCellEditingStyle,
                   forRowAt indexPath: IndexPath) {
        todoItems.value.remove(at: indexPath.row)
    }
}

// UITableView data source
extension TodoListViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView,
                   numberOfRowsInSection section: Int) -> Int {
        return self.todoItems.value.count
    }

    func tableView(_ tableView: UITableView,
                   cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(
            withIdentifier: "TodoItem", for: indexPath)
        let todo = todoItems.value[indexPath.row]

        configureLabel(for: cell, with: todo)
        configureStatus(for: cell, with: todo)

        return cell
    }
}

其次,修改通过故事板的初始化init?方法,此时,已经我们不需要在这里初始化todoItems了:

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    loadTodoItems()
}

第三,序列的英文化todoItems的时候,改成要访问todoItems.value属性在TodoListViewConfigure.swift里,把。saveTodoItems状语从句:loadTodoItems修改分类中翻译下面这样:

func saveTodoItems() {
    let data = NSMutableData()
    let archiver = NSKeyedArchiver(forWritingWith: data)

    archiver.encode(todoItems.value, forKey: "TodoItems")
    archiver.finishEncoding()

    data.write(to: dataFilePath(), atomically: true)
}

func loadTodoItems() {
    let path = dataFilePath()

    if let data = try? Data(contentsOf: path) {
        let unarchiver = NSKeyedUnarchiver(forReadingWith: data)
        todoItems.value =
            unarchiver.decodeObject(forKey: "TodoItems") as! [TodoItem]

        unarchiver.finishDecoding()
    }
}

第四,把TodoListViewController.swift中,保存和清除待办事项列表的代码改成这样:

class TodoListViewController: ViewController {
    @IBAction func addTodoItem(_ sender: Any) {
        let todoItem = TodoItem(name: "Todo Demo", isFinished: false)
        todoItems.value.append(todoItem)
    }

    @IBAction func clearTodoList(_ sender: Any) {
        todoItems.value.removeAll()
    }
}

可以看到,此时,部分这两代码也。只是在处理todoItems自身,而没有UI相关的代码了。都修改完成之后,按Cmd + B构建一次,确认没有错误。现在,来我们着手处理当todoItems的值更新时,对应UI的修改。

由于todoItems的英文一个主题,作为一个观察者,我们修改它的值,就相当于它自己订阅到了事件。而要响应值的修改,我们就把它当作一个可观察的直接订阅就好了。在viewDidLoad里,添加下面的代码:

todoItems.asObservable().subscribe(
    onNext: { [weak self] todos in
    self?.updateUI(todos: todos)
}).addDisposableTo(bag)

很简单,发现当todoItems的值发生变化的时候,调用TodoListViewController中的updateUI方法更新界面,稍后,我们就来实现这个方法。现在,先来看onNext关闭中捕获的self,要用为什么weak呢?

RxToDo

如上图所示,subscribe方法返回的Disposable对象被bag管理,因此bag持有一个强引用;此时,如果Disposable对象的onNextclousre中持有指回self的强引用,TodoListViewController对象和Disposable对象之间就会形成引用循环了。因此,这里要使用weak self

理解了这个问题之后,来我们实现updateUI方法:

func updateUI(todos: [TodoItem]) {
    self.tableView.reloadData()
}

很简单对不对?只要我们让tableView对象重新加载数据就好了,尽管这不是一个高效的方法,也还有很多交互细节可以改进,但至少你可以感觉到,通过主题,把我们根据todoItems的值更新UI的代码,都放到了一起。

绑定更多和UI相关的操作

。看到这里,你可能会觉得,这一点点小改进没什么,至少不足以激起的Rx对你的兴趣接下来,我们再对UI进行一点约束,例如:

  • 顶部的标题应该显示当前待办事项的个数;
  • 清空列表后应该禁用绿色按钮;
  • 限制最多只能存在4个未完成的待办事项,否则就禁用添加按钮;

传统的方式怎么办呢你可能会想到针对?todoItems利用KVO的机制来解决问题,但毕竟我们在使用夫特,一来,KVO只能处理有限类型的属性;二来,我们似乎一下子又回到了披着夫特外衣的OC世界;最后,KVO的使用在夫特中也真的非常不方便,就单那一长串#selector就会让代码看上去并不那么夫特。

现在,有了RxSwift,todoItems变成了一个主题,为了实现上面的功能,只要我们在updateUI中添加几行代码就搞定了:

func updateUI(todos: [TodoItem]) {
    clearTodoBtn.isEnabled = !todos.isEmpty
    addTodo.isEnabled =
        todos.filter { !$0.isFinished }.count < 4
    title = todos.isEmpty ? "Todo" : "\(todos.count) ToDos"

    self.tableView.reloadData()
}

怎么样?是不是看着就很斯威夫特。执行一下就会发现,前两个功能都好用,限制未完成待办事项个数的功能并不好用。这是因为,订阅我们的todoItems并不会响应数组中成员的属性被修改的事件,因此,编辑已有待办事项的完成状态并不会给todoItems。发送通知这里,一个简单的办法就是,在TodoListTableView.swift中,把处理单元自动反选的代码改成这样:

func tableView(_ tableView: UITableView,
               didSelectRowAt indexPath: IndexPath) {
    if let cell = tableView.cellForRow(at: indexPath) {
        let todo = todoItems.value[indexPath.row]
        todo.toggleFinished()

        // Trigger event
        todoItems.value[indexPath.row] = todo

        configureStatus(for: cell, with: todo)
    }

    tableView.deselectRow(at: indexPath, animated: true)
}

给通过对应位置的todoItems赋值,我们就可以变相触发事件,订阅进而到todoItems的值了。

下一步是什么?

在这个简单的例子里,我们开始把一个用传统方式编写的应用程序,进行一点改进,初步体会了如何通过RxSwift把更新模型和更新UI的代码进行分离。但此时,添加新的Todo的功能还没有实现,在下一节,我们就来看如何通过主题简化在不同的控制器之间传递数据,并实现新建和编辑待办事项的功能。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容