经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » iOS » 查看文章
iOS学习——输入验证码界面封装
来源：cnblogs　　作者：mukekeheart　　时间：2018/12/20 9:31:50　　对本文有异议

　　在很多App中都有输入验证码的功能需求，最近项目需要也有这个功能。做完之后简单整理了一下，将实现的基本思路做下记录。实现后的效果大致如下图所示，当四位签到码全部输入时，提交按钮是可以提交的，否则提交按钮失效，不允许提交。

　　　　　　　　　　　　　　　　　　　　

1 整体布局

 　　上图整个界面的布局很简单，就不多说了，重点就是中间这一块的验证码输入功能，我把它单独封装拿出来封装在一个自定义View（KLCodeResignView）里了，下图是KLCodeResignView布局的层次结构。

　　　　　　　　　　　　　　　　　　　　

　　验证码输入视图（KLCodeResignView）的最底层用一个透明的UITextField来接收键盘的输入信息，上面则用4个展示视图（KLCodeView）来分别展示输入的验证码信息，所有的展示视图（KLCodeView）都放在一个数组中，方便后续的访问和调用。所以，KLCodeResignView应该向外提供两个处理入口，验证码输入完成和输入未完成时的操作入口，并在完成时提供输入验证码信息，这里我们采用block的方式进行向外提供操作入口。此外，我们还提供了一个可以修改验证码位数的入口，调用 initWithCodeBits: 即可设置验证码的位数。KLCodeResignView.h以及KLCodeResignView分类的代码如下：

  1. #import <UIKit/UIKit.h>
  3. NS_ASSUME_NONNULL_BEGIN
  5. typedef void (^CodeResignCompleted)(NSString *content);
  6. typedef void (^CodeResignUnCompleted)(NSString *content);
  8. @interface KLCodeResignView : UIView
  10. @property (copy, nonatomic) CodeResignCompleted codeResignCompleted;
  11. @property (copy, nonatomic) CodeResignUnCompleted codeResignUnCompleted;
  13. - (instancetype) initWithCodeBits:(NSInteger)codeBits;
  15. @end
  1. @interface KLCodeResignView () <UITextFieldDelegate>
  3. @property (strong, nonatomic) UITextField *contentF; //监听内容输入
  4. @property (strong, nonatomic) NSArray<KLCodeView *> *codeViewsArr;//展示验证码内容的codeView数组
  5. @property (assign, nonatomic) NSInteger currIndex;//当前待输入的codeView的下标
  7. @property (assign, nonatomic) NSInteger codeBits;//位数
  8.  
  9. @end

2 注意点

2.1  信息输入框UITextField

　　信息输入框UITextField是最重要的一部分，布局在KLCodeResignView的最底层，主要作用是用于接收验证码的输入，但是对应的光标肯定是不能显示出来的，而且该UITextField不能进行复制、粘贴、选择等操作。所以信息输入框contentF的配置如下：

  1. - (UITextField *)contentF {
  2.     if (!_contentF) {
  3.         _contentF = [[UITextField alloc] init];
  4.         //背景颜色和字体颜色都设置为透明的，这样在界面上就看不到
  5.         _contentF.backgroundColor = [UIColor clearColor];
  6.         _contentF.textColor = [UIColor clearColor];
  7.         _contentF.keyboardType = UIKeyboardTypeNumberPad;//数字键盘
  8.         _contentF.returnKeyType = UIReturnKeyDone;//完成
  9.         _contentF.tintColor = [UIColor clearColor];//设置光标的颜色
  10.         _contentF.delegate = self;
  11.     }
  12.     return _contentF;
  13. }

 　　最后，我们通过添加UITextField的分类来实现屏蔽复制、粘贴、选择等操作，其实这些都是在UITextField的 - (BOOL)canPerformAction:(SEL)action withSender:(id)sender 进行控制的，返回YES则允许，否则不允许，所以这里我们不管什么操作，全部返回NO，这就屏蔽了所有的操作。

  1. @implementation UITextField (ForbiddenSelect)
  3. /*
  4.  该函数控制是否允许 选择 全选 剪切 f粘贴等功能，可以针对不同功能进行限制
  5.  返回YES表示允许对应的功能，返回NO则表示不允许对应的功能
  6.  直接返回NO则表示不允许任何编辑
  7.  */
  8. - (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
  9.     return NO;
  10. }
  12. @end

 2.2 展示视图（KLCodeView）

　　展示视图（KLCodeView）就很简单了，布局就是一个UILabel在上面，最下面一个UIView的下划线，唯一需要考虑的点就是下划线的颜色问题，如何根据是否有内容进行颜色变化。这个问题的解决也很简单，因为这个 UILabel的内容是通过一个属性text来进行设置的，所以我们重写text的设置方法就OK了，当设置的text内容不为空时，我们就设置对应的颜色为需要的颜色（蓝色），否则设置为灰色。

  1. - (void)setText:(NSString *)text {
  2.     if (text.length > 0) {//有数据时设置为蓝色
  3.         self.codeLabel.text = [text substringToIndex:1];//只取一位数
  4.         self.lineView.backgroundColor = [UIColor blueColor];
  5.     } else {
  6.         self.codeLabel.text = @"";
  7.         self.lineView.backgroundColor = [UIColor grayColor];
  8.     }
  9. }

2.3 输入逻辑处理

　　输入处理逻辑就是在输入和删除时进内容进行判断，并将对应的内容显示到对应的展示视图（KLCodeView）中，内容的输入就都在UITextField的代理UITextFieldDelegate中的 - (BOOL)textField: shouldChangeCharactersInRange: replacementString:  方法中。

  • 我们用属性currIndex来表示当前待输入的展示视图KLCodeView的下标，所以，当输入一个合法的验证码时，currIndex要加1，当删除一个验证码时，currIndex要减1，并且当currIndex == 0时，删除按钮不起作用，currIndex不再减1了。
  • 如果在验证码输入完成和未完成时做不同的处理，通过我们前面提供的两个block  codeResignCompleted 和 codeResignUnCompleted 就可以了，我们再这里通过判断currIndex 是否等于 self.codeBits，相等则完成，否则没有完成，并且调用对应的block进行处理。
  • 对输入内容进行判断是否是纯数字，这个很简单，判断方法网上有很多方案，这里也简单地贴在下面的代码中。
  • 对输入的字符串的长度进行判断，如果超过当前位数，则输入无效。
  • 完成、删除操作的判断一定要在是否是纯数字以及位数过长判断之前，否则可能会导致完成、删除操作失效。
  1. #pragma mark --- UITextField delegate
  2. - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
  3.     //完成 则收回键盘
  4.     if ([string isEqualToString:@"\n"]) {
  5.         [textField resignFirstResponder];
  6.         return NO;
  7.     }
  8.     //删除 操作
  9.     if ([string isEqualToString:@""]) {
  10.         if (self.currIndex == 0) {//待输入的下标为0时 删除时下标不变化，否则下标减1
  11.             self.codeViewsArr[self.currIndex].text = string;
  12.         } else {
  13.             self.codeViewsArr[--self.currIndex].text = string;
  14.             if (self.codeResignUnCompleted) {
  15.                 NSString *content = [textField.text substringToIndex:self.currIndex];
  16.                 self.codeResignUnCompleted(content);
  17.             }
  18.         }
  19.         return YES;
  20.     }
  21.     //判断 输入的是否是纯数字，不是纯数字 输入无效
  22.     if (![self judgePureInt:string]) {
  23.         return NO;
  24.     }
  25.     //如果输入的内容超过了验证码的长度 则输入无效
  26.     if ((textField.text.length + string.length) > self.codeBits) {
  27.         return NO;
  28.     }
  29.     //输入的数字，则当前待输入的下标对应的 view中添加输入的数字，并且下标加1
  30.     self.codeViewsArr[self.currIndex++].text = string;
  31.     //当当前待输入的下标为codebits时表示已经输入了对应位数的验证码，执行完成操作
  32.     if (self.currIndex == self.codeBits && self.codeResignCompleted) {
  33.         NSString *content = [NSString stringWithFormat:@"%@%@", textField.text, string];
  34.         self.codeResignCompleted(content);
  35.     } else {
  36.         if (self.codeResignUnCompleted) {
  37.             NSString *content = [NSString stringWithFormat:@"%@%@", textField.text, string];
  38.             self.codeResignUnCompleted(content);
  39.         }
  40.     }
  41.     
  42.     return YES;
  43. }
  1. //判断一个字符串是都是纯数字
  2. - (BOOL)judgePureInt:(NSString *)content {
  3.     NSScanner *scan = [NSScanner scannerWithString:content];
  4.     int val;
  5.     return [scan scanInt:&val] && [scan isAtEnd];
  6. }

3 使用

　　使用时只需要创建对应的View进行布局就OK了，然后设置验证码输入完成和验证码输入未完成对应的处理方案。

  1. - (void)viewDidLoad {
  2.     [super viewDidLoad];
  3.     self.view.backgroundColor = [UIColor whiteColor];
  4.     WEAKSELF
  5.     KLCodeResignView *codeView = [[KLCodeResignView alloc] initWithCodeBits:4];
  6.     codeView.codeResignCompleted = ^(NSString * _Nonnull content) {
  7.         //对应位数输入完成时 允许提交按钮有效 允许提交
  8.         NSLog(@"%@", content);
  9.         weakSelf.submitBtn.enabled = YES;
  10.         weakSelf.submitBtn.alpha = 1.0f;
  11.     };
  12.     codeView.codeResignUnCompleted = ^(NSString * _Nonnull content) {
  13.         //对应位数未输入完成时 提交按钮失效 不允许提交
  14.         weakSelf.submitBtn.enabled = NO;
  15.         weakSelf.submitBtn.alpha = 0.5f;
  16.     };
  17.     [self.view addSubview:codeView];
  18.     
  19.     [codeView mas_makeConstraints:^(MASConstraintMaker *make) {
  20.         make.left.mas_equalTo(weakSelf.view).mas_offset(15.0f);
  21.         make.right.mas_equalTo(weakSelf.view).mas_offset(-15.0f);
  22.         make.top.mas_equalTo(weakSelf.view).mas_offset(100.0f);
  23.         make.height.mas_equalTo(40.0f);
  24.     }];
  25.     
  26.     _submitBtn = [UIButton buttonWithType:UIButtonTypeCustom];
  27.     _submitBtn.titleLabel.font = FONT(17.0f);
  28.     [_submitBtn setTitle:@"提交" forState:UIControlStateNormal];
  29.     [_submitBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
  30.     [_submitBtn setBackgroundColor:XRGB(3d,9a,e8)];
  31.     _submitBtn.enabled = NO;
  32.     _submitBtn.alpha = 0.5f;
  33.     _submitBtn.layer.cornerRadius = 5.0f;
  34. //    [submitBtn addTarget:self action:@selector(submitBtnClicked:) forControlEvents:UIControlEventTouchUpInside];
  35.     [self.view addSubview:_submitBtn];
  36.     [_submitBtn mas_makeConstraints:^(MASConstraintMaker *make) {
  37.         make.left.mas_equalTo(weakSelf.view).mas_offset(20.0f);
  38.         make.right.mas_equalTo(weakSelf.view).mas_offset(-20.0f);
  39.         make.top.mas_equalTo(weakSelf.view).mas_offset(260.0f);
  40.         make.height.mas_equalTo(45.0f);
  41.     }];
  42. }

　　所有的代码如下，主要分为两个文件，一个 KLCodeResignView.h，一个KLCodeResignView.m，如下：

  1. #import <UIKit/UIKit.h>
  3. NS_ASSUME_NONNULL_BEGIN
  5. typedef void (^CodeResignCompleted)(NSString *content);
  6. typedef void (^CodeResignUnCompleted)(NSString *content);
  8. @interface KLCodeResignView : UIView
  10. @property (copy, nonatomic) CodeResignCompleted codeResignCompleted;
  11. @property (copy, nonatomic) CodeResignUnCompleted codeResignUnCompleted;
  13. - (instancetype) initWithCodeBits:(NSInteger)codeBits;
  15. @end
KLCodeResignView.h
  1. #import "KLCodeResignView.h"
  2.  
  3. #define WEAKSELF typeof(self) __weak weakSelf = self;
  4. //自定义 验证码展示视图 view，由一个label和一个下划线组成
  5. @interface KLCodeView : UIView
  7. @property (strong, nonatomic) NSString *text;
  8. @property (strong, nonatomic) UILabel *codeLabel;
  9. @property (strong, nonatomic) UIView *lineView;
  11. @end
  12.  
  13.  
  14. @interface KLCodeResignView () <UITextFieldDelegate>
  16. @property (strong, nonatomic) UITextField *contentF; //监听内容输入
  17. @property (strong, nonatomic) NSArray<KLCodeView *> *codeViewsArr;//显示输入内容的codeView数组
  18. @property (assign, nonatomic) NSInteger currIndex;//当前待输入的codeView的下标
  20. @property (assign, nonatomic) NSInteger codeBits;//位数
  21.  
  22. @end
  23.  
  24. @implementation KLCodeResignView
  26. - (instancetype)initWithCodeBits:(NSInteger)codeBits {
  27.     self = [super init];
  28.     self.backgroundColor = [UIColor whiteColor];
  29.     self.codeBits = codeBits;
  30.     if (self) {
  31.         //验证码默认是4位
  32.         if (self.codeBits < 1) {
  33.             self.codeBits = 4;
  34.         }
  35.         WEAKSELF
  36.         [self addSubview:self.contentF];
  37.         [self.contentF mas_makeConstraints:^(MASConstraintMaker *make) {
  38.             make.top.bottom.right.left.mas_equalTo(weakSelf).mas_offset(0.0f);
  39.         }];
  40.         
  41.         for(NSInteger i = 0; i < self.codeBits; i++) {
  42.             KLCodeView *codeView = self.codeViewsArr[i];
  43.             [self addSubview:codeView];
  44.         }
  45.     }
  46.     return self;
  47. }
  49. - (void)layoutSubviews {
  50.     [super layoutSubviews];
  51.     WEAKSELF
  52.     //设定每个数字之间的间距为数字view宽度的一半 总宽度就是 bits + （bits - 1）* 0.5
  53.     CGFloat codeViewWidth = self.bounds.size.width/(self.codeBits * 1.5 - 0.5);
  54.     for(NSInteger i = 0; i < self.codeBits; i++) {
  55.         KLCodeView *codeView = self.codeViewsArr[i];
  56.         [codeView mas_updateConstraints:^(MASConstraintMaker *make) {
  57.             CGFloat left = codeViewWidth * 1.5 * i;
  58.             make.left.mas_equalTo(weakSelf).mas_offset(left);
  59.             make.top.bottom.mas_equalTo(weakSelf).mas_offset(0.0f);
  60.             make.width.mas_equalTo(codeViewWidth);
  61.         }];
  62.     }
  63. }
  65. #pragma mark --- UITextField delegate
  66. - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
  67.     //完成 则收回键盘
  68.     if ([string isEqualToString:@"\n"]) {
  69.         [textField resignFirstResponder];
  70.         return NO;
  71.     }
  72.     //删除 操作
  73.     if ([string isEqualToString:@""]) {
  74.         if (self.currIndex == 0) {//待输入的下标为0时 删除时下标不变化，否则下标减1
  75.             self.codeViewsArr[self.currIndex].text = string;
  76.         } else {
  77.             self.codeViewsArr[--self.currIndex].text = string;
  78.             if (self.codeResignUnCompleted) {
  79.                 NSString *content = [textField.text substringToIndex:self.currIndex];
  80.                 self.codeResignUnCompleted(content);
  81.             }
  82.         }
  83.         return YES;
  84.     }
  85.     //判断 输入的是否是纯数字，不是纯数字 输入无效
  86.     if (![self judgePureInt:string]) {
  87.         return NO;
  88.     }
  89.     //如果输入的内容超过了验证码的长度 则输入无效
  90.     if ((textField.text.length + string.length) > self.codeBits) {
  91.         return NO;
  92.     }
  93.     //输入的数字，则当前待输入的下标对应的 view中添加输入的数字，并且下标加1
  94.     self.codeViewsArr[self.currIndex++].text = string;
  95.     //当当前待输入的下标为codebits时表示已经输入了对应位数的验证码，执行完成操作
  96.     if (self.currIndex == self.codeBits && self.codeResignCompleted) {
  97.         NSString *content = [NSString stringWithFormat:@"%@%@", textField.text, string];
  98.         self.codeResignCompleted(content);
  99.     } else {
  100.         if (self.codeResignUnCompleted) {
  101.             NSString *content = [NSString stringWithFormat:@"%@%@", textField.text, string];
  102.             self.codeResignUnCompleted(content);
  103.         }
  104.     }
  105.     
  106.     return YES;
  107. }
  109. - (UITextField *)contentF {
  110.     if (!_contentF) {
  111.         _contentF = [[UITextField alloc] init];
  112.         //背景颜色和字体颜色都设置为透明的，这样在界面上就看不到
  113.         _contentF.backgroundColor = [UIColor clearColor];
  114.         _contentF.textColor = [UIColor clearColor];
  115.         _contentF.keyboardType = UIKeyboardTypeNumberPad;//数字键盘
  116.         _contentF.returnKeyType = UIReturnKeyDone;//完成
  117.         _contentF.tintColor = [UIColor clearColor];//设置光标的颜色
  118.         _contentF.delegate = self;
  119.     }
  120.     return _contentF;
  121. }
  123. - (NSArray<KLCodeView *> *)codeViewsArr {
  124.     if (!_codeViewsArr) {
  125.         NSMutableArray *arr = [NSMutableArray array];
  126.         for (NSInteger i = 0; i < self.codeBits; i++) {
  127.             KLCodeView *codeView = [[KLCodeView alloc] init];
  128.             [arr addObject:codeView];
  129.         }
  130.         _codeViewsArr = [NSArray arrayWithArray:arr];
  131.     }
  132.     return _codeViewsArr;
  133. }
  135. //判断一个字符串是都是纯数字
  136. - (BOOL)judgePureInt:(NSString *)content {
  137.     NSScanner *scan = [NSScanner scannerWithString:content];
  138.     int val;
  139.     return [scan scanInt:&val] && [scan isAtEnd];
  140. }
  142. @end
  143.  
  144.  
  145. @implementation UITextField (ForbiddenSelect)
  147. /*
  148.  该函数控制是否允许 选择 全选 剪切 f粘贴等功能，可以针对不同功能进行限制
  149.  返回YES表示允许对应的功能，返回NO则表示不允许对应的功能
  150.  直接返回NO则表示不允许任何编辑
  151.  */
  152. - (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
  153.     return NO;
  154. }
  156. @end
  157.  
  158.  
  159. //验证码展示视图 的实现
  160. @implementation KLCodeView
  162. - (instancetype)initWithFrame:(CGRect)frame {
  163.     self = [super initWithFrame:frame];
  164.     if (self) {
  165.         WEAKSELF
  166.         self.backgroundColor = [UIColor whiteColor];
  167.         self.userInteractionEnabled = NO;
  168.         //数字编码 label
  169.         _codeLabel = [[UILabel alloc] init];
  170.         _codeLabel.textColor = [UIColor blueColor];
  171.         _codeLabel.font = FONT(25.0f);
  172.         _codeLabel.textAlignment = NSTextAlignmentCenter;
  173.         [self addSubview:_codeLabel];
  174.         [_codeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
  175.             make.top.left.right.mas_equalTo(weakSelf).mas_offset(0.0f);
  176.             make.bottom.mas_equalTo(weakSelf).mas_offset(-10.0f);
  177.         }];
  178.         
  179.         _lineView = [[UIView alloc] init];
  180.         _lineView.backgroundColor = [UIColor grayColor];
  181.         [self addSubview:_lineView];
  182.         [_lineView mas_makeConstraints:^(MASConstraintMaker *make) {
  183.             make.bottom.left.right.mas_equalTo(weakSelf).mas_offset(0.0f);
  184.             make.height.mas_equalTo(2.0f);
  185.         }];
  186.     }
  187.     return self;
  188. }
  190. - (void)setText:(NSString *)text {
  191.     if (text.length > 0) {
  192.         self.codeLabel.text = [text substringToIndex:1];
  193.         self.lineView.backgroundColor = [UIColor blueColor];
  194.     } else {
  195.         self.codeLabel.text = @"";
  196.         self.lineView.backgroundColor = [UIColor grayColor];
  197.     }
  198. }
  201. @end
KLCodeResignView.m

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

iOS热门文章

  • snapkit更新约束崩溃的问题
  • iOS 14 UDP收不到广播处理
  • iOS开发用如何用类&quot;SKStoreProductViewController&quot;跳转AppStore点赞评分？
  • Charles抓包iPhone注意点以及SSL Proxying enabled for this host
  • 笔记：long、longlong、int、float、NSString相互转换
  • ios开发UI篇—UITextfield
  • 自定义相机碰到的问题，比如常见的拍照录制视频方向，镜像左右颠倒等问题
  • C 和 Object-C中的 #ifdef #ifndef
  • 使用Hbuilder将自己app发布到App Store（一）
  • iOS开发 - 超级签名实现之描述文件

    • iOS推荐文章

  • iOS开发基础135-Core Data
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
  • 苹果支付有哪些坑，为什么苹果支付比支付宝和微信容易丢单？
  • 带你走进灵动岛
  • vue3+ts Axios封装—重复请求拦截
  • axios详解以及完整封装方法
  • 关于 axios 是什么？以及怎么用？
  • iOS气泡提示工具BubblePopup的使用
  • 一篇文章带你详细了解axios的封装 - 公众号-web前端进阶
  • [MAUI]模仿iOS多任务切换卡片滑动的交互实现

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号