使用RxSwift切换组件

拨动开关列表在移动世界中广泛存在。 我在我使用的大多数应用程序的“设置”屏幕中找到它。 对我来说, 打开关闭事物并将保存在某个地方的简单动作隐藏了我将要揭示的有趣的复杂性。

在本文中,我将使用RxSwift构建“切换列表”屏幕。 我将使用上一篇有关自动完成的文章中介绍的技术。 我们将创建Toggle组件-一个带有输入和输出要插入的黑盒子。 阅读此书后,您将可以在项目中使用它来建立自己的切换体验。

切换

首先,了解我们将要积累的经验。 请注意,在将其状态发送到服务器时,单次切换处于禁用状态,有时它会摇动并退回到先前的状态-发生保存错误时:

在Swift中也一样:

并提供用于使用Toggle配置单个UISwitch支架:

现在,将在setUp(settingSwitch:with toggle:)完成输出编排。 它以settingSwitchtoggle作为参数。 在上面的视频中,对UISwitch进行了三种修改:

  1. settingSwitch.isOn属性使用切换初始值设置,以后可以使用切换后备值强制更改
  2. settingSwitch.isEnabled已更改为Toggle活动;
  3. 播放settingsSwitch.shake()动画以切换回退值

第一个修改是由initialValuefallbackValue流合并到单个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

所有测试都可以在项目的存储库中找到。