iOS开发：自定义支付密码验证码输入框

今天需求下来了需要自定义一个验证码输入框，于是就开始思考用什么方式去实现，效果图要这样的：

1871540282209_.pic.jpg

由于本人比较懒，所以不怎么喜欢用drawRect方法去画线条。。所以一开始想着用6个label带上边框排列摆放，后来发现边框重合的问题没法解决，所以无奈之下还是用了drawRect + 6个背景色为透明色的label来组合出这个UI。

下面的就是我自己封装好的一个密码输入框，调用也只需要两三行代码即可，用于一般的小需求非常好用。而且demo很简单，又复杂的需求也可以自行去里面修改。

具体的思路也很简单，就是通过一个隐藏的TextFiled来控制输入的密码，然后相应的在TextFiled的代理事件里面处理UI上的变化。

JXCPasswordView

github地址

使用方法

下载上面的项目，然后把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];
    
}

如果有发现什么bug或者不严谨的地方也请多多指正。