接下来,我们继续实现上个视频中未完成的例子。首先来处理UISwitch
和UISlider
联动。
对于UISwitch
来说:
- 当
UISwitch
为OFF时,表示用户不了解Swift,因此,下面的UISlider
应该为0; - 当
UISwitch
为ON时,可以默认把UISlider
设置在1/4的位置,表示大致了解;
对于UISlider
来说:
- 当
UISlider
不为0时,应该自动把UISwitch
设置为ON; - 当
UISlider
为0时,应该自动把UISwitch
设置为OFF;
怎么做呢?
RxSwift对UISwitch
和UISlider
也进行了扩展,分别给它们添加了一个叫做rx_value
的属性。在UISwitch
里,它的类型是ControlProperty<Bool>
;在UISlider
里,它的类型是ControlProperty<Float>
。和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
就可以看到期望的结果了。
订阅UIStepper
最后,我们来实现UIStepper
。我们希望实现点击加号的时候,让桃心变大,减号时,让桃心变小。类似的,RxSwift给UIStepper
也添加了一个扩展rx_value
,它的类型是ControlProperty<Double>
。于是,订阅它的套路我们应该很熟悉了:
self.passionToLearn.rx_value.subscribeNext({
(stepperValue: Double) in
self.heartHeight.constant = CGFloat(stepperValue - 10)
}).addDisposableTo(self.bag)
为了修正桃心图片伸缩的幅度,我们在调整桃心图片的高度约束时,把UIStepper
的值减去了10。这时Command + R
编译执行,可以看到,大部分功能正确,却有一个小缺陷。
当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
重编编译执行,就可以看到桃心默认大小恢复正常了。