Swift - RxSwift的使用詳解29(UI控件擴(kuò)展8:UIDatePicker)

八坏晦、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
        }
代碼說明:
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)
    }
}

RxSwift使用詳解系列
原文出自:www.hangge.com轉(zhuǎn)載請保留原文鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市恭理,隨后出現(xiàn)的幾起案子拯辙,更是在濱河造成了極大的恐慌郭变,老刑警劉巖颜价,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異诉濒,居然都是意外死亡周伦,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門未荒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來专挪,“玉大人,你說我怎么就攤上這事≌唬” “怎么了速侈?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長迫卢。 經(jīng)常有香客問我倚搬,道長,這世上最難降的妖魔是什么乾蛤? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任每界,我火速辦了婚禮,結(jié)果婚禮上家卖,老公的妹妹穿的比我還像新娘眨层。我一直安慰自己,他們只是感情好上荡,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布趴樱。 她就那樣靜靜地躺著,像睡著了一般酪捡。 火紅的嫁衣襯著肌膚如雪伊佃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天沛善,我揣著相機(jī)與錄音航揉,去河邊找鬼。 笑死金刁,一個胖子當(dāng)著我的面吹牛帅涂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播尤蛮,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼媳友,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了产捞?” 一聲冷哼從身側(cè)響起醇锚,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎坯临,沒想到半個月后焊唬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡看靠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年赶促,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挟炬。...
    茶點(diǎn)故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡鸥滨,死狀恐怖嗦哆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情婿滓,我是刑警寧澤老速,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站凸主,受9級特大地震影響烁峭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜秕铛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一约郁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧但两,春花似錦鬓梅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至紧阔,卻和暖如春坊罢,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背擅耽。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工活孩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人乖仇。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓憾儒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親乃沙。 傳聞我的和親對象是個殘疾皇子起趾,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容