前言
前段時(shí)間看葉孤城直播代碼,發(fā)現(xiàn)一個(gè)登陸界面,簡(jiǎn)單描述下:登陸按鈕的背景色的填充長(zhǎng)度隨著輸入密碼長(zhǎng)度的變化而變化(有點(diǎn)像密碼安全程度那種)。
完整工程你可以在我的github下載到https://github.com/94haox/WTLoginPage;
前期準(zhǔn)備
- RAC 2.5版本
- Masonry
推薦使用cocoaPods安裝
開(kāi)始
需求：用戶名11位，密碼6位。當(dāng)用戶名11位時(shí)，才可以輸入密碼，當(dāng)密碼和用戶名的位數(shù)都正確時(shí)才可以進(jìn)行登錄操作，同時(shí)登陸按鈕的背景色的填充長(zhǎng)度隨密碼長(zhǎng)度變化
我們想實(shí)現(xiàn)需求，關(guān)鍵點(diǎn)在哪？
- 需要考慮背景色問(wèn)題
- 需要監(jiān)聽(tīng)用戶名和密碼的長(zhǎng)度
思考
- button的背景色的填充長(zhǎng)度是沒(méi)有這種說(shuō)法的，只能完全填充；那么我們可以將背景色設(shè)為clearColor，然后在其下面貼一個(gè)view 或者 progressView，view 通過(guò)改變width來(lái)顯示長(zhǎng)度，progress者可以通過(guò)設(shè)置tintcolor配合progress屬性來(lái)；
- 實(shí)時(shí)監(jiān)聽(tīng)UITextField，不用RAC怎樣寫(xiě)，不寫(xiě)，我們來(lái)看看用RAC怎么解決這個(gè)問(wèn)題；
實(shí)現(xiàn)
-
搭建界面（所有的屬性都寫(xiě)了getter方法）
界面搭建（定義屬性）.png
使用masonry 約束
約束.png
上面部分我就不介紹了，其實(shí)masonry還是蠻簡(jiǎn)單好用的；看看官方示例，很快就能上手
- 事件的監(jiān)聽(tīng)
監(jiān)聽(tīng)1.png
這一步是將userNameTF的text和passWordTF的enable屬性關(guān)聯(lián)起來(lái); 根據(jù)userName 是否是11位來(lái)改變 passTF的enable。
監(jiān)聽(tīng)2.png
將passWordTF的背景色和它自身的enable屬性聯(lián)系起來(lái),做提示作用
如果可以輸入則背景色為白, 如果不可輸入則是黃色
監(jiān)聽(tīng)3.png
filter 篩選 如果密碼長(zhǎng)度是0 則width是0
如果密碼的長(zhǎng)度大于0,并且小于7,就將這個(gè)值傳下去;
map 接收值,然后將它轉(zhuǎn)換為NSNumber類型的值繼續(xù)傳到下一步
next 接收map轉(zhuǎn)換過(guò)的值, 然后計(jì)算底色的長(zhǎng)度,OK 完成
