美文网首页iOS大咖说
iOS 写一个验证码输入框

iOS 写一个验证码输入框

作者: Yuency | 来源:发表于2020-09-24 17:46 被阅读0次

    前言:

    这次要做一个验证码输入框,要求:
    1、验证码数字之间是分割开的,有自己的样式。
    2、验证码输入框要能够接收来自键盘顶部短信的快捷输入。

    前后换了两套思路,终于是把这个玩意写完了,这次的代码也挺烦人的,真的烦。

    效果图:

    获取验证码.gif 获取验证码2.gif

    代码思路:
    1、先弄个一个父容器 UIView A
    2、在A上放置一个输入框 UITextField
    3、在A上放置一个UIView B,这个B,要把用户交互关闭掉,这样点击A的时候,B不响应点击,UITextField 就变成了响应者
    4、在B上放置 4 个验证码格子,这个格子是自定义的UIView C, 这个C关闭用户交互,在这个C上放置UILabel用于显示数字,放置光标和下划线。
    5、在你点击输入的时候,其实响应你输入的是 UITextField 然后通过使用通知 UITextFieldTextDidChangeNotification 来截获输入的内容,把这些内容,显示到自定的 C 上,从而达到效果

    思路图:


    层叠.png

    因为我这个输入框,要求有光标闪动,要求从键盘短信直接输入验证码,所以才有这样的代码。

    代码地址:

    代码地址:https://github.com/gityuency/ObjectiveCTools
    示例代码类名 【SMSCodeInputView】【SMSCodeView】

    上代码!

    SMSCodeInputView.h

    #import <UIKit/UIKit.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface SMSCodeInputView : UIView
    
    ///验证码文字
    @property (strong, nonatomic) NSString *codeText;
    
    ///设置验证码位数 默认 4 位
    @property (nonatomic) NSInteger codeCount;
    
    ///验证码数字之间的间距 默认 35
    @property (nonatomic) CGFloat codeSpace;
    
    @end
    
    NS_ASSUME_NONNULL_END
    
    

    SMSCodeInputView.m

    #import "SMSCodeInputView.h"
    #import "SMSCodeView.h"
    
    @interface SMSCodeInputView () <UITextFieldDelegate>
    ///输入框
    @property (strong, nonatomic) UITextField *textField;
    ///格子数组
    @property (nonatomic,strong) NSMutableArray <SMSCodeView *> *arrayTextFidld;
    ///记录上一次的字符串
    @property (strong, nonatomic) NSString *lastString;
    ///放置小格子
    @property (strong, nonatomic) UIView *contentView;
    
    @end
    
    @implementation SMSCodeInputView
    
    - (instancetype)init {
        if (self = [super init]) {
            [self config];
        }
        return self;
    }
    
    - (instancetype)initWithFrame:(CGRect)frame {
        self = [super initWithFrame:frame];
        if (self) {
            [self config];
        }
        return self;
    }
    
    - (void)config {
        
        _codeCount = 4;  //在初始化函数里面, 如果重写了某个属性的setter方法, 那么使用 self.codeCount 会直接调用重写的 setter 方法, 会造成惊喜!
        _codeSpace = 35;
        
        //初始化数组
        _arrayTextFidld = [NSMutableArray array];
        
        _lastString = @"";
        
        self.backgroundColor = UIColor.blackColor;
        
        //输入框
        _textField = [[UITextField alloc] init];
        _textField.backgroundColor = [UIColor purpleColor];
        _textField.keyboardType = UIKeyboardTypeNumberPad;
        _textField.delegate = self;
        [self addSubview:_textField];
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textFieldDidChangeValue:) name:UITextFieldTextDidChangeNotification object:_textField];
        
        //放置View
        _contentView = [[UIView alloc] init];
        _contentView.backgroundColor = UIColor.whiteColor;
        _contentView.userInteractionEnabled = NO;
        [self addSubview:_contentView];
    }
    
    - (void)layoutSubviews {
        [super layoutSubviews];
        
        [self updateSubViews];
    }
    
    - (void)updateSubViews {
        
        self.textField.frame = self.bounds;
        self.contentView.frame = self.bounds;
        
        /*
         方案1: 直接把原来的都删掉, 重新创建
         for (SMSCodeView *v in [self.arrayTextFidld reverseObjectEnumerator]) {
         [v removeFromSuperview];
         [self.arrayTextFidld removeObject:v];
         }
         */
        
        //方案2:能用就用,少了再建
        if (_arrayTextFidld.count < _codeCount) { //已经存在的子控件比新来的数要小, 那么就创建
            NSUInteger c = _codeCount - _arrayTextFidld.count;
            for (NSInteger i = 0; i < c; i ++) {
                SMSCodeView *v = [[SMSCodeView alloc] init];
                [_arrayTextFidld addObject:v];
            }
        } else if (_arrayTextFidld.count == _codeCount) { //个数相等
            
            return; //如果return,那么就是什么都不做, 如果不return, 那么后续可以更新颜色之类, 或者在转屏的时候重新布局
            
        } else if (_arrayTextFidld.count > _codeCount) { //个数有多余, 那么不用创建新的, 为了尽可能释放内存, 把不用的移除掉,
            NSUInteger c = _arrayTextFidld.count - _codeCount;
            for (NSInteger i = 0; i < c; i ++) {
                [_arrayTextFidld.lastObject removeFromSuperview];
                [_arrayTextFidld removeLastObject];
            }
        }
        
        //可用宽度 / 格子总数
        CGFloat w = (self.bounds.size.width - _codeSpace * (_codeCount - 1)) / (_codeCount * 1.0);
        
        //重新布局小格子
        for (NSInteger i = 0; i < _arrayTextFidld.count; i ++) {
            SMSCodeView *t = _arrayTextFidld[i];
            [self.contentView addSubview:t];
            t.frame = CGRectMake(i * (w + _codeSpace), 0, w, self.bounds.size.height);
        }
    }
    
    //已经编辑
    - (void)textFieldDidChangeValue:(NSNotification *)notification {
        
        UITextField *sender = (UITextField *)[notification object];
        
        /*
         bug: NSUInteger.
         sender.text.length 返回值是 NSUInteger,无符号整型, 当两个无符号整型做减法, 如果 6 - 9, 那么不会得到 -3, 而是一串很长的整型数, 也就是计算失误
         */
        
        BOOL a = sender.text.length >= self.lastString.length;
        BOOL b = sender.text.length - self.lastString.length >= _codeCount;
        if (a && b) { //判断为一连串验证码输入, 那么,最后N个,就是来自键盘上的短信验证码,取最后N个
            NSLog(@"一连串的输入");
            sender.text = [sender.text substringFromIndex:sender.text.length - _codeCount];
        }
        
        if (sender.text.length >= _codeCount + 1) { //对于持续输入,只要前面N个就行
            NSLog(@"持续输入");
            sender.text = [sender.text substringToIndex:_codeCount - 1];
        }
        
        //字符串转数组
        NSMutableArray <NSString *> *stringArray = [NSMutableArray array];
        NSString *temp = nil;
        for(int i = 0; i < [sender.text length]; i++) {
            temp = [sender.text substringWithRange:NSMakeRange(i,1)];
            [stringArray addObject:temp];
        }
        
        //设置文字
        for(int i = 0; i < self.arrayTextFidld.count; i++) {
            SMSCodeView *SMSCodeView = self.arrayTextFidld[i];
            if (i < stringArray.count) {
                SMSCodeView.text = stringArray[i];
            } else {
                SMSCodeView.text = @"";
            }
        }
        
        //设置光标
        if (stringArray.count == 0) {
            for(int i = 0; i < self.arrayTextFidld.count; i++) {
                BOOL hide = (i == 0 ? YES : NO);
                SMSCodeView *SMSCodeView = self.arrayTextFidld[i];
                SMSCodeView.showCursor = hide;
            }
        } else if (stringArray.count == self.arrayTextFidld.count) {
            for(int i = 0; i < self.arrayTextFidld.count; i++) {
                SMSCodeView *SMSCodeView = self.arrayTextFidld[i];
                SMSCodeView.showCursor = NO;
            }
        } else {
            for(int i = 0; i < self.arrayTextFidld.count; i++) {
                SMSCodeView *SMSCodeView = self.arrayTextFidld[i];
                if (i == stringArray.count - 1) {
                    SMSCodeView.showCursor = YES;
                } else {
                    SMSCodeView.showCursor = NO;
                }
            }
        }
        
        if (stringArray.count == self.arrayTextFidld.count) {
            [self.textField resignFirstResponder];
        }
        
        self.lastString = sender.text;
    }
    
    - (void)textFieldDidBeginEditing:(UITextField *)textField {
        //检查上一次的字符串
        if (self.lastString.length == 0 || self.lastString.length == 1) {
            self.arrayTextFidld.firstObject.showCursor = YES;
        } else if (self.lastString.length == self.arrayTextFidld.count) {
            self.arrayTextFidld.lastObject.showCursor = YES;
        } else {
            self.arrayTextFidld[self.lastString.length - 1].showCursor = YES;
        }
    }
    
    - (NSString *)codeText {
        return self.textField.text;
    }
    
    - (BOOL)resignFirstResponder {
        for(int i = 0; i < self.arrayTextFidld.count; i++) {
            SMSCodeView *SMSCodeView = self.arrayTextFidld[i];
            SMSCodeView.showCursor = NO;
        }
        [self.textField resignFirstResponder];
        return YES;
    }
    
    - (BOOL)becomeFirstResponder {
        [self.textField becomeFirstResponder];
        return YES;
    }
    
    ///如果要求可以随时更改输入位数, 那么,
    - (void)setCodeCount:(NSInteger)codeCount {
        _codeCount = codeCount;
        
        //因为个数改变,清空之前输入的内容
        self.lastString = @"";
        self.textField.text = @"";
        
        for (NSInteger i = 0; i < _arrayTextFidld.count; i ++) {
            SMSCodeView *t = _arrayTextFidld[i];
            t.text = @"";
            if (i == 0) {
                t.showCursor = YES;
            } else {
                t.showCursor = NO;
            }
        }
        
        [self setNeedsLayout];
        [self layoutIfNeeded];
    }
    
    
    @end
    
    

    SMSCodeView.h

    #import <UIKit/UIKit.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface SMSCodeView : UIView
    
    ///文字
    @property (nonatomic, strong) NSString *text;
    
    ///显示光标 默认关闭
    @property (nonatomic) BOOL showCursor;
    
    @end
    
    NS_ASSUME_NONNULL_END
    
    

    SMSCodeView.m

    #import "SMSCodeView.h"
    
    @interface SMSCodeView ()
    
    @property (nonatomic, strong) UILabel *label;
    
    @property (nonatomic, strong) UIView *line;
    
    @property (nonatomic, strong) UIView *cursor;
    
    @end
    
    @implementation SMSCodeView
    
    - (instancetype)init {
        self = [super init];
        if (self) {
            [self config];
        }
        return self;
    }
    
    - (instancetype)initWithFrame:(CGRect)frame {
        self = [super initWithFrame:frame];
        if (self) {
            [self config];
        }
        return self;
    }
    
    - (void)config {
        
        self.userInteractionEnabled = NO;
        
        _line = [[UIView alloc] init];
        _line.userInteractionEnabled = NO;
        _line.backgroundColor = UIColor.grayColor;
        [self addSubview:_line];
        
        _label = [[UILabel alloc] init];
        _label.textColor = UIColor.blackColor;
        [self addSubview:_label];
        
        //默认关闭
        _showCursor = NO;
    }
    
    - (void)layoutSubviews {
        [super layoutSubviews];
        
        self.line.frame = CGRectMake(0, self.frame.size.height - 1, self.frame.size.width, 1);
        CGFloat x = (self.frame.size.width - self.label.frame.size.width) / 2.0;
        CGFloat y = (self.frame.size.height - self.label.frame.size.height) / 2.0;
        self.label.frame = CGRectMake(x, y, self.label.frame.size.width, self.label.frame.size.height);
        
        [self updateCursorFrame];
    }
    
    - (void)setText:(NSString *)text {
        _text = text;
        if (_text.length > 0) {
            _line.backgroundColor = UIColor.redColor;
        } else {
            _line.backgroundColor = UIColor.grayColor;
        }
        _label.text = text;
        [self.label sizeToFit];
        [self setNeedsLayout];
        [self layoutIfNeeded];
    }
    
    - (void)updateCursorFrame {
        CGFloat x = 0;
        if (self.label.frame.size.width <= 0) {
            x = (self.frame.size.width - 1.6) / 2.0;
        } else {
            x = CGRectGetMaxX(self.label.frame);
        }
        _cursor.frame = CGRectMake(x, 10, 1.6, self.frame.size.height - 20);
    }
    
    - (void)setShowCursor:(BOOL)showCursor {
        
        if (_showCursor == YES && showCursor == YES) { //重复开始, 那么,什么也不做
        } else if (_showCursor == YES && showCursor == NO) { //原来是开始的, 现在要求关闭, 那么,就关闭
            [_cursor removeFromSuperview];
        } else if (_showCursor == NO && showCursor == YES) { //原来是关闭, 现在要求开始, 那么, 开始
            _cursor = [[UIView alloc] init];
            _cursor.userInteractionEnabled = NO;
            _cursor.backgroundColor = UIColor.redColor;
            [self addSubview:_cursor];
            [self updateCursorFrame];
            _cursor.alpha = 0;
            [self animationOne:_cursor];
        } else if (_showCursor == NO && showCursor == NO) { //重复关闭
            [_cursor removeFromSuperview];
        }
        _showCursor = showCursor;
    }
    
    // 光标效果
    - (void)animationOne:(UIView *)aView {
        [UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
            aView.alpha = 1;
        } completion:^(BOOL finished) {
            if (self.showCursor) {
                [self performSelector:@selector(animationTwo:) withObject:aView afterDelay:0.5];
            }
        }];
    }
    
    - (void)animationTwo:(UIView *)aView {
        [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            aView.alpha = 0;
        } completion:^(BOOL finished) {
            if (self.showCursor) {
                [self performSelector:@selector(animationOne:) withObject:aView afterDelay:0.1];
            }
        }];
    }
    
    @end
    
    

    在控制器里测试使用

    #import "UIViewController.h"
    #import "SMSCodeInputView.h"
    
    @interface UIViewController ()
    
    @property (strong, nonatomic) SMSCodeInputView *inputView;
    
    @end
    
    @implementation UIViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        self.view.backgroundColor = UIColor.whiteColor;
        
        self.inputView = [[SMSCodeInputView alloc] initWithFrame:CGRectMake(20, 0, [UIScreen mainScreen].bounds.size.width - 40, 60)];
        [self.view addSubview:self.inputView];
        self.inputView.center = self.view.center;
        
        
        UIButton *b = [[UIButton alloc] init];
        [b setTitle:@"随机更改输入框的个数和间距" forState:UIControlStateNormal];
        b.backgroundColor = UIColor.brownColor;
        b.titleLabel.font = [UIFont systemFontOfSize:14];
        b.frame = CGRectMake(0, 100, 300, 44);
        [b addTarget:self action:@selector(chage) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:b];
    }
    
    - (void)chage {
        self.inputView.codeCount = arc4random_uniform(8) + 2;
        self.inputView.codeSpace = arc4random_uniform(60) + 10;
    }
    
    - (void)viewDidAppear:(BOOL)animated {
        [super viewDidAppear:animated];
        
        [self.inputView becomeFirstResponder];
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
        [self.inputView resignFirstResponder];
        NSLog(@"获取到输入: %@", self.inputView.codeText);
    }
    
    @end
    

    结语

    好烦惹。

    相关文章

      网友评论

        本文标题:iOS 写一个验证码输入框

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