一个字符的一个输入框

本例使用布局框架Masonry，如果Masonry这个框架不知道的朋友，我建议可以去了解下，这是我一直在用的代码约束框架，好用方便。

1.使用textView，textView的代理方法(textViewDidChange)监听text的变化，textView值一变，取text的值并拆分成单个字符，将每个值填入每个框中。

添加textview

    [_contairView addSubview:self.textView];
    //添加textView
    [self.textView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(_contairView);
    }];

2.本例使用6个框来实现效果，实际可根据自己需要设置几位。设置位数的属性是

/*验证码的最大长度*/
@property (nonatomic, assign) NSInteger maxLenght;

根据设置的长度创建6个带框的view，每个view添加一个label来展示每个字符，并且在每个view上添加光标的layer。

计算两个框的padding

    CGFloat padding = (CGRectGetWidth(self.frame) -_maxLenght*CGRectGetHeight(self.frame))/(_maxLenght - 1);

添加6个带光标的输入框

for (int i=0; i<self.maxLenght; i++) {
        UIView *subView = [UIView new];
        subView.backgroundColor = [UIColor whiteColor];
        subView.cornerRadius = 4;
        subView.borderWidth = (0.5);
        subView.userInteractionEnabled = NO;
        [_contairView addSubview:subView];
        [subView mas_makeConstraints:^(MASConstraintMaker *make) {
            if (lastView) {
                make.left.equalTo(lastView.mas_right).with.offset(padding);
            }else{
                make.left.equalTo(@(0));
            }
            make.centerY.equalTo(self.contairView);
            make.height.equalTo(self.contairView.mas_height);
            make.width.equalTo(self.contairView.mas_height);
            
        }];
        UILabel *subLabel = [UILabel new];
        subLabel.font = [UIFont systemFontOfSize:38];
        [subView addSubview:subLabel];
        [subLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(subView);
            make.centerY.equalTo(subView);
        }];
        lastView = subView;
        
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake((CGRectGetHeight(self.frame)-2)/2,5,2,(CGRectGetHeight(self.frame)-10))];
        CAShapeLayer *line = [CAShapeLayer layer];
        line.path = path.CGPath;
        line.fillColor =  _viewColorHL.CGColor;
        [subView.layer addSublayer:line];
        if (i == 0) {//初始化第一个view为选择状态
            [line addAnimation:[self opacityAnimation] forKey:@"kOpacityAnimation"];
            line.hidden = NO;
            subView.borderColor = _viewColorHL;
        }else{
            line.hidden = YES;
            subView.borderColor = _viewColor;
        }
        [self.viewArr addObject:subView];
        [self.labelArr addObject:subLabel];
        [self.pointlineArr addObject:line];
    }

3.给光标添加动画，动画方式是透明度的变化。

- (CABasicAnimation *)opacityAnimation {
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.fromValue = @(1.0);
    opacityAnimation.toValue = @(0.0);
    opacityAnimation.duration = 0.9;
    opacityAnimation.repeatCount = HUGE_VALF;
    opacityAnimation.removedOnCompletion = YES;
    opacityAnimation.fillMode = kCAFillModeForwards;
    opacityAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    return opacityAnimation;
}

4.textView的代理实现

- (void)textViewDidChange:(UITextView *)textView{
    
    NSString *verStr = textView.text;
    //有空格去掉空格
    verStr = [verStr stringByReplacingOccurrencesOfString:@" " withString:@""];
    if (verStr.length >= _maxLenght) {
        verStr = [verStr substringToIndex:_maxLenght];
        [self endEdit];
    }
    textView.text = verStr;

    if (self.block) {
        //将textView的值传出去
        self.block(verStr);
    }

    for (int i= 0; i < self.viewArr.count; i++) {
        //以text为中间
        UILabel *label = self.labelArr[i];
        if (i<verStr.length) {
         //如果text之前的每个字符，隐藏光标喝边框色
            [self changeViewLayerIndex:i pointHidden:YES];
            label.text = [verStr substringWithRange:NSMakeRange(i, 1)];

        }else{
            //如果等于textView的长度，将光标现实，并且有边框颜色
            [self changeViewLayerIndex:i pointHidden:i==verStr.length?NO:YES];
            if (!verStr&&verStr.length==0) {//textView的text为空的时候
                [self changeViewLayerIndex:0 pointHidden:NO];
            }
            label.text = @"";
        }
    }
}

5.可定制选中和未选中的边框颜色

/*未选中下的view的borderColor*/
@property (nonatomic, strong) UIColor *viewColor;

/*选中下的view的borderColor*/
@property (nonatomic, strong) UIColor *viewColorHL;

6.使用方法如下

    MQVerCodeInputView *verView = [[MQVerCodeInputView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH-50, 50)];
    verView.maxLenght = 6;//最大长度
    verView.keyBoardType = UIKeyboardTypeNumberPad;
    [verView mq_verCodeViewWithMaxLenght];
    verView.block = ^(NSString *text){
        NSLog(@"text = %@",text);
    };
    verView.center = self.view.center;
    [self.view addSubview:verView];

7.效果如下：

verCodeView.gif

源码地址

https://github.com/meiqi1992/MQVerCodeInputView