使用RxSwift切换组件
拨动开关列表在移动世界中广泛存在。 我在我使用的大多数应用程序的“设置”屏幕中找到它。 对我来说, 打开和关闭事物并将其保存在某个地方的简单动作隐藏了我将要揭示的有趣的复杂性。
在本文中,我将使用RxSwift
构建“切换列表”屏幕。 我将使用上一篇有关自动完成的文章中介绍的技术。 我们将创建Toggle
组件-一个带有输入和输出要插入的黑盒子。 阅读此书后,您将可以在项目中使用它来建立自己的切换体验。
切换
首先,了解我们将要积累的经验。 请注意,在将其状态发送到服务器时,单次切换处于禁用状态,有时它会摇动并退回到先前的状态-发生保存错误时:
在Swift中也一样:
并提供用于使用Toggle
配置单个UISwitch
支架:
现在,将在setUp(settingSwitch:with toggle:)
完成输出编排。 它以settingSwitch
和toggle
作为参数。 在上面的视频中,对UISwitch
进行了三种修改:
-
settingSwitch.isOn
属性使用切换初始值设置,以后可以使用切换后备值强制更改; -
settingSwitch.isEnabled
已更改为Toggle
活动; - 播放
settingsSwitch.shake()
动画以切换回退值 。
第一个修改是由initialValue
和fallbackValue
流合并到单个switchValue
流中定义的:
switchValue
流驱动rx.isOn
属性。 虽然.flatMap { $0.map(Driver.just) ?? Driver.empty() }
.flatMap { $0.map(Driver.just) ?? Driver.empty() }
可能看起来很神秘,它只有在不为nil
时才发出值。 如果使用RxSwiftExt库,则等于.unwrap()
。
为了提高代码的可读性,我们使用ToggleValue
扩展的以下三个便捷属性:
第二个突变很简单:
否定isBusy
输出以驱动器settingSwitch.rx.isEnabled
。
当fallbackValue出现在fallbackValue
流上时,第三个突变播放.shake()
动画:
我们不在乎fallbackValue
发出的值,因此我们将其映射到void ()
。 最后,通过UISwitch
的此扩展来制作shake()
动画:
值得注意的是, Toggle
组件并不限制我们构建这种类型的UX。 某些应用会在服务器上保存设置时阻塞整个屏幕。 只需将多个isBusy
输出合并到单个isLockViewVisible
流中,即可使用Toggle
轻松完成。
单元测试
因为唯一的Toggle's
依赖项是ToggleStorage
,它是一个协议,所以创建MockToggleStorage
并完全测试Toggle
非常容易。 一个很好的例子是该测试确保在用户输入后发出更新值。
我们使用帮助程序recordedValues
数组存储value
输出发出的所有值。 因为模拟存储是异步的,所以我们等待第19行的初始值。第21和22行模拟用户输入。 第24行等待,直到发出ToggleValue.updated
。
所有测试都可以在项目的存储库中找到。