OC分割输入验证码的视觉效果

效果图：

用到的类：

UITextField+VerCodeTF.h

#import <UIKit/UIKit.h>
@protocol VerCodeTFDelegate <UITextFieldDelegate>

@optional
- (void)textFieldDidDeleteBackward:(UITextField *)textField;
@end

NS_ASSUME_NONNULL_BEGIN

@interface UITextField (VerCodeTF)
@property (weak, nonatomic) id <VerCodeTFDelegate> delegate;
@end

NS_ASSUME_NONNULL_END

UITextField+VerCodeTF.m

#import "UITextField+VerCodeTF.h"
#import <objc/runtime.h>

@implementation UITextField (VerCodeTF)

+ (void)load {
    Method method1 = class_getInstanceMethod([self class], NSSelectorFromString(@"deleteBackward"));
    Method method2 = class_getInstanceMethod([self class], @selector(vc_deleteBackward));
    method_exchangeImplementations(method1, method2);
}

/**
 当删除按钮点击是触发的事件
 */
- (void)vc_deleteBackward {
    [self vc_deleteBackward];

    if ([self.delegate respondsToSelector:@selector(textFieldDidDeleteBackward:)])
    {
        id <VerCodeTFDelegate> delegate  = (id<VerCodeTFDelegate>)self.delegate;
        [delegate textFieldDidDeleteBackward:self];
    }

}

@end

VerificationCodeView.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface VerificationCodeView : UIView

@end

NS_ASSUME_NONNULL_END

VerificationCodeView.m

#import "VerificationCodeView.h"
#import "UITextField+VerCodeTF.h"
#define Count 4 //一共有多少个输入框
#define Secure NO //是否密文
#define Width 34 //输入框的宽度，这边我比较懒，都做成正方形了

//输入框输入时边框颜色
#define RedColor [UIColor redColor].CGColor
//输入框未输入时边框颜色
#define GrayColor [UIColor grayColor].CGColor

@interface VerificationCodeView ()<UITextFieldDelegate>
@property(nonatomic,strong)NSMutableArray *tfArr;
@property(nonatomic,copy)NSString *lastTFText;//最有一个TextField的内容

@end
@implementation VerificationCodeView

-(instancetype)initWithFrame:(CGRect)frame{
    frame.size.height = 34;
    self = [super initWithFrame:frame];
    if(self){
        self.lastTFText = @"";
        self.tfArr = [NSMutableArray array];

        float margin = ( frame.size.width - Width * Count)/3.0;
        for(int i=0;i<Count;i++){
            UITextField *tf = [[UITextField alloc]initWithFrame:CGRectMake((Width+margin)*i, 0, Width, Width)];
            tf.secureTextEntry = Secure;
            tf.tag = i+1;
            tf.layer.borderWidth = 1.0f;
            tf.layer.cornerRadius = 5.0f;
            tf.textAlignment = NSTextAlignmentCenter;
            tf.keyboardType = UIKeyboardTypeNumberPad;
            tf.delegate = self;

            [self addSubview:tf];
            [self.tfArr addObject:tf];
            if(i == 0){
                [tf becomeFirstResponder];
                tf.userInteractionEnabled = YES;
                tf.layer.borderColor = RedColor;
            }else{
                tf.userInteractionEnabled = NO;
                tf.layer.borderColor = GrayColor;
            }
            [tf addTarget:self action:@selector(tfChange:) forControlEvents:UIControlEventEditingChanged];
        }
    }
    return self;
}
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{
    //>0说明我输入了一个字符
    if(textField.text.length > 0){
        textField.text = [textField.text substringToIndex:textField.text.length-1];
    }
    return YES;
}
-(void)tfChange:(UITextField *)textField{

    if(textField.tag == Count){
        self.lastTFText = textField.text;
    }

    if(textField.text.length > 0){
        if(textField.tag < self.tfArr.count){
            UITextField *tf = self.tfArr[textField.tag];
            tf.userInteractionEnabled = YES;
            [tf becomeFirstResponder];
            tf.layer.borderColor = RedColor;
            textField.userInteractionEnabled = NO;
        }else{
            //四个输入框输入完毕,
            //            [self endEditing:YES];
        }

    }
}

- (void)textFieldDidDeleteBackward:(UITextField *)textField{
    if(textField.tag == Count && self.lastTFText.length > 0){
        [textField becomeFirstResponder];
        self.lastTFText = @"";
    }else{
        //因为第一个UITextField的tag值为1
        if(textField.tag > 1){
            UITextField *tf = self.tfArr[textField.tag-2];
            tf.userInteractionEnabled = YES;
            tf.text = @"";
            [tf becomeFirstResponder];
            textField.userInteractionEnabled = NO;
            textField.layer.borderColor = GrayColor;
        }
    }
}
@end

 

 使用：

VerificationCodeView *codeView = [[VerificationCodeView alloc]initWithFrame:CGRectMake(50, 150, self.view.bounds.size.width-100, 44)];
 [self.view addSubview:codeView];