RxSwift UI交互 - II

对初始项目的改动

为了演示RxSwift的用法，我们对上一个视频用到的项目，做了以下改动：

首先，给Sign Up添加了一个Segue，点击后，会切换到一个用户提交各种信息的UI，我们所有要演示的交互都在这个新的UI上进行；

image

其次，在这个新的UI里：

• UIDatePicker用于设置生日、当输入的生日小于当天时，我们会在这个picker外围显示一个绿框；
• Male和Female是两个按钮，它加载了两个UIImage用于模拟二选一的效果。只有这两个内容正确之后，我们才启用底部的update按钮，否则就禁用它；
• “Know swift”是一个UISwitch，表示用户是否了解Swift；
• 下面的UISlider则表示用户对Swift的熟悉程度；
• 接下来是一个UIStepper，用于设置对Swift的兴趣，当点击加号时，红心会变大；反之则变小；
• 最后，submit按钮只有在所有UI控件都有正确值的时候才启用，否则是禁用状态；

image

第三，我们为这个新的UI定义了一个AboutYouViewController，它里面有我们需要的IBOutlet以及DisposeBag；

class AboutYouViewController: UIViewController {

    @IBOutlet weak var birthday: UIDatePicker!
    @IBOutlet weak var male: UIButton!
    @IBOutlet weak var female: UIButton!
    @IBOutlet weak var knowSwift: UISwitch!
    @IBOutlet weak var swiftLevel: UISlider!
    @IBOutlet weak var passionToLearn: UIStepper!
    @IBOutlet weak var heartHeight: NSLayoutConstraint!
    @IBOutlet weak var update: UIButton!

    var bag: DisposeBag! = DisposeBag()

    // Omit for simplicity…
}

第四，给InputValidator添加了一个新的方法，用于验证UIDatePicker输入的日期是否小于当天；

class func isValidDate(date: NSDate) -> Bool {
    let calendar = NSCalendar.currentCalendar()
    let compare = calendar.compareDate(date,
            toDate: NSDate(),
            toUnitGranularity: .Day)

    return compare == .OrderedAscending
}

最后，我们在InputValidator还添加了一些需要用到的图片资源；

image

这就是我们对接下来内容的准备工作，了解清楚之后，我们就可以开工了。

---

校验UIDatePicker

首先来处理UIDatePicker，给它添加边框的代码和UITextField是类似的。

RxSwift给UIDatePicker添加了一个扩展叫做rx_date，我们可以直接把这个Observable<NSDate>映射成一个Observable<Bool>表示输入的生日是否合法。

在viewDidLoad方法里，添加下面的代码：

let birthdayObservable = self.birthday.rx_date.map {
    InputValidator.isValidDate($0)
}

然后，把得到的结果进一步map成UIColor，并且订阅它：

birthdayObservable.map {
    $0 ? UIColor.greenColor() : UIColor.clearColor()
}.subscribeNext {
    self.birthday.layer.borderColor = $0.CGColor
}.addDisposableTo(self.bag)

最后，别忘记设置borderWidth属性：

self.birthday.layer.borderWidth = 1

完成后，Command + R编译执行，就可以看到结果了，只有在设置当天以前的日期时，UIDatePicker才会有绿色的边框。

image

---

理解Rx编程中的Subject

接下来，我们来处理选择性别的按钮。由于默认情况下，没有任何一个性别被选中，因此，实际上我们要处理的逻辑有两个：

• 用户选择了一个性别，表示按钮被点击了；
• 用户具体选择的是哪个性别，我们要根据这个选择加载正确的UIImage；

我们来逐步实现它。

首先，添加一个enum，表示用户选择的性别：

enum Gender {
    case notSelected
    case male
    case female
}

其次，我们需要一个observer，用来订阅按钮的点击事件，这样，我们就知道按钮被点击了，并以此作为启用udpate按钮的依据之一（这跟我们上个视频中用到的例子是相同的）。

但是，我们还需要这个observer是一个Observable，因为我们订阅它，并根据用户点击的按钮设置按钮图片，怎么做呢？

在Reactive编程里，有一个概念叫做Subject，它是一类对象的统称。这类对象既可以做Observer，又可以做Observable。大家可以在Reactive.io找到它的详细定义。

在RxSwift里，我们使用其中一个叫做Variable的Subject，简单用图来表示，它是这样的：

• Variable作为Observer，它可以订阅一个Observable，我们管这个Observable叫做source observable；

image

• Variable作为Observable，它还可以被其他的Observer订阅，每当有新订阅的时候，它就会发送最近一次发生的事件以及以后陆续会发生的事件；

image

• 而当source observable发生.Complete或.Error时，Variable会向observer转发对应的事件，并自动被回收；

image

介绍了理论之后，我们来看代码。先定义一个Variable<Gender>：

let genderSelection = Variable<Gender>(.notSelected)

让它先去订阅按钮的点击事件：

self.male.rx_tap.map {
    return Gender.male
}
.bindTo(genderSelection)
.addDisposableTo(self.bag)

self.female.rx_tap.map {
    return Gender.female
}
.bindTo(genderSelection)
.addDisposableTo(self.bag)

这里有两点需要说明：

1. 我们使用map方法把点击事件变成了一个值为Gender enum事件；
2. 使用bindTo订阅了map后的事件，在这里，bindTo和subscribe是等价的，只是当我们想表达“把一个值绑定给Variable这样的语义时”，bindTo比subscribe的表意更明确一些；

这样，当不同的按钮被点击时，genderSelection就有不同的值了。接下来，我们要让genderSelection是一个observable，并根据它的值来为按钮设置图片：

genderSelection.asObservable().subscribeNext({
    switch $0 {
    case .male:
        self.male.setImage(UIImage(named: "check"), 
            forState: .Normal)
        self.female.setImage(UIImage(named: "uncheck"), 
            forState: .Normal)
    case .female:
        self.male.setImage(UIImage(named: "uncheck"), 
            forState: .Normal)
        self.female.setImage(UIImage(named: "check"), 
            forState: .Normal)
    default:
        break;
    }
}).addDisposableTo(self.bag)

在上面的代码里，我们使用genderSelection.asObservable()把一个Variable明确转换成了observable。这样，我们就能使用subscribeNext来订阅它了，在上面的代码里$0的值是我们之前定义的Gender enum，我们只要根据用户点击的选择，为按钮设置正确的图片就好了。

最后，还有一个工作。当用户设置了生日和性别之后，UI上所有控件的值就都有合法值了，我们添加启用Submit按钮的代码，这和我们在上个视频中的代码是类似的。

我们先把genderSelection变成一个Observable<Bool>：

let genderBtnObservable = genderSelection.asObservable().map {
    return $0 != .notSelected ? true : false
}

然后，使用combineLatest方法，把birthdayObservable和genderBtnObservable合并起来，再变成一个Observable<Bool>：

Observable.combineLatest(birthdayObservable, genderBtnObservable) {
    return [$0, $1]
}.map {
    $0.reduce(true, combine: { $0 && $1 })
}

然后，订阅这个合并的结果，把它和update按钮的rx_tap”绑定”起来：

Observable.combineLatest(birthdayObservable, genderBtnObservable) {
    return [$0, $1]
}.map {
    $0.reduce(true, combine: { $0 && $1 })
}
.bindTo(self.update.rx_enabled)
.addDisposableTo(self.bag)

这里有两点要说明：

1. 我们再一次使用了bindTo代替了subscribe用于表达“绑定”的语义；
2. rx_enabled是RxSwift给UIButton添加的另外一个扩展，表示按钮是否启用；

至此，我们就实现了两个功能：

1. 模拟了二选一的按钮效果；
2. 当UI上所有控件都有合法值时，启用update按钮；

按Command + R编译执行，我们就能看到对应的效果了：

image

---