今天需求下来了需要自定义一个验证码输入框,于是就开始思考用什么方式去实现,效果图要这样的:
由于本人比较懒,所以不怎么喜欢用drawRect方法去画线条。。所以一开始想着用6个label带上边框排列摆放,后来发现边框重合的问题没法解决,所以无奈之下还是用了drawRect + 6个背景色为透明色的label来组合出这个UI。
下面的就是我自己封装好的一个密码输入框,调用也只需要两三行代码即可,用于一般的小需求非常好用。而且demo很简单,又复杂的需求也可以自行去里面修改。
具体的思路也很简单,就是通过一个隐藏的TextFiled来控制输入的密码,然后相应的在TextFiled的代理事件里面处理UI上的变化。
JXCPasswordView
使用方法
下载上面的项目,然后把JXCPasswordView的.h和.m文件拖到自己项目中
在需要使用的地方引入头文件
#import "JXCPasswordView.h"
声明属性
@property (nonatomic,strong)JXCPasswordView *verCodeView;
确定密码框宽度
#define kCodeViewWidth [UIScreen mainScreen].bounds.size.width * 0.124 * 6
JXCPasswordView公共方法
/**
自定义初始化密码框
@param frame frame
@param length 密码长度
@param boldColor 密码框的线条颜色
@return 密码框
*/
- (instancetype)initWithFrame:(CGRect)frame andLength:(NSInteger)length andBoldColor:(UIColor *)boldColor;
/**
当输入密码错误时,清除原先的密码
*/
- (void)cleanDatas;
在自己的场景中调用
- (void)setPswdView {
_verCodeView = [[JXCPasswordView alloc]initWithFrame:CGRectMake(([UIScreen mainScreen].bounds.size.width-kCodeViewWidth)/2, 300, kCodeViewWidth, kCodeViewWidth/6) andLength:6 andBoldColor:[UIColor blackColor]];
_verCodeView.backgroundColor = [UIColor whiteColor];
_verCodeView.delegate = self;
[self.view addSubview:_verCodeView];
}
实现代理方法
- (void)getPassWord:(NSString *)password {
NSLog(@"验证码:%@",password);
/**
在这里根据需求校验输入的密码或者验证码是否正确
如果验证失败,则调用方法清除页面
*/
// [_verCodeView cleanDatas];
}