详解iOS 验证码输入的实现思路

如图所示,现在很多App采用了类似下划线、方块等方式的验证码输入,直观美观!对于这种效果的实现方式,大概有以下几种方式:

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;

总结

以上所述是小编给大家介绍的iOS 验证码输入的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • IOS实现输入验证码、密码按位分割(二)

    本文提供了实现IOS实现输入验证码.密码按位分割的一种思路,分享给大家供大家参考,希望与大家共同交流. 一.实现思路 1.思路描述 自定义一个view,继承自UIView 在view中添加子控件textField,backgroundImageView,label 将验证码/密码的内容绘制到label的指定区域(计算得到),所以label要自定义,在drawRect方法中绘制验证码 使用一个属性secureTextEntry,来控制显示验证码(显示真实的数字)或密码(显示圆点) 2.视图中的子控

  • iOS 输入验证码或密码,自动下一位的实例

    系统没有textFeild 的相关当输入内容改变时候的代理方法...所以我们自己加一个监听来实现如下的效果 自动跳转下一位 主要代码如下: [_code1F becomeFirstResponder]; [_code1F addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged]; [_code2F addTarget:self action:@select

  • 详解iOS 验证码输入的实现思路

    如图所示,现在很多App采用了类似下划线.方块等方式的验证码输入,直观美观!对于这种效果的实现方式,大概有以下几种方式: 1.多个UITextField组成 这种方式好处是有光标闪烁.但是在处理删除和动画效果时,就会显得有点笨拙,OFO应该是这样实现的,要严格处理好每个UITextField的FirstResponder. 2.一个UITextField组成,使用富文本 这个方式是可行的, 使用富文本设置每个字符的间距,允许编辑富文本,有光标闪烁,缺点应该也是不好处理动画效果. 3.使用UIVi

  • 详解IOS 利用storyboard修改UITextField的placeholder文字颜色

    详解IOS 利用storyboard修改UITextField的placeholder文字颜色 最近有个需求需要修改UITextField的placeholder文字颜色,在网上找发现有用代码修改的,但是考虑到更加优雅的实现,所以尝试着在storyboard中直接实现,结果竟然真的成功了, 实现的位置如下: 具体步骤: 1.在User Defined Runtime Attributes中添加一个Key. 2.输入Key Path(这里我们输入_placeholderLabel.textColo

  • 详解iOS自定义UITabBar与布局

    在小编整理过的文章iOS项目基本框架搭建中,我们详细说明了如何对TabBarItem的图片属性以及文字属性进行一些自定义配置.但是,很多时候,我们需要修改TabBarItem的图片和文字属性之外,还需要自定义TabBarItem的位置,这样系统自带的TabBar的样式并不能满足我们的项目需求,所以我们需要对系统的UITabBar进行自定义,以达到我们的项目需求.例如新浪微博App的底部tab的item就无法用自带的TabBarItem进行实现,最中间那个[+]发布微博并不是用来切换tab的,而是

  • 详解IOS WebRTC的实现原理

    概述 它在2011年5月开放了工程的源代码,在行业内得到了广泛的支持和应用,成为下一代视频通话的标准. WebRTC的音视频通信是基于P2P,那么什么是P2P呢? 它是点对点连接的英文缩写. P2P连接模式 一般我们传统的连接方式,都是以服务器为中介的模式: 类似http协议:客户端?服务端(当然这里服务端返回的箭头仅仅代表返回请求数据). 我们在进行即时通讯时,进行文字.图片.录音等传输的时候:客户端A?服务器?客户端B. 而点对点的连接恰恰数据通道一旦形成,中间是不经过服务端的,数据直接从一

  • 详解IOS如何防止抓包

    目录 抓包原理 防止抓包 一.发起请求之前判断是否存在代理,存在代理就直接返回,请求失败. 二.我们可以在请求配置中清空代理,让请求不走代理 SSL Pinning(AFN+SSL Pinning)推荐 扩展 抓包原理 其实原理很是简单:一般抓包都是通过代理服务来冒充你的服务器,客户端真正交互的是这个假冒的代理服务,这个假冒的服务再和我们真正的服务交互,这个代理就是一个中间者 ,我们所有的数据都会通过这个中间者,所以我们的数据就会被抓取.HTTPS 也同样会被这个中间者伪造的证书来获取我们加密的

  • antd Vue实现Login登录页面布局案例详解 附带验证码验证功能

    效果 Login页面 <!-- * @Author: Jackie * @Date: 2022-05-07 14:34:06 * @LastEditTime: 2022-05-09 15:57:44 * @LastEditors: Jackie * @Description: 登录页 用户名-密码-验证码登录方式 * @FilePath: /vue-admin-template/src/views/Login.vue * @version: --> <template> <d

  • 详解Java中二分法的基本思路和实现

    目录 在一个有序数组中,找某个数是否存在 在一个有序数组中,找大于等于某个数最左侧的位置 在排序数组中查找元素的第一个和最后一个位置 局部最大值问题 在一个有序数组中,找某个数是否存在 思路: 由于是有序数组,可以先得到中点位置,中点可以把数组分为左右半边. 如果中点位置的值等于目标值,直接返回中点位置. 如果中点位置的值小于目标值,则去数组中点左侧按同样的方式寻找. 如果中点位置的值大于目标值,则取数组中点右侧按同样的方式寻找. 如果最后没有找到,则返回:-1. 代码 class Soluti

  • 详解IOS UITableViewCell 的 imageView大小更改

    详解IOS UITableViewCell 的 imageView大小更改 实例代码: - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCell

  • 详解IOS开发中生成推送的pem文件

    详解IOS开发中生成推送的pem文件 具体步骤如下: 首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http://developer.apple.com/iphone/manage/overview/index.action )并点击 App IDs 2. 创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,  com.itotem.ip

  • 详解IOS中文件路径判断是文件还是文件夹

    详解IOS中文件路径判断是文件还是文件夹 方法1 + (BOOL)isDirectory:(NSString *)filePath { BOOL isDirectory = NO; [[NSFileManager defaultManager] fileExistsAtPath:filePath isDirectory:&isDirectory]; return isDirectory; } 方法2 + (BOOL)isDirectory:(NSString *)filePath { NSNum

随机推荐