iOS验证码及密码输入框的实现

1.输入框的实现分析

   

      主要由可见的6个方格子组成，这里可以看成6个输入框或者显示标签。输入6个数字，组成密码或者验证码，可以创建6个textField拼接，也可以用6个label去显示，具体做法都可以，主要是实现的逻辑。

     首先用户在来到输入页面的时候，键盘一般是弹起的，所以得有个textFiled作为焦点弹起键盘，接收输入事件，这里我选用的是用6个label去显示，不用6个textFiled的原因是，要不断去判断是哪个textFiled获取的焦点，很麻烦，而用label只需判断有没有内容显示就可以了。每次输入完毕之后，将label的text设置为输入的内容，同时将textFiled的输入内容清空，同时记录输入的数字，这样保证每次输入都没有残留上次的输入内容，保证输入的唯一，方格站位满了之后就将输入的内容拼接起来，限制字符串的长度，这样就得到了想要的数字验证码或者密码。

2.核心布局

     我用的是Masonry自动布局，比较方便，不用重复修改frame。主要就是线条及label的布局，控制好每个label的宽度，其余自适应就好，其余线条则根据每个label的left去修改即可。

3.主要逻辑代码

 一个是输入的情况，另一个是删除的情况，需要分开判断。这里我只是简单粗暴的实现了6位密码的情况，其他情况的小伙伴可自行设置或者进行优化。

- (void)textDidChanged:(UITextField *)textField {
    
    if (textField.text.length >= 6) {
        
        for (int i = 0; i < self.labelArray.count; i ++) {
            UILabel *label = self.labelArray[i];
            label.text = [textField.text substringFromIndex:i + 1];
            if (_isSecure) {
                label.text = @"●";
            }
        }
        if (textField.text.length == 6) {
            _codeString = textField.text;
        }else {
            _codeString = [textField.text substringToIndex:6];
        }
        
    }else {
        for (int i = 0; i < self.labelArray.count; i ++) {
            UILabel *label = self.labelArray[i];
            
            if (label.text == nil) {
                label.text = textField.text;
                if (_isSecure) {
                    label.text = @"●";
                }
                break;
            }
        }
    }

    
    if (_codeString.length < 6) {
        if (_codeString == nil) {
            _codeString = textField.text;
        }else {
            _codeString = [_codeString stringByAppendingString:textField.text];
        }
    }

    textField.text = nil;
    
    if (_codeString.length == 6 && _codeString != nil) {
        if (_codeInputCompeletBlock) {
            _codeInputCompeletBlock (_codeString);
        }
        
        [[NSNotificationCenter defaultCenter] postNotificationName:CodeDidInputCompeletNotification object:_codeString];
    }
    
    NSLog(@"%@",_codeString);
}

        这个是输入的情况，另外请注意，在iOS12及以上系统收到信息后，键盘顶部上会自动保存验证码的数字，所有这里还要做一步操作，就是让label分开显示一次性输入完验证码的情况，不然在删除数字的时候会崩溃。

- (void)deleteBackward {
    
    for (int i = (int)self.labelArray.count - 1; i >= 0; i --) {
        UILabel *label = self.labelArray[i];
        
        if (label.text != nil) {
            label.text = nil;
            if (_codeString != nil) {
                _codeString = [_codeString substringToIndex:i];
                if (i == 0) {
                    _codeString = nil;
                }
            }
            break;
        }
    }
    NSLog(@"%@",_codeString);
}

这个是删除时的情况。

4.总结及效果展示

        总的来说，我这里只是实现了输入框的基本用法及逻辑，其余拓展的还有很多，比如输入错误颜色变化，输入框抖动等，其实具体分析一下很简单就做出来了。

        两种效果，分别是明文和密文。下方有demo资源，需要的小伙伴可自行下载。

          

验证码输入框下载

github地址