UI控件扩展

2018-09-06  本文已影响32人  FallPine
// .orEmpty 可以将 String? 类型的 ControlProperty 转成 String,省得我们再去解包
textField.rx.text.orEmpty.asObservable()
            .subscribe(onNext: {
                print("您输入的是:\($0)")
            })
            .disposed(by: disposeBag)

// 当然我们直接使用 change 事件效果也是一样的
textField.rx.text.orEmpty.changed
    .subscribe(onNext: {
        print("您输入的是:\($0)")
    })
    .disposed(by: disposeBag)
将内容绑定到其他控件上

Throttling 的作用:
Throttling 是 RxSwift 的一个特性。因为有时当一些东西改变时,通常会做大量的逻辑操作。而使用 Throttling 特性,不会产生大量的逻辑操作,而是以一个小的合理的幅度去执行。比如做一些实时搜索功能时,这个特性很有用。

//当文本框内容改变
let input = inputField.rx.text.orEmpty.asDriver() // 将普通序列转换为 Driver
    .throttle(0.3) //在主线程中操作,0.3秒内值若多次改变,取最后一次
         
//内容绑定到另一个输入框中
input.drive(outputField.rx.text)
    .disposed(by: disposeBag)
         
//内容绑定到文本标签中
input.map{ "当前字数:\($0.count)" }
    .drive(label.rx.text)
    .disposed(by: disposeBag)
         
//根据内容字数决定按钮是否可用
input.map{ $0.count > 5 }
    .drive(button.rx.isEnabled)
    .disposed(by: disposeBag)
同时监听多个 textField 内容的变化(textView 同理)
let observable = Observable.combineLatest(inputField.rx.text.orEmpty, outputField.rx.text.orEmpty) { (inputText,  outputText) -> (String, String) in
            return (inputText, outputText)
        }
        
observable.map { $0.0 + "*****" + $0.1 }
    .bind(to: label.rx.text)
    .disposed(by: disposeBag)
        
observable.map { $0.0.count > 5 && $0.1.count > 5 }
    .bind(to: button.rx.isEnabled)
    .disposed(by: disposeBag)
事件监听

通过 rx.controlEvent 可以监听输入框的各种事件,且多个事件状态可以自由组合。除了各种 UI 控件都有的 touch 事件外,输入框还有如下几个独有的事件:

textField.rx.controlEvent([.editingDidBegin]) //状态可以组合
    .asObservable()
    .subscribe(onNext: { _ in
        print("开始编辑内容!")
    }).disposed(by: disposeBag)
UITextView 独有的方法

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)
按钮点击响应
button.rx.tap
            .subscribe(onNext: { [weak self] in
                self?.showMessage("按钮被点击")
            })
            .disposed(by: disposeBag)

// 或者这样写
button.rx.tap
    .bind { [weak self] in
        self?.showMessage("按钮被点击")
    }
    .disposed(by: disposeBag)
按钮标题(title)的绑定
//创建一个计时器(每1秒发送一个索引数)
let timer = Observable<Int>.interval(1, scheduler: MainScheduler.instance)
        
//根据索引数拼接最新的标题,并绑定到button上
timer.map{"计数\($0)"}
    .bind(to: button.rx.title(for: .normal))
    .disposed(by: disposeBag)
按钮富文本标题(attributedTitle)的绑定
//创建一个计时器(每1秒发送一个索引数)
let timer = Observable<Int>.interval(1, scheduler: MainScheduler.instance)
         
//将已过去的时间格式化成想要的字符串,并绑定到button上
timer.map(formatTimeInterval)
    .bind(to: button.rx.attributedTitle())
    .disposed(by: disposeBag)
按钮图标(image)的绑定
//创建一个计时器(每1秒发送一个索引数)
let timer = Observable<Int>.interval(1, scheduler: MainScheduler.instance)
 
//根据索引数选择对应的按钮图标,并绑定到button上
timer.map({
    let name = $0%2 == 0 ? "back" : "forward"
    return UIImage(named: name)!
})
.bind(to: button.rx.image())
.disposed(by: disposeBag)
按钮背景图片(backgroundImage)的绑定
//创建一个计时器(每1秒发送一个索引数)
let timer = Observable<Int>.interval(1, scheduler: MainScheduler.instance)
 
//根据索引数选择对应的按钮背景图,并绑定到button上
timer.map{ UIImage(named: "\($0%2)")! }
    .bind(to: button.rx.backgroundImage())
    .disposed(by: disposeBag)
按钮是否可用(isEnabled)的绑定
switch1.rx.isOn
    .bind(to: button1.rx.isEnabled)
    .disposed(by: disposeBag)
按钮是否选中(isSelected)的绑定
//默认选中第一个按钮
button1.isSelected = true
         
//强制解包,避免后面还需要处理可选类型
let buttons = [button1, button2, button3].map { $0! }
         
//创建一个可观察序列,它可以发送最后一次点击的按钮(也就是我们需要选中的按钮)
let selectedButton = Observable.from(
    buttons.map { button in button.rx.tap.map { button } }
    ).merge()
// Observable.from(buttons.map({ (btn) -> Observable<UIButton> in
//            return btn.rx.tap.map({ return btn })
//        }))
         
//对于每一个按钮都对selectedButton进行订阅,根据它是否是当前选中的按钮绑定isSelected属性
for button in buttons {
    selectedButton.map { $0 == button }
        .bind(to: button.rx.isSelected)
        .disposed(by: disposeBag)
    }
switch1.rx.isOn.asObservable()
    .subscribe(onNext: {
        print("当前开关状态:\($0)")
    })
    .disposed(by: disposeBag)
segmented.rx.selectedSegmentIndex.asObservable()
    .subscribe(onNext: {
        print("当前项:\($0)")
    })
    .disposed(by: disposeBag)
mySwitch.rx.value
    .bind(to: activityIndicator.rx.isAnimating)
    .disposed(by: disposeBag)

isNetworkActivityIndicatorVisible属性是用于设置状态栏中是否显示活动指示器

mySwitch.rx.value
    .bind(to: UIApplication.shared.rx.isNetworkActivityIndicatorVisible)
    .disposed(by: disposeBag)
slider.rx.value.asObservable()
            .subscribe(onNext: {
                print("当前值为:\($0)")
            })
            .disposed(by: disposeBag)
stepper.rx.value.asObservable()
    .subscribe(onNext: {
        print("当前值为:\($0)")
    })
    .disposed(by: disposeBag)
// 使用滑块(slider)来控制 stepper 的步长
slider.rx.value
    .map{ Double($0) }  //由于slider值为Float类型,而stepper的stepValue为Double类型,因此需要转换
    .bind(to: stepper.rx.stepValue)
    .disposed(by: disposeBag)
//添加一个上滑手势
let swipe = UISwipeGestureRecognizer()
swipe.direction = .up
self.view.addGestureRecognizer(swipe)
        
//手势响应
swipe.rx.event
    .subscribe(onNext: { [weak self] recognizer in
    //这个点是滑动的起点
    let point = recognizer.location(in: recognizer.view)
    self?.showAlert(title: "向上划动", message: "\(point.x) \(point.y)")
    })
    .disposed(by: disposeBag)

// 第二种绑定方法
swipe.rx.event
    .bind { [weak self] recognizer in
    //这个点是滑动的起点
    let point = recognizer.location(in: recognizer.view)
    self?.showAlert(title: "向上划动", message: "\(point.x) \(point.y)")
    }
    .disposed(by: disposeBag)

加 DispatchQueue.main.async 是为了解决第一次拨动表盘不触发值改变事件的问题(这个是 iOS 的 bug)

//剩余时间与datepicker做双向绑定
DispatchQueue.main.async{
    _ = self.ctimer.rx.countDownDuration <-> self.leftTime
}
         
//绑定button标题
Observable.combineLatest(leftTime.asObservable(), countDownStopped.asObservable()) {
    leftTimeValue, countDownStoppedValue in
    //根据当前的状态设置按钮的标题
    if countDownStoppedValue {
        return "开始"
    }else{
        return "倒计时开始,还有 \(Int(leftTimeValue)) 秒..."
    }
    }.bind(to: btnstart.rx.title())
    .disposed(by: disposeBag)
         
//绑定button和datepicker状态(在倒计过程中,按钮和时间选择组件不可用)
countDownStopped.asDriver().drive(ctimer.rx.isEnabled).disposed(by: disposeBag)
countDownStopped.asDriver().drive(btnstart.rx.isEnabled).disposed(by: disposeBag)

参考文章:Swift - RxSwift的使用详解21(UI控件扩展1:UILabel)
Swift - RxSwift的使用详解22(UI控件扩展2:UITextField、UITextView)
Swift - RxSwift的使用详解23(UI控件扩展3:UIButton、UIBarButtonItem)
Swift - RxSwift的使用详解24(UI控件扩展4:UISwitch、UISegmentedControl)
Swift - RxSwift的使用详解25(UI控件扩展5:UIActivityIndicatorView、UIApplication)
Swift - RxSwift的使用详解26(UI控件扩展6:UISlider、UIStepper)
Swift - RxSwift的使用详解28(UI控件扩展7:UIGestureRecognizer)
Swift - RxSwift的使用详解29(UI控件扩展8:UIDatePicker)

上一篇下一篇

猜你喜欢

热点阅读