美文网首页iOS学习笔记iOS技术资料UIKit
IOS一个字符一个框的验证码输入框

IOS一个字符一个框的验证码输入框

作者: LinMeiQi | 来源:发表于2016-12-10 21:27 被阅读3430次

一个字符的一个输入框

本例使用布局框架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

相关文章

网友评论

  • 小小云喵:为什么下载Demo光标没有显示出来
  • 王天琦:问题已经解决,方法如下:在textview获取焦点的时候,调用代理方法- (BOOL)textViewShouldBeginEditing:(UITextView *)textView
    如下操作,即可
    // 获得焦点
    - (BOOL)textViewShouldBeginEditing:(UITextView *)textView{

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

    for (int i= 0; i < self.viewArr.count; i++) {
    //以text为中介区分
    if (i<verStr.length) {
    [self changeViewLayerIndex:i pointHidden:YES];
    }else{
    [self changeViewLayerIndex:i pointHidden:i==verStr.length?NO:YES];
    if (!verStr&&verStr.length==0) {//textView的text为空的时候
    [self changeViewLayerIndex:0 pointHidden:NO];
    }
    }
    }
    return YES;
    }
  • 王天琦:测试结果如下:
    我使用 self presentViewController:vc,进行跳转到验证码框的页面,进入页面之后,光标不会闪烁
  • 王天琦:博主,为什么进入页面 光标不会自动闪烁,而是常现的状态
  • ca0c0c690c44:我输入文本的时候输入框会上下跳动是什么原因?
  • 英俊神武:不可以密文输入吗
  • 往事随说:我集成到项目里面也经常出现输入完 输入框弹下去 时候在点击输入框就无法删除情况
    LinMeiQi:无法删除吗?点输入框可以弹出数字键盘吗?可以弹出来就可以删除
  • 47d4853a1828:感谢作者分享。
    源码中输入内容长度大于最大值后就放弃第一响应了[self endEdit],这样一旦输完就无法删除。这里改为 textView.text = [textView.text substringToIndex:_maxLenght] 取代放弃响应可以允许用户进行删除。
    LinMeiQi:代码中你说的这句也有,我之前要做的操作就是输入到最后一个的时候将键盘缩回,你点击上面输入框可以弹出键盘进行删除的
    往事随说:你这个治标不治本 我如果要在控制器做一个点击手势 弹掉键盘 等一下 要删除又不行
  • 小北风sky:感谢分享

本文标题:IOS一个字符一个框的验证码输入框

本文链接:https://www.haomeiwen.com/subject/ausumttx.html