本以为实现一个输入验证码的界面是很容易，但是没想到交互起来还是挺麻烦的。例如下图的验证码输入校验，在许多场景下会使用到类似验证码显示与输入。这里记录一下实现的过程，踩过的坑与比较好的方案。这个过程重新去了解了drawRect方法，使用了IBInspectable和IB_DESIGNABLE，封装控件（代码与xib都可用)。
需求效果图.png
尝试方案
一开始实现时，我添加4个textField作为这4个验证码的显示与输入。接着添加响应事件与代理实现输入一个验证码后，焦点跳转下一个验证码。正向流程没有问题，但在使用退格键时，焦点需要回到上一个。这里就出现了一个坑，textField内容为空，监听不到退格键的使用。网上也搜寻相关方案，但是都没有好的办法。看到一个做法是插入在textField为空，插入一个字符（一个没有显示宽度的字符），此时再按退格键就可以监听删除内容。
推荐方案
在网上查找相关实现的方案，参考不多，笔者看到了一个链接，如果还有更好推荐留言一下。
实现原理是：使用一个Label来显示每一位验证码。使用一个隐藏TextField来接收输入。将TextField上编辑的内容显示到Label上。这样就不会有太多交互细节需要处理，就像这个验证码的View是一个TextField一样（实际上也是）。
封装与使用
笔者将它进行了整理与封装优化：
- 适用于带边框显示的验证码样式。
- Label 显示drawRect时，添加边框，边框默认是显示矩形区域外部的，进行了处理，显示在矩形区域内。
- 添加间距，边框宽度等参数，正确显示边框与文本。
- 优化支持xib中使用控件。
- 优化支持xcode及时显示UI。
- 接口简单易用。
文件结构：
文件结构.png
封装的Label:
- (void)drawRect:(CGRect)rect {
// 第一次drawRect rect的数值不正确，不知道为什么，麻烦有知道的issue下我。这里处理了一下。
rect.size.width = rect.size.width > self.bounds.size.width ? self.bounds.size.width : rect.size.width;
rect.size.height = rect.size.height > self.bounds.size.height ? self.bounds.size.height : rect.size.height;
//计算每位验证码/密码的所在区域的宽和高
float width = (rect.size.width - (self.numberOfVertificationCode -1) * self.spacing)/ (float)self.numberOfVertificationCode;;
float height = rect.size.height;
// 画矩形边框 （边框会显示到rect区域外，进行了处理）
for (int i = 0; i < self.numberOfVertificationCode; i++) {
// 计算每位验证码/密码的绘制区域
CGRect tempRect = CGRectMake(i * (width +self.spacing) + self.lineWidth, self.lineWidth, width - self.lineWidth*2, height - self.lineWidth*2);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, self.borderColor.CGColor);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:tempRect cornerRadius:self.cornerRadius];
CGContextAddPath(context, bezierPath.CGPath);
CGContextStrokePath(context);
}
// 将每位验证码/密码绘制到指定区域
for (int i = 0; i < self.text.length; i++) {
CGRect tempRect = CGRectMake(i * (width +self.spacing) +self.lineWidth, self.lineWidth, width - self.lineWidth * 2, height - self.lineWidth*2);
// 遍历验证码/密码的每个字符
NSString *charecterString = [NSString stringWithFormat:@"%c", [self.text characterAtIndex:i]];
// 设置验证码/密码的现实属性
NSMutableDictionary *attributes = [[NSMutableDictionary alloc] init];
attributes[NSFontAttributeName] = self.font;
attributes[NSForegroundColorAttributeName] = self.textColor;
// 计算每位验证码的绘制起点
// 计算每位验证码的在指定样式下的size
CGSize characterSize = [charecterString sizeWithAttributes:attributes];
CGPoint vertificationCodeDrawStartPoint = CGPointMake(CGRectGetMidX(tempRect) - characterSize.width /2, CGRectGetMidY(tempRect) - characterSize.height /2);
// 绘制验证码
[charecterString drawAtPoint:vertificationCodeDrawStartPoint withAttributes:attributes];
}
}
xib中使用：
直接拖一个view，修改xib中类名即可，可通过如图设置属性。
xib内使用.png
代码中使用：
- (QTVertificationCodeInputView *)vertificationCodeInputView{
if (!_vertificationCodeInputView) {
_vertificationCodeInputView = [[QTVertificationCodeInputView alloc]initWithFrame:CGRectMake(30, 100, 300, 200)];
_vertificationCodeInputView.numberOfVertificationCode = 4;
_vertificationCodeInputView.lineWidth = 10;
_vertificationCodeInputView.spacing = 10;
_vertificationCodeInputView.cornerRadius = 5;
_vertificationCodeInputView.backgroundColor = [UIColor orangeColor];
}
return _vertificationCodeInputView;
}
疑问
UILabel初始化第一次调用的drawRect，rect的值并不是设置frame的值，而是稍微大了一点，不知道为什么不对，麻烦有知道的issue下我。这里处理了一下。
- (void)drawRect:(CGRect)rect {
// 第一次drawRect rect的数值不正确，不知道为什么，麻烦有知道的issue下我。这里处理了一下。
rect.size.width = rect.size.width > self.bounds.size.width ? self.bounds.size.width : rect.size.width;
rect.size.height = rect.size.height > self.bounds.size.height ? self.bounds.size.height : rect.size.height;
}
工程文件在github上：https://github.com/casscqt/QTVertificationCodeInputView
参考链接：这里
网友评论