RxSwift UI交互 - III

接下来，我们继续实现上个视频中未完成的例子。首先来处理UISwitch和UISlider联动。

对于UISwitch来说：

1. 当UISwitch为OFF时，表示用户不了解Swift，因此，下面的UISlider应该为0；
2. 当UISwitch为ON时，可以默认把UISlider设置在1/4的位置，表示大致了解；

对于UISlider来说：

1. 当UISlider不为0时，应该自动把UISwitch设置为ON；
2. 当UISlider为0时，应该自动把UISwitch设置为OFF；

怎么做呢？

RxSwift对UISwitch和UISlider也进行了扩展，分别给它们添加了一个叫做rx_value的属性。在UISwitch里，它的类型是ControlProperty；在UISlider里，它的类型是ControlProperty。和Variable类似，ControlProperty也可以既是Observer，又是Observable。

先来处理UISwitch：

self.knowSwift.rx_value.map {
    $0 ? 0.25 : 0
}
.bindTo(self.swiftLevel.rx_value)
.addDisposableTo(self.bag)

我们先把self.knowSwift.rx_value当成observable，ON的时候，事件值为true，OFF的时候，事件值为false。我们先把它分别map成0.25和0，然后使用bindTo，用self.swiftLevel.rx_value来订阅这个map后的事件。

这样，我们就建立了UISwitch到UISlider之间的关联，当ON时，UISlider在1/4的位置，OFF时，UISlider的值为0。

然后，我们用类似的方式建立UISlider到UISwitch之间的关联：

self.swiftLevel.rx_value.map {
    $0 != 0 ? true : false
}
.bindTo(self.knowSwift.rx_value)
.addDisposableTo(self.bag)

这样，当UISlider为0时，就会把UISwitch设置为OFF，否则为ON。

至此，UISwitch和UISlider的rx_value就实现了双向绑定。按Command + R就可以看到期望的结果了。

image

---

订阅UIStepper

最后，我们来实现UIStepper。我们希望实现点击加号的时候，让桃心变大，减号时，让桃心变小。类似的，RxSwift给UIStepper也添加了一个扩展rx_value，它的类型是ControlProperty。于是，订阅它的套路我们应该很熟悉了：

self.passionToLearn.rx_value.subscribeNext({
    (stepperValue: Double) in
        self.heartHeight.constant = CGFloat(stepperValue - 10)
}).addDisposableTo(self.bag)

为了修正桃心图片伸缩的幅度，我们在调整桃心图片的高度约束时，把UIStepper的值减去了10。这时Command + R编译执行，可以看到，大部分功能正确，却有一个小缺陷。

image

当UI被加载后，由于UIStepper默认的值是20，会向observer发送一次事件，因此，桃心的默认高度被减了10。为了解决这个问题，我们需要告诉observer忽略第一次事件。为此，在订阅前，我们使用skip(1)就可以了：

self.passionToLearn.rx_value.skip(1).subscribeNext({
    (stepperValue: Double) in
        self.heartHeight.constant = CGFloat(stepperValue - 10)
}).addDisposableTo(self.bag)

这样，Command + R重编编译执行，就可以看到桃心默认大小恢复正常了。

image

---