一个登陆界面的实现 (使用RAC + Masonry)

前言

前段时间看叶孤城直播代码,发现一个登陆界面,简单描述下:登陆按钮的背景色的填充长度随着输入密码长度的变化而变化(有点像密码安全程度那种)。

完整工程你可以在我的github下载到https://github.com/94haox/WTLoginPage;

前期准备

1. RAC 2.5版本
2. Masonry

推荐使用cocoaPods安装

开始

需求：用户名11位，密码6位。当用户名11位时，才可以输入密码，当密码和用户名的位数都正确时才可以进行登录操作，同时登陆按钮的背景色的填充长度随密码长度变化

我们想实现需求，关键点在哪？

1. 需要考虑背景色问题
2. 需要监听用户名和密码的长度

思考

1. button的背景色的填充长度是没有这种说法的，只能完全填充；那么我们可以将背景色设为clearColor，然后在其下面贴一个view 或者 progressView，view 通过改变width来显示长度，progress者可以通过设置tintcolor配合progress属性来；
2. 实时监听UITextField，不用RAC怎样写，不写，我们来看看用RAC怎么解决这个问题；

实现

1. 搭建界面（所有的属性都写了getter方法）

   
   
   

   界面搭建（定义属性）.png

使用masonry 约束

约束.png

上面部分我就不介绍了，其实masonry还是蛮简单好用的；看看官方示例，很快就能上手

2. 事件的监听
   
   

   监听1.png
   
   这一步是将userNameTF的text和passWordTF的enable属性关联起来; 根据userName 是否是11位来改变 passTF的enable。

监听2.png

将 passWordTF的背景色和它自身的 enable属性联系起来,做提示作用
如果可以输入则背景色为白, 如果不可输入则是黄色

监听3.png

filter 筛选 如果密码长度是0 则width是0
如果密码的长度大于0,并且小于7,就将这个值传下去;

map 接收值,然后将它转换为NSNumber类型的值继续传到下一步

next 接收map转换过的值, 然后计算底色的长度,OK 完成