广告
返回顶部
首页 > 资讯 > 移动开发 >详解iOS 验证码输入的实现思路
  • 767
分享到

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

ios验证码输入 2022-05-23 11:05:43 767人浏览 安东尼
摘要

如图所示,现在很多App采用了类似下划线、方块等方式的验证码输入,直观美观!对于这种效果的实现方式,大概有以下几种方式: 1.多个UITextField组成 这种方式好处是有光标闪

如图所示,现在很多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 验证码输入的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程网网站的支持!

--结束END--

本文标题: 详解iOS 验证码输入的实现思路

本文链接: https://www.lsjlt.com/news/30194.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解iOS 验证码输入的实现思路
    如图所示,现在很多App采用了类似下划线、方块等方式的验证码输入,直观美观!对于这种效果的实现方式,大概有以下几种方式: 1.多个UITextField组成 这种方式好处是有光标闪...
    99+
    2022-05-23
    ios 验证码 输入
  • js实现验证码输入框示例详解
    目录前言思路遇到的问题HTMLCSSJS前言 验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验...
    99+
    2022-11-13
  • JavaScript实现密码框输入验证
    有时需要在前端页面,用户输入时先进行简单的验证,减少服务器压力 例如,限定了字段的输入长度: 输入框后有输入范围提示信息 输入错误长度的话,变成错误提示信息 输入正确长度的话,显示正...
    99+
    2022-11-12
  • Android实现短信验证码输入框
    本文实例为大家分享了Android实现短信验证码输入框的具体代码,供大家参考,具体内容如下 其实用官方自定的那个inputEditText默认带下划线的,然后自己再实行焦点和输入框...
    99+
    2022-11-12
  • Flutter验证码输入框的2种方法实现
    目录重点是什么?从头开始制作 OTP 字段使用第三个包结论本文向您展示了在 Flutter 中实现完美的验证码输入框几种不同方法。 重点是什么? 真实世界的 完美的验证码输入框或 P...
    99+
    2022-11-12
  • 手动实现js短信验证码输入框
    前言   本文记录一下自己手动实现的一个前端常见的短信验证码输入组件,从需求到实现逐步优化的过程。 正文   1.需求分析   首先看一下效果图。     首先页面加载的时...
    99+
    2022-11-12
  • uniapp手机验证码输入框如何实现
    本篇内容主要讲解“uniapp手机验证码输入框如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“uniapp手机验证码输入框如何实现”吧!如键盘被隐藏,可直接点击蓝框弹出键盘,蓝框就相当于i...
    99+
    2023-07-05
  • Flutter验证码输入框的实现方法有哪些
    Flutter验证码输入框的实现方法有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。重点是什么?真实世界的 完美的验证码输入框或 PIN 输入 UI 通常满...
    99+
    2023-06-22
  • 使用request实现手工输入验证码登录
    我们的目标网站是这个http://awehome.com.cn,登录页面是这个http://awehome.com.cn/tenant/login import requests import json url = 'http://a...
    99+
    2023-01-30
    验证码 手工 request
  • Python实现滑块验证码详解
    本节要讲解如下图所示的滑块验证码(更为复杂的滑动拼图验证码在下一篇介绍)。这种验证码机制比较简单:将滑块拖动到滑轨的最右端即可完成验证,如下图所示。如果未将滑块拖动到滑轨的最右端,则...
    99+
    2022-11-11
  • iOS 弹幕功能的实现思路图解
    先来看一张效果图(LICEcap录制的有点卡, 凑合看) 理一下大概流程: 接下来实现: 弹幕视图从底部弹上来, 依次动画向上滚动, 出屏幕就移除加入重用队列, 下次使用. 定义...
    99+
    2022-06-01
    iOS 弹幕
  • 如何使用Android实现常见的验证码输入框
    小编给大家分享一下如何使用Android实现常见的验证码输入框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!正文先搂一眼效果吧不要把注意力都放在头顶的那一抹绿上,...
    99+
    2023-05-30
    android
  • uniapp自定义输入框,实现验证码输入框、密码输入框、兼容微信小程序
    前言 在移动端或者小程序项目中,验证码输入框、密码输入框也是很常见的,今天我们就来实现一个这样的效果。 图片展示 代码实现 我这里是用uniapp实现的可兼容微信小程序。 大家如果需要微信小程序也可以参考此案例,实现思路都是一样的。 {{...
    99+
    2023-08-18
    微信小程序 uni-app 小程序
  • Python+KgCaptcha实现验证码的开发详解
    目录背景开发过程引入JSJS接入代码Python后台验证JS刷新验证码效果展示背景 闲来无聊,在网上发现了一个验证码产品KgCaptcha,下面是我用KgCaptcha开发验证码的记...
    99+
    2023-05-16
    Python KgCaptcha验证码开发 Python KgCaptcha验证码 Python 验证码
  • Android实现自定义验证码输入框效果(实例代码)
    这里提一下,这个当时也是在网上看到一个博主写的代码改了下用在我么项目中的验证码输入框。博主的地址不记得了这里只能顺带标注一下。。。 效果图如下: 就是这个酱紫 直入主题,代码...
    99+
    2022-06-06
    自定义 输入 验证码 输入框 Android
  • SpringBoot实现滑块验证码验证登陆校验功能详解
    目录前言一、实现效果二、实现思路三、实现步骤1. 后端 java 代码1.1 新建一个拼图验证码类1.2 新建一个拼图验证码工具类1.3 新建一个 service 类1.4 新建一个...
    99+
    2022-11-13
  • Spring Security短信验证码实现详解
    目录需求实现步骤获取短信验证码短信验证码校验过滤器短信验证码登录认证配置类进行综合组装需求 输入手机号码,点击获取按钮,服务端接受请求发送短信 用户输入验证码点击...
    99+
    2022-11-12
  • java实现手机短信验证的基本思路
    本文实例为大家分享了java实现手机短信验证的具体代码,供大家参考,具体内容如下整体流程: 客户填入手机号,通过客户端点击获取验证码按钮,验证手机号是否有效,有效则客户端发送请求到后台服务器,客户端开始倒计时60s,不通过则返回; 服...
    99+
    2023-05-30
    java 手机短信 验证
  • Qt实现自定义验证码输入框控件的方法
    目录前言UI布局:页面样式初始化:功能实现:前言 本文实现了自定义的验证码输入框控件。控件包括图标、输入框、获取验证码按钮、验证码获取倒计时标签。支持鼠标点击获取验证码按钮后开始显示...
    99+
    2022-11-13
  • Vue中设置登录验证拦截功能的思路详解
    目录一、解决思路二、让浏览器存储服务器返回的token三、在请求中设置访问权限四、封装登录验证Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和spring...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作