八坏晦、UIDatePicker
1雌澄,日期選擇響應(yīng)
(1)效果圖
當(dāng)日期選擇器里面的時間改變后倚喂,將時間格式化顯示到 label
中每篷。
(2)樣例代碼
import UIKit
import RxSwift
import RxCocoa
class ViewController: UIViewController {
@IBOutlet weak var datePicker: UIDatePicker!
@IBOutlet weak var label: UILabel!
//日期格式化器
lazy var dateFormatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateFormat = "yyyy年MM月dd日 HH:mm"
return formatter
}()
let disposeBag = DisposeBag()
override func viewDidLoad() {
datePicker.rx.date
.map { [weak self] in
"當(dāng)前選擇時間: " + self!.dateFormatter.string(from: $0)
}
.bind(to: label.rx.text)
.disposed(by: disposeBag)
}
}
2,倒計時功能
(1)效果圖
- 通過上方的
datepicker
選擇需要倒計時的時間后端圈,點(diǎn)擊“開始”按鈕即可開始倒計時焦读。 - 倒計時過程中,
datepicker
和按鈕都不可用舱权。且按鈕標(biāo)題變成顯示倒計時剩余時間矗晃。
(2)樣例代碼
DispatchQueue.main.async{
_ = self.ctimer.rx.countDownDuration <-> self.leftTime
}
代碼說明:
- <-> 是自定義的雙向綁定符號,具體可以查看之前的文章:Swift - RxSwift的使用詳解27(雙向綁定:<->)
- 加
DispatchQueue.main.async
是為了解決第一次撥動表盤不觸發(fā)值改變事件的問題(這個是 iOS 的 bug)
import UIKit
import RxSwift
import RxCocoa
class ViewController: UIViewController {
//倒計時時間選擇控件
var ctimer:UIDatePicker!
//開始按鈕
var btnstart:UIButton!
//剩余時間(必須為 60 的整數(shù)倍宴倍,比如設(shè)置為100张症,值自動變?yōu)?60)
let leftTime = Variable(TimeInterval(180))
//當(dāng)前倒計時是否結(jié)束
let countDownStopped = Variable(true)
let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
//初始化datepicker
ctimer = UIDatePicker(frame:CGRect(x:0, y:80, width:320, height:200))
ctimer.datePickerMode = UIDatePickerMode.countDownTimer
self.view.addSubview(ctimer)
//初始化button
btnstart = UIButton(type: .system)
btnstart.frame = CGRect(x:0, y:300, width:320, height:30);
btnstart.setTitleColor(UIColor.red, for: .normal)
btnstart.setTitleColor(UIColor.darkGray, for:.disabled)
self.view.addSubview(btnstart)
//剩余時間與datepicker做雙向綁定
DispatchQueue.main.async{
_ = self.ctimer.rx.countDownDuration <-> self.leftTime
}
//綁定button標(biāo)題
Observable.combineLatest(leftTime.asObservable(), countDownStopped.asObservable()) {
leftTimeValue, countDownStoppedValue in
//根據(jù)當(dāng)前的狀態(tài)設(shè)置按鈕的標(biāo)題
if countDownStoppedValue {
return "開始"
}else{
return "倒計時開始,還有 \(Int(leftTimeValue)) 秒..."
}
}.bind(to: btnstart.rx.title())
.disposed(by: disposeBag)
//綁定button和datepicker狀態(tài)(在倒計過程中鸵贬,按鈕和時間選擇組件不可用)
countDownStopped.asDriver().drive(ctimer.rx.isEnabled).disposed(by: disposeBag)
countDownStopped.asDriver().drive(btnstart.rx.isEnabled).disposed(by: disposeBag)
//按鈕點(diǎn)擊響應(yīng)
btnstart.rx.tap
.bind { [weak self] in
self?.startClicked()
}
.disposed(by: disposeBag)
}
//開始倒計時
func startClicked() {
//開始倒計時
self.countDownStopped.value = false
//創(chuàng)建一個計時器
Observable<Int>.interval(1, scheduler: MainScheduler.instance)
.takeUntil(countDownStopped.asObservable().filter{ $0 }) //倒計時結(jié)束時停止計時器
.subscribe { event in
//每次剩余時間減1
self.leftTime.value -= 1
// 如果剩余時間小于等于0
if(self.leftTime.value == 0) {
print("倒計時結(jié)束俗他!")
//結(jié)束倒計時
self.countDownStopped.value = true
//重制時間
self.leftTime.value = 180
}
}.disposed(by: disposeBag)
}
}