UI控件扩展

// .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 事件外,输入框还有如下几个独有的事件:

  • editingDidBegin:开始编辑(开始输入内容)
  • editingChanged:输入内容发生改变
  • editingDidEnd:结束编辑
  • editingDidEndOnExit:按下 return 键结束编辑
  • allEditingEvents:包含前面的所有编辑相关事件
textField.rx.controlEvent([.editingDidBegin]) //状态可以组合
    .asObservable()
    .subscribe(onNext: { _ in
        print("开始编辑内容!")
    }).disposed(by: disposeBag)
UITextView 独有的方法

UITextView 还封装了如下几个委托回调方法:

  • didBeginEditing:开始编辑
  • didEndEditing:结束编辑
  • didChange:编辑内容发生改变
  • didChangeSelection:选中部分发生变化
//开始编辑响应
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、UIBarButtonItem

按钮点击响应
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)
    }
  • UISwitch

switch1.rx.isOn.asObservable()
    .subscribe(onNext: {
        print("当前开关状态:\($0)")
    })
    .disposed(by: disposeBag)
  • UISegmentedControl

segmented.rx.selectedSegmentIndex.asObservable()
    .subscribe(onNext: {
        print("当前项:\($0)")
    })
    .disposed(by: disposeBag)
  • UIActivityIndicatorView(活动指示器)

mySwitch.rx.value
    .bind(to: activityIndicator.rx.isAnimating)
    .disposed(by: disposeBag)
  • UIApplication中的isNetworkActivityIndicatorVisible属性

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

mySwitch.rx.value
    .bind(to: UIApplication.shared.rx.isNetworkActivityIndicatorVisible)
    .disposed(by: disposeBag)
  • UISlider(滑块)

slider.rx.value.asObservable()
            .subscribe(onNext: {
                print("当前值为:\($0)")
            })
            .disposed(by: disposeBag)
  • UIStepper(步进器)

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)
  • UIGestureRecognizer

//添加一个上滑手势
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)
  • UIDatePicker

    日期选择响应
    datePicker.rx.date
             .map { [weak self] in
                 "当前选择时间: " + self!.dateFormatter.string(from: $0)
             }
             .bind(to: label.rx.text)
             .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)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,979评论 3 119
  • 我们即将辞别辉煌与难忘的2017年,迎来充满希望与挑战的2018年。在这辞旧迎新之际,人们不免回顾与展望、总...
    青春长驻阅读 1,492评论 0 0
  • 彼岸花开:东瀛日本的上下三千年目录 彼岸花开:东瀛日本的上下三千年(24)二代(下) 公元1203年九月,镰仓将军...
    重舟阅读 1,115评论 5 9
  • 纯真离开,岁月难留 仿佛如江河般 被大山割裂成世代的忧愁 栽一课树,立于靠岸的山丘 挂上愿望的风铃,随风奏响 清远...
    冯亦阅读 143评论 2 0