RxSwift筆記 - RxCocoa 基礎 (一)

---

UILabel

文字綁定到 UILabel

let label = UILabel()
// ...
/// 值綁定
Observable.just("Hello RxSwift")
    .bind(to: label.rx.text)
    .disposed(by: disposeBag)

---

UITextField

監聽單個 textField 內容的變化

方式一:

let textField = UITextField()
// ...
textField.rx.text.orEmpty.asObservable().subscribe(onNext: {
    print("你輸入的是: \($0)")
}).disposed(by: disposeBag)

方式二:

let textField = UITextField()
// ...
textField.rx.text.orEmpty.changed.subscribe(onNext: {
    print("你輸入的是: \($0)")
}).disposed(by: disposeBag)

監聽多個 textField 內容的變化

let inputField1 = UITextField()
let inputField2 = UITextField()
// ...
Observable.combineLatest(inputField1.rx.text.orEmpty, inputField2.rx.text.orEmpty) {
    (textValue1, textValue2) in
        print("你輸入的號碼是: \(textValue1)-\(textValue2)")
}

將內容綁定到其他控件上

Binder 方式實現

let inputField  = UITextField()
let outputField = UITextField()
let label = UILabel()
let button = UIButton()
// ...
// UITextField --> UITextField
inputField.rx.text
    .bind(to: outputField.rx.text)
    .disposed(by: disposeBag)

// UITextField --> UILabel
inputField.rx.text
    .bind(to: label.rx.text)
    .disposed(by: disposeBag)

// UITextField --> UIButton
inputField.rx.text
    .map({ $0.count > 5 })
    .bind(to: button.rx.isEnabled)
    .disposed(by: disposeBag)

Driver 方式實現

let inputField  = UITextField()
let outputField = UITextField()
let label = UILabel()
let button = UIButton()
// ...
// UITextField --> UITextField
inputField.rx.text.orEmpty.asDriver()
    .drive(outputField.rx.text)
    .disposed(by: disposeBag)

// UITextField --> UILabel
inputField.rx.text
    .drive(label.rx.text)
    .disposed(by: disposeBag)

// UITextField --> UIButton
inputField.rx.text.orEmpty
    .asDriver()
    .map({ $0.count > 5 })
    .drive(button.rx.isEnabled)
    .disposed(by: disposeBag)

事件監聽

通過 rx.controlEvent 可以監聽輸入框的各種事件，且多個事件狀態可以自由組合。除了各種 UI 控件都有的 touch 事件外，輸入框還有如下幾個獨有的事件：

• editingDidBegin：開始編輯（開始輸入內容）
• editingChanged：輸入內容發生改變
• editingDidEnd：結束編輯
• editingDidEndOnExit：按下 return 鍵結束編輯
• allEditingEvents：包含前面的所有編輯相關事件

let inputField1 = UITextField()
let inputField2 = UITextField()
// ...
inputField1.rx.controlEvent([.editingDidBegin]).asObservable().subscribe(onNext: {
    print("開始編輯")
}).disposed(by: disposeBag)

inputField1.rx.controlEvent([.editingDidEndOnExit]).subscribe(onNext: {
    inputField2.becomeFirstResponder()
}).disposed(by: disposeBag)

inputField2.rx.controlEvent([.editingDidEndOnExit]).subscribe(onNext: {
    inputField2.resignFirstResponder()
}).disposed(by: disposeBag)

---

UITextView

UITextView 包含了 UITextField 的方法

UITextView 獨有的方法

UITextView 還封裝瞭如下幾個委託回調方法：

• didEndEditing：結束編輯
• didChange：編輯內容發生改變
• didChangeSelection：選中部分發生變化

let textView = UITextView()
// ...
textView.rx.didBeginEditing.subscribe(onNext: {
    print("開始編輯")
}).disposed(by: disposeBag)

textView.rx.didEndEditing.subscribe(onNext: {
    print("結束編輯")
}).disposed(by: disposeBag)

textView.rx.didChange.subscribe(onNext: {
    print("內容發生改變")
}).disposed(by: disposeBag)

textView.rx.didChangeSelection.subscribe(onNext: {
    print("選中部分發生改變")
}).disposed(by: disposeBag)

---

UIButton

按鈕點擊事件的綁定

let button = UIButton()
// ...
button.rx.tap.subscribe(onNext: {
    print("我被點擊了")
}).disposed(by: disposeBag)

/// 另一種寫法
button.rx.tap.bind {
    print("我也被點擊了")
}.disposed(by: disposeBag)

按鈕屬性值的綁定

let button = UIButton()
// ...
Observable.just("Click Me")
    .bind(to: button.rx.title(for: .normal))
    .disposed(by: disposeBag)

Observable.just(UIImage(named: "imageName"))
    .bind(to: button.rx.image())
    .disposed(by: disposeBag)

let switch1 = UISwitch()
switch1.rx.isOn.bind(to: button.rx.isEnabled)
    .disposed(by: disposeBag)

---

UISlider

let slider = UISlider()
// ...
slider.rx.value.subscribe(onNext: {
    print("當前slider值爲: \($0)")
}).disposed(by: disposeBag)

---

UIStepper

let stepper = UIStepper()
// ...
stepper.rx.value.subscribe(onNext: {
    print("當前stepper值爲: \($0)")
}).disposed(by: disposeBag)

Slider 與 Stepper 綁定

let slider = UISlider()
let stepper = UIStepper()
// ...
// slider -> stepper
slider.rx.value.map{ Double($0) }
    .bind(to: stepper.rx.value)
    .disposed(by: disposeBag)

// stepper -> slider
stepper.rx.value.map{ Float($0) }
    .bind(to: slider.rx.value)
    .disposed(by: disposeBag)

---

UISwitch

let `switch` = UISwitch()
let button = UIButton()
let activityView = UIActivityIndicatorView()
// ...
`switch`.rx.value
    .bind(to: activityView.rx.isAnimating)
    .disposed(by: disposeBag)

`switch`.rx.isOn
    .bind(to: UIApplication.shared.rx.isNetworkActivityIndicatorVisible)
    .disposed(by: disposeBag)

/// 按鈕和switch 之間的綁定
`switch`.rx.isOn.bind(to: button.rx.isEnabled).disposed(by: disposeBag)

---

UISegmentedControl

let segmentControl = UISegmentedControl()
// ...
segmentControl.rx.selectedSegmentIndex.subscribe(onNext: {
    print("當前頁: \($0)")
}).disposed(by: disposeBag)