iOS验证码输入的实现思路分析
创始人
2024-12-19 19:01:37
0次

1.多个UITextField组成

这种方式好处是有光标闪烁、但是在处理删除和动画效果时,就会显得有点笨拙,OFO应该是这样实现的,要严格处理好每个UITextField的FirstResponder。

2.一个UITextField组成,使用富文本

这个方式是可行的, 使用富文本设置每个字符的间距,允许编辑富文本,有光标闪烁,缺点应该也是不好处理动画效果。

3.使用UIView绘制

这个是我在GitHub上看到的一个半成品Demo,利用一个UIView,使用Quartz 2D和UIBezierPath进行绘制文本和下划线,并处理输入事件和键盘事件,其实整体下来代码也不多,300行以内,但是需要较好的iOS绘制功底。

4.一个UITextField和多个UILabel

这个是我接下来介绍的思路,这个思路的缺点应该是没有光标闪烁,其实也能伪实现,看是否必须要有这个需要了。这个思路比较简单,方便加入动画,纯粹下来就100多行,接下来看结构和代码:

新建一个UIView,初始化方法

- (instancetype)initWithCount:(NSInteger)count margin:(CGFloat)margin{  if (self = [super init]) {    self.itemCount = count; // itemCount是验证码的个数,比如6个    self.itemMargin = margin; // itemMargin是每个Label之间的间距    [self configTextField];  }  return self;}

添加内部子控件(演示)

- (void)configTextField{  UITextField *textField = [[UITextField alloc] init];  textField.autocapitalizationType = UITextAutocapitalizationTypeNone;  textField.keyboardType = UIKeyboardTypeNumberPad;  [textField addTarget:self action:@selector(tfEditingChanged:) forControlEvents:(UIControlEventEditingChanged)];  // 小技巧:这个属性为YES,可以强制使用系统的数字键盘,缺点是重新输入时,会清空之前的内容  // clearsOnBeginEditing 属性并不适用于 secureTextEntry = YES 时  // textField.secureTextEntry = YES;  [self addSubview:textField];  self.textField = textField;  // 小技巧:通过textField上层覆盖一个maskView,可以去掉textField的长按事件  UIButton *maskView = [UIButton new];  maskView.backgroundColor = [UIColor whiteColor];  [maskView addTarget:self action:@selector(clickMaskView) forControlEvents:(UIControlEventTouchUpInside)];  [self addSubview:maskView];  self.maskView = maskView;  for (NSInteger i = 0; i < self.itemCount; i++)  {    UILabel *label = [UILabel new];    [self addSubview:label];    [self.labels addObject:label];  }  for (NSInteger i = 0; i < self.itemCount; i++)  {    UIView *line = [UIView new];    [self.lines addObject:line];  }}

这里可能对maskView有点费解,maskView主要是为了挡住下面的UITextField,使用类UIButton是为了挡住事件,因为如果使用类UIView,会将事件传递到self,进而影响到外面隐藏键盘的代码,你可以试试就知道了。

主要处理业务逻辑的代码

#pragma mark - 编辑改变- (void)tfEditingChanged:(UITextField *)textField{  if (textField.text.length > self.itemCount) {    textField.text = [textField.text substringWithRange:NSMakeRange(0, self.itemCount)];  }  for (int i = 0; i < self.itemCount; i++)  {    UILabel *label = [self.labels objectAtIndex:i];    if (i < textField.text.length) {      label.text = [textField.text substringWithRange:NSMakeRange(i, 1)];    } else {      label.text = nil;    }  }  // 输入完毕后,自动隐藏键盘  if (textField.text.length >= self.itemCount) {    [textField resignFirstResponder];  }}

这里没有使用UITextField的delegate,使用UIControlEventEditingChanged足以,但是如果你的需求能输入英文等其他字符,就需要实现delegate去限制。

至此,验证码输入的核心代码就没有了,是不是感觉这么少!!在此基础上,我用Demo实现了3个基本效果,如图所示:

Github代码地址: 点我

小技巧Tip

当你不想让别人使用某个方法时,除了私有方法办法之外,还可以这么做:

- (instancetype)init UNAVAILABLE_ATTRIBUTE;+ (instancetype)new UNAVAILABLE_ATTRIBUTE;

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...