前言
前段时间看叶孤城直播代码,发现一个登陆界面,简单描述下:登陆按钮的背景色的填充长度随着输入密码长度的变化而变化(有点像密码安全程度那种)。
完整工程你可以在我的github下载到https://github.com/94haox/WTLoginPage;
前期准备
- RAC 2.5版本
- Masonry
推荐使用cocoaPods安装
开始
需求：用户名11位，密码6位。当用户名11位时，才可以输入密码，当密码和用户名的位数都正确时才可以进行登录操作，同时登陆按钮的背景色的填充长度随密码长度变化
我们想实现需求，关键点在哪？
- 需要考虑背景色问题
- 需要监听用户名和密码的长度
思考
- button的背景色的填充长度是没有这种说法的，只能完全填充；那么我们可以将背景色设为clearColor，然后在其下面贴一个view 或者 progressView，view 通过改变width来显示长度，progress者可以通过设置tintcolor配合progress属性来；
- 实时监听UITextField，不用RAC怎样写，不写，我们来看看用RAC怎么解决这个问题；
实现
-
搭建界面（所有的属性都写了getter方法）
界面搭建（定义属性）.png
使用masonry 约束
约束.png
上面部分我就不介绍了，其实masonry还是蛮简单好用的；看看官方示例，很快就能上手
- 事件的监听
监听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 完成
