iOS 验证码View的实现方案

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

尝试方案

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

推荐方案

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

封装与使用

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

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

文件结构：

封装的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中类名即可，可通过如图设置属性。

代码中使用：

- (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
参考链接：这里