使用RxSwift實(shí)現(xiàn)登錄注冊(cè)界面

代碼還是要?jiǎng)邮謱?xiě),一起來(lái)用RxSwift來(lái)寫(xiě)一個(gè)簡(jiǎn)單的Demo吧东抹,動(dòng)起手來(lái)秩冈,不要懶本缠,因?yàn)檫@個(gè)真的很簡(jiǎn)單,但是還是能學(xué)到一些東西的入问。

本篇文章的完整項(xiàng)目及以后的RxSwift相關(guān)Demo都在: 點(diǎn)擊這里丹锹。

我們預(yù)期的結(jié)果是這樣:

圖1

準(zhǔn)備

開(kāi)始前,先在storyboard中拖幾個(gè)控件芬失。
當(dāng)然楣黍,如果你想手寫(xiě)也是可以的,storyboard比較省時(shí)間而已棱烂。效果如下圖:
<br />


圖2

<br />
然后import RxSwiftRxCocoa,并定義以下屬性:

import RxSwift
import RxCocoa

let minUsernameLength = 5
let maxUsernameLength = 10
let minPasswordLength = 5
let maxPasswordLength = 16
let disposBag = DisposeBag()

將控件拖至相應(yīng)的ViewController

    @IBOutlet weak var usernameTF: UITextField!
    @IBOutlet weak var usernameLB: UILabel!
    @IBOutlet weak var passwordTF: UITextField!
    @IBOutlet weak var passwordLB: UILabel!
    @IBOutlet weak var loginButton: UIButton!

對(duì)輸入字符串進(jìn)行判斷

override func viewDidLoad() {
        super.viewDidLoad()
        
        let usernameValid = usernameTF.rx_text
            .map{$0.characters.count >= minUsernameLength && $0.characters.count <= maxUsernameLength }  //map函數(shù) 對(duì)text進(jìn)行處理
            .shareReplay(1)
        
        let passwordValid = passwordTF.rx_text
            .map{$0.characters.count >= minPasswordLength && $0.characters.count < maxPasswordLength }  //map函數(shù) 對(duì)text進(jìn)行處理
            .shareReplay(1)
}

首先租漂,定義一個(gè)布爾值:usernameValid來(lái)接收usernameTF字符個(gè)數(shù)是否符合要求,同理passwordValid接收usernameTF字符個(gè)數(shù)是否符合要求颊糜。
.map負(fù)責(zé)對(duì)UITextField中的字符進(jìn)行處理哩治,判斷字符長(zhǎng)度,是否符合要求衬鱼,將判斷的值返回給usernameValidpasswordValid业筏。

關(guān)于map函數(shù),可以參考這篇文章鸟赫。

shareReplay()是RxSwift提供的一個(gè)流操作函數(shù)蒜胖,它是以重播的方式通知自己的訂閱者消别,保證在觀察者訂閱這個(gè)流的時(shí)候始終都能回播最后N個(gè),shareReplay(1)表示重播最后一個(gè)翠勉。

然后妖啥,我們需要根據(jù)用戶名和密碼輸入是否全部符合要求,來(lái)控制登錄按鈕是否可以點(diǎn)擊:

    let everythingValid = Observable.combineLatest(usernameValid, passwordValid) { (usernameValid, passwordValid) -> Bool in
            usernameValid && passwordValid
        }

當(dāng)usernameValidpasswordValid同時(shí)為true時(shí)对碌,everythingValid才為true荆虱,我們用everythingValid來(lái)控制登錄按鈕是否可以點(diǎn)擊。

上邊的代碼可以簡(jiǎn)化成:

let everythingValid = Observable.combineLatest(usernameValid, passwordValid) { $0 && $1 }
        .shareReplay(1)

原理參考這篇文章朽们。

綁定

usernameValid
            .bindTo(passwordTF.rx_enabled)  //username通過(guò)驗(yàn)證怀读,passwordTF才可以輸入
            .addDisposableTo(disposBag)

usernameValidpasswordTF.rx_enabled綁定,即用usernameValid來(lái)控制passwordTF是否可以輸入的狀態(tài)骑脱。

注意:這里我們用usernameValidpasswordTFrx_enabled綁定菜枷。通過(guò)這個(gè)綁定,只有當(dāng)usernameValidtrue時(shí)叁丧,passwordTF才是可以輸入的狀態(tài)啤誊,也就是我們需要在用戶名長(zhǎng)度正確的時(shí)候,才可以輸入密碼拥娄,否則蚊锹,密碼輸入框?yàn)椴豢沙鋈霠顟B(tài)。

bindTo就是RxSwfit中用來(lái)進(jìn)行值綁定的函數(shù)稚瘾。

addDisposableTo(disposBag)訂閱信號(hào)會(huì)產(chǎn)生Disposable牡昆。如果不銷毀,那么這些生成的Disposable將會(huì)一直存在摊欠,這無(wú)疑是非常耗內(nèi)存的丢烘。所以,想要釋放無(wú)用的資源些椒,可以調(diào)用dispose播瞳,但是直接調(diào)用dispose會(huì)有一個(gè)問(wèn)題,就是如果調(diào)用時(shí)機(jī)不對(duì)免糕,可能會(huì)影響到程序的正常運(yùn)行狐史。所以我們可以用addDisposableTo(disposeBag)。類似于autoreleasepool说墨,由它處理資源的自動(dòng)銷毀骏全。是不是有點(diǎn)像mrcarc的區(qū)別,那么選哪個(gè)更好尼斧,就不用說(shuō)了姜贡,肯定是使用addDisposableTo(disposBag)

接下來(lái)棺棵,將usernameTF下邊的提示labelusernameValid綁定:

usernameValid
            .bindTo(usernameLB.rx_hidden)   //username通過(guò)驗(yàn)證楼咳,usernameLB警告消失
            .addDisposableTo(disposBag)

這樣熄捍,當(dāng)用戶名符合要求的時(shí)候,警告消息就會(huì)隱藏母怜,當(dāng)不符合時(shí)余耽,又會(huì)再度出現(xiàn)。

接下來(lái)苹熏,將其他的屬性都綁定起來(lái):

passwordValid
            .bindTo(passwordLB.rx_hidden)
            .addDisposableTo(disposBag)
        
        everythingValid
            .bindTo(loginButton.rx_enabled)   // 用戶名密碼都通過(guò)驗(yàn)證碟贾,才可以點(diǎn)擊按鈕
            .addDisposableTo(disposBag)
        
        loginButton.rx_tap  //綁定button點(diǎn)擊事件
            .subscribeNext { [weak self] in
                self?.showAlert()
        }
            .addDisposableTo(disposBag)

viewDidLoad()方法外,定于一個(gè)方法轨域,用來(lái)顯示提示信息:

func showAlert() {
        let alertView = UIAlertView(
            title: "成功",
            message: "登錄成功",
            delegate: nil,
            cancelButtonTitle: "OK"
        )
        
        alertView.show()
    }

完成

搞定袱耽,運(yùn)行你的程序吧,嘗試輸入正確和錯(cuò)誤位數(shù)的用戶名/密碼干发,試試看朱巨。
當(dāng)都輸入正確的時(shí)候,結(jié)果如下圖:

done

本篇文章的完整項(xiàng)目及以后的RxSwift相關(guān)Demo都在: 點(diǎn)擊這里枉长。

以后就可以在自己應(yīng)用中使用RxSwift來(lái)寫(xiě)登錄/注冊(cè)界面了冀续。當(dāng)然,這才算是剛剛?cè)腴TRxSwift必峰。以后的路還長(zhǎng)洪唐,要學(xué)的還很多。路漫漫其修遠(yuǎn)兮 吾將上下而求索自点。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末桐罕,一起剝皮案震驚了整個(gè)濱河市脉让,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌术唬,老刑警劉巖粗仓,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件萝招,死亡現(xiàn)場(chǎng)離奇詭異曙蒸,居然都是意外死亡纽窟,警方通過(guò)查閱死者的電腦和手機(jī)臂港,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門瓷胧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)杂数,“玉大人揍移,你說(shuō)我怎么就攤上這事。” “怎么了诉探?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵耘纱,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我鹰溜,道長(zhǎng)斋日,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任仔拟,我火速辦了婚禮科侈,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好橄仍,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布宪哩。 她就那樣靜靜地躺著茁瘦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪腔稀。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天羽历,我揣著相機(jī)與錄音焊虏,去河邊找鬼。 笑死秕磷,一個(gè)胖子當(dāng)著我的面吹牛诵闭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播澎嚣,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼涂圆,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了币叹?” 一聲冷哼從身側(cè)響起润歉,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎颈抚,沒(méi)想到半個(gè)月后踩衩,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡贩汉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年驱富,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片匹舞。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡褐鸥,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出赐稽,到底是詐尸還是另有隱情叫榕,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布姊舵,位于F島的核電站晰绎,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏括丁。R本人自食惡果不足惜荞下,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧尖昏,春花似錦仰税、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至掸鹅,卻和暖如春塞帐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背巍沙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工葵姥, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人句携。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓榔幸,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親矮嫉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子削咆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

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