本以为实现一个输入验证码的界面是很容易,但是没想到交互起来还是挺麻烦的。例如下图的验证码输入校验,在许多场景下会使用到类似验证码显示与输入。这里记录一下实现的过程,踩过的坑与比较好的方案。这个过程重新去了解了drawRect方法,使用了IBInspectable和IB_DESIGNABLE,封装控件(代码与xib都可用)。

需求效果图.png

尝试方案

一开始实现时,我添加4个textField作为这4个验证码的显示与输入。接着添加响应事件与代理实现输入一个验证码后,焦点跳转下一个验证码。正向流程没有问题,但在使用退格键时,焦点需要回到上一个。这里就出现了一个坑,textField内容为空,监听不到退格键的使用。网上也搜寻相关方案,但是都没有好的办法。看到一个做法是插入在textField为空,插入一个字符(一个没有显示宽度的字符),此时再按退格键就可以监听删除内容。

推荐方案

在网上查找相关实现的方案,参考不多,笔者看到了一个链接,如果还有更好推荐留言一下。
实现原理是:使用一个Label来显示每一位验证码。使用一个隐藏TextField来接收输入。将TextField上编辑的内容显示到Label上。这样就不会有太多交互细节需要处理,就像这个验证码的View是一个TextField一样(实际上也是)。

封装与使用

将它进行了整理与封装优化:

  • 适用于带边框显示的验证码样式。
  • Label 显示drawRect时,添加边框,边框默认是显示矩形区域外部的,进行了处理,显示在矩形区域内。
  • 添加间距,边框宽度等参数,正确显示边框与文本。
  • 优化支持xib中使用控件。
  • 优化支持xcode及时显示UI。
  • 接口简单易用。

文件结构:

文件结构.png

封装的Label:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
- (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

代码中使用:

1
2
3
4
5
6
7
8
9
10
11
- (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下我。这里处理了一下。

1
2
3
4
5
- (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
参考链接:这里