用六个UITextField控件实现了六位验证码输入框。
1.每个格子只能输入一个数字，输入完成后，光标会自动跳到下一个格子。
2.删除某个数字后，光标会跳到上一个格子。
3.收到短信验证码之后，键盘上方会出现验证码，点击之后，可以自动将验证码输入到输入框中。
步骤一 自定义UITextField
AuthCodeTextField.h文件
自定义TextField的目的是将textfield 的deleteBackward代理方法传递出来。
@class AuthCodeTextField;
@protocol AuthCodeDeleteDelegate <NSObject>
-(void)authCodeTextFieldDeleteBackward:(AuthCodeTextField *)textField;
@end
@interface AuthCodeTextField : UITextField
@property (nonatomic,weak) id <AuthCodeDeleteDelegate>auth_delegate;
@end
AuthCodeTextField.m文件
自定义的TextField，边框，圆角，都写在这里
@implementation AuthCodeTextField
-(instancetype)init{
if(self = [super init]){
self.keyboardType = UIKeyboardTypeNumberPad;
self.textAlignment = NSTextAlignmentCenter;
self.backgroundColor = RGB(236, 237, 246);
self.layer.cornerRadius = 10;
self.layer.masksToBounds = YES;
self.textColor = [UIColor blackColor];
// iOS12.0 系统之后，可以自动获取短信中的验证码
if(@available(iOS 12.0,*)){
self.textContentType = UITextContentTypeOneTimeCode;
}
}
return self;
}
// 把这个代理方法传递出去
-(void)deleteBackward{
if(self.text.length == 0){
if([self.auth_delegate respondsToSelector:@selector(authCodeTextFieldDeleteBackward:)]){
[self.auth_delegate authCodeTextFieldDeleteBackward:self];
}
}
[super deleteBackward];
}
@end
AuthCodeInputView.h 文件
使用block的方式将 验证的结果传递出去
typedef void (^AuthCodeInputViewBlock)(BOOL success);
@interface AuthCodeInputView :UIView
-(instancetype)initWithFrame:(CGRect)frame andPhone:(NSString *)phone;
@property (nonatomic,copy) AuthCodeInputViewBlock authSuccess;
@end
AuthCodeInputView.m 文件
@interface AuthCodeInputView () <UITextFieldDelegate,AuthCodeDeleteDelegate>
@property (nonatomic,strong) NSString *phone;
@property (nonatomic,strong) UIView *backGround;
@property (nonatomic,strong) NSMutableArray *tfArr;
@property (nonatomic,strong) NSString *codeStr;
@end
@implementation AuthCodeInputView
-(instancetype)initWithFrame:(CGRect)frame andPhone:(NSString *)phone{
if(self = [super initWithFrame:frame])
{
_phone = phone;
[self createSubviews];
[self sendSMSMessage];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(keyboardWillShow:)
name:UIKeyboardWillShowNotification
object:nil];
}
return self;
}
-(void)dealloc{
[[NSNotificationCenter defaultCenter]removeObserver:self];
}
// 发送短信验证码
-(void)sendSMSMessage
{
}
-(void)createSubviews
{
_backGround = [[UIView alloc]init];
_backGround.backgroundColor = [UIColor whiteColor];
[self addSubview:_backGround];
_backGround.layer.cornerRadius = 10;
_backGround.layer.masksToBounds = YES;
[_backGround mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(0);
make.right.mas_equalTo(0);
make.height.mas_equalTo(320);
make.bottom.mas_equalTo(-400);
}];
UIButton *closeBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[closeBtn setImage:[UIImage imageNamed:@"alert_close"] forState:UIControlStateNormal];
[closeBtn addTarget:self action:@selector(closeAuthCodeInputView) forControlEvents:UIControlEventTouchUpInside];
[_backGround addSubview:closeBtn];
[closeBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(-10);
make.top.mas_equalTo(10);
make.width.height.mas_equalTo(40);
}];
UILabel *titleLab = [[UILabel alloc]init];
titleLab.text = @"输入验证码";
titleLab.textColor = [UIColor blackColor];
titleLab.font = [UIFont systemFontOfSize:24];
[_backGround addSubview:titleLab];
[titleLab sizeToFit];
[titleLab mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(35);
make.top.mas_equalTo(32);
}];
NSString *phoneStr = @"";
if(_phone.length > 7){
phoneStr = [_phone stringByReplacingCharactersInRange:NSMakeRange(3, 4) withString:@"****"];
}
UILabel *textLab = [[UILabel alloc]init];
textLab.text = [NSString stringWithFormat:@"为保障您的账号安全，需要进行短信验证码验证，我们将会发送验证码到%@，请输入验证码",phoneStr];
textLab.textColor = RGBCOLOR(153, 153, 153);
textLab.font = [UIFont systemFontOfSize:16];
textLab.numberOfLines = 0;
[_backGround addSubview:textLab];
CGSize textLabSize = [textLab sizeThatFits:CGSizeMake(kMainScreenWidth-65, CGFLOAT_MAX)];
[textLab mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(35);
make.top.equalTo(titleLab.mas_bottom).offset(15);
make.right.mas_equalTo(-30);
make.height.mas_equalTo(textLabSize.height);
}];
self.tfArr = [NSMutableArray array];
// 六个输入框
CGFloat padding = 12;
CGFloat width = 75/2;
for (int i = 1 ; i < 7; i ++) {
AuthCodeTextField *textF = [[AuthCodeTextField alloc]init];
textF.tag = i;
textF.auth_delegate = self;
textF.delegate = self;
[_backGround addSubview:textF];
[self.tfArr addObject:textF];
if(i == 1){
[textF becomeFirstResponder];
}
CGFloat offset = 0;
if(i <= 3){
offset = -width*(3-i) - padding *(3-i) - padding/2 - width/2;
}else{
offset = width*(i-4) + padding *(i-4) + padding/2 + width/2;
}
[textF mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(textLab.mas_bottom).offset(25);
make.width.mas_equalTo(75/2);
make.height.mas_equalTo(85/2);
make.centerX.mas_equalTo(offset);
}];
}
// 确认按钮
UIButton *sureBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[sureBtn setTitle:@"确认" forState:UIControlStateNormal];
[sureBtn addTarget:self action:@selector(checkAuthcode) forControlEvents:UIControlEventTouchUpInside];
[sureBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
sureBtn.titleLabel.font = [UIFont systemFontOfSize:18];
sureBtn.backgroundColor = RGB(96, 138, 190);
[_backGround addSubview:sureBtn];
sureBtn.layer.cornerRadius = 45/2;
sureBtn.layer.masksToBounds = YES;
[sureBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(75/2);
make.right.mas_equalTo(-75/2);
make.height.mas_equalTo(45);
make.bottom.mas_equalTo(-32);
}];
}
#pragma mark UITextFieldDelegate
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
// 获取短信中提取的验证码，自动输入到输入框中
if(string.length > 1){
for (int i = 0 ; i < self.tfArr.count; i++) {
AuthCodeTextField *tf = self.tfArr[i];
tf.text = [string substringWithRange:NSMakeRange(i, 1)];
}
return NO;
}
NSInteger nextTag = textField.tag + 1;
UITextField *nextTextField = [self viewWithTag:nextTag];
if(string.length > 0){
textField.text = string;
if (nextTextField) {
[nextTextField becomeFirstResponder];
}
else
{
self.codeStr = @"";
for (AuthCodeTextField *tf in self.tfArr) {
self.codeStr = [self.codeStr stringByAppendingString:tf.text];
}
}
return NO;
}
else
{
return YES;
}
}
// 调用接口验证验证码正确性
-(void)checkAuthcode
{
if(self.codeStr.length < 6){
//验证码不足六位
return;
}
}
-(void)closeAuthCodeInputView{
[self removeFromSuperview];
}
#pragma mark AuthCodeDeleteDelegate 删除输入的值
-(void)authCodeTextFieldDeleteBackward:(AuthCodeTextField *)textField
{ self.codeStr = @"";
NSInteger lastTag = textField.tag - 1;
AuthCodeTextField *lastTextField = [self viewWithTag:lastTag];
[lastTextField becomeFirstResponder];
}
#pragma mark NSNotificationCenter
-(void)keyboardWillShow:(NSNotification *)notify
{
NSDictionary *userInfo = [notify userInfo];
NSValue *aValue = [userInfo objectForKey:UIKeyboardFrameEndUserInfoKey];
CGRect keyboardRect = [aValue CGRectValue];
//height 就是键盘的高度
int height = keyboardRect.size.height;
[_backGround mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(0);
make.right.mas_equalTo(0);
make.height.mas_equalTo(320);
make.bottom.mas_equalTo(-height+10);
}];
}
@end
