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

 更新时间:2016年01月11日 11:30:17   作者:世俗孤岛  
这篇文章主要介绍了IOS实现输入验证码、密码按位分割的方法,在App内,密码及验证码的输入,采用按位输入的方法,且位与位之间有分隔线,感兴趣的小伙伴们可以参考一下

本文提供了实现IOS实现输入验证码、密码按位分割的一种思路,分享给大家供大家参考,希望与大家共同交流。

一、实现思路
1、思路描述

  • 自定义一个view,继承自UIView
  • 在view中添加子控件textField,backgroundImageView,label
  • 将验证码/密码的内容绘制到label的指定区域(计算得到),所以label要自定义,在drawRect方法中绘制验证码
  • 使用一个属性secureTextEntry,来控制显示验证码(显示真实的数字)或密码(显示圆点)

2、视图中的子控件

  • textField:只负责弹出键盘,获取键盘输入的数据;不用于演示键盘输入的内容,实际是隐藏的
  • backgroundImageView:显示实现分割效果的背景图片
  • label:显示验证码或密码的内容

3、控件之间的关系
如图:

  • 编号“1”:父视图(vertificationCodeInputView)
  • 编号“2”:子视图(textField)
  • 编号“3”:子视图(backgroundImageView)
  • 编号“4”:子视图(label)
  • 图片来源于Xcode的调试工具

层级关系

  • label用于显示验证码的内容,必须在最上边
  • backgroundImageView显示背景图片,所以必须在label的后边,且可以显示出来

二、实现效果
密码输入效果

验证码输入效果

三、实现步骤
代码结构
如图:

1、IDVertificationCodeInputView(编号“1”视图)的的属性

公有属性(vertificationCodeInputView的相关属性)

@interface IDVertificationCodeInputView : UIView
/**背景图片*/
@property (nonatomic, copy) NSString *backgroudImageName;
/**验证码/密码的位数*/
@property (nonatomic, assign) NSInteger numberOfVertificationCode;
/**控制验证码/密码是否密文显示*/
@property (nonatomic, assign) bool secureTextEntry;
/**验证码/密码内容,可以通过该属性拿到验证码/密码输入框中验证码/密码的内容*/
@property (nonatomic, copy) NSString *vertificationCode;
@end

私有属性(vertificationCodeInputView的子控件)

@interface IDVertificationCodeInputView () <UITextFieldDelegate>
/**用于获取键盘输入的内容,实际不显示*/
@property (nonatomic, strong) UITextField *textField;
/**验证码/密码输入框的背景图片*/
@property (nonatomic, strong) UIImageView *backgroundImageView;
/**实际用于显示验证码/密码的label*/
@property (nonatomic, strong) IDLabel *label;
@end

2、IDLabel(编号“4”视图)的属性

公有属性

@interface IDLabel : UILabel
/**验证码/密码的位数*/
@property (nonatomic, assign) NSInteger numberOfVertificationCode;
/**控制验证码/密码是否密文显示*/
@property (nonatomic, assign) bool secureTextEntry;
@end

3、业务逻辑

vertificationCodeInputView的初始化

  • 设置验证码/密码的默认位数(4位),添加textField和label
- (instancetype)initWithFrame:(CGRect)frame {
  if (self = [super initWithFrame:frame]) {
    // 设置透明背景色,保证vertificationCodeInputView显示的frame为backgroundImageView的frame
    self.backgroundColor = [UIColor clearColor];
    // 设置验证码/密码的位数默认为四位
    self.numberOfVertificationCode = 4;
    /* 调出键盘的textField */
    self.textField = [[UITextField alloc] initWithFrame:self.bounds];
    // 隐藏textField,通过点击IDVertificationCodeInputView使其成为第一响应者,来弹出键盘
    self.textField.hidden = YES;
    self.textField.keyboardType = UIKeyboardTypeNumberPad;
    self.textField.delegate = self;
    // 将textField放到最后边
    [self insertSubview:self.textField atIndex:0];
    /* 添加用于显示验证码/密码的label */
    self.label = [[IDLabel alloc] initWithFrame:self.bounds];
    self.label.numberOfVertificationCode = self.numberOfVertificationCode;
    self.label.secureTextEntry = self.secureTextEntry;
    self.label.font = self.textField.font;
    [self addSubview:self.label];
  }
  return self;
}
  • 若设置了背景图片,需要将backgroundImageView添加进vertificationCodeInputView
- (void)setBackgroudImageName:(NSString *)backgroudImageName {
  _backgroudImageName = backgroudImageName;
  // 若用户设置了背景图片,则添加背景图片
  self.backgroundImageView = [[UIImageView alloc] initWithFrame:self.bounds];
  self.backgroundImageView.image = [UIImage imageNamed:self.backgroudImageName];
  // 将背景图片插入到label的后边,避免遮挡验证码/密码的显示
  [self insertSubview:self.backgroundImageView belowSubview:self.label];
}
  • 若设置了验证码/密码的位数,和是否密文显示,则需要保持label中相应属性与vertificationCodeInputView中一致
- (void)setNumberOfVertificationCode:(NSInteger)numberOfVertificationCode {
  _numberOfVertificationCode = numberOfVertificationCode;
  // 保持label的验证码/密码位数与IDVertificationCodeInputView一致,此时label一定已经被创建
  self.label.numberOfVertificationCode = _numberOfVertificationCode;
}
- (void)setSecureTextEntry:(bool)secureTextEntry {
  _secureTextEntry = secureTextEntry;
  self.label.secureTextEntry = _secureTextEntry;
}

4、弹出键盘,并接收键盘输入的字符

弹出键盘

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
  [self.textField becomeFirstResponder];
}

接收键盘输入的字符

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
  // 判断是不是“删除”字符
  if (string.length != 0) {// 不是“删除”字符
    // 判断验证码/密码的位数是否达到预定的位数
    if (textField.text.length < self.numberOfVertificationCode) {
      self.label.text = [textField.text stringByAppendingString:string];
      self.vertificationCode = self.label.text;
      return YES;
    } else {
      return NO;
    }
  } else { // 是“删除”字符
    self.label.text = [textField.text substringToIndex:textField.text.length - 1];
    self.vertificationCode = self.label.text;
    return YES;
  }
}

5、绘制验证码/密码(IDLabel)

手动调用drawRect方法

//重写setText方法,当text改变时手动调用drawRect方法,将text的内容按指定的格式绘制到label上
- (void)setText:(NSString *)text {
  [super setText:text];
  // 手动调用drawRect方法
  [self setNeedsDisplay];
}

绘制验证码/密码

// 按照指定的格式绘制验证码/密码
- (void)drawRect:(CGRect)rect {
  //计算每位验证码/密码的所在区域的宽和高
  float width = rect.size.width / (float)self.numberOfVertificationCode;;
  float height = rect.size.height;
  // 将每位验证码/密码绘制到指定区域
  for (int i = 0; i < self.text.length; i++) {
    // 计算每位验证码/密码的绘制区域
    CGRect tempRect = CGRectMake(i * width, 0, width, height);
    if (self.secureTextEntry) { // 密码,显示圆点
      UIImage *dotImage = [UIImage imageNamed:@"dot"];
      // 计算圆点的绘制区域
      CGPoint securityDotDrawStartPoint = CGPointMake(width * i + (width - dotImage.size.width) / 2.0, (tempRect.size.height - dotImage.size.height) / 2.0);
      // 绘制圆点
      [dotImage drawAtPoint:securityDotDrawStartPoint];
    } else { // 验证码,显示数字
      // 遍历验证码/密码的每个字符
      NSString *charecterString = [NSString stringWithFormat:@"%c", [self.text characterAtIndex:i]];
      // 设置验证码/密码的现实属性
      NSMutableDictionary *attributes = [[NSMutableDictionary alloc] init];
      attributes[NSFontAttributeName] = self.font;
      // 计算每位验证码/密码的绘制起点(为了使验证码/密码位于tempRect的中部,不应该从tempRect的重点开始绘制)
      // 计算每位验证码/密码的在指定样式下的size
      CGSize characterSize = [charecterString sizeWithAttributes:attributes];
      CGPoint vertificationCodeDrawStartPoint = CGPointMake(width * i + (width - characterSize.width) / 2.0, (tempRect.size.height - characterSize.height) / 2.0);
      // 绘制验证码/密码
      [charecterString drawAtPoint:vertificationCodeDrawStartPoint withAttributes:attributes];
    }
  }
}

6、使用示例

在控制器中创建,并设置vertificationCodeInputView相关属性

- (void)viewDidLoad {
  [super viewDidLoad];
  self.view.backgroundColor = [UIColor lightGrayColor];
  self.vertificationCodeInputView = [[IDVertificationCodeInputView alloc] initWithFrame:CGRectMake(50, 250, 200, 45)];
  self.vertificationCodeInputView.backgroudImageName = @"1";
  // 验证码(显示数字)
  self.vertificationCodeInputView.secureTextEntry = NO;
  //self.vertificationCodeInputView.secureTextEntry = YES;
  [self.view addSubview:self.vertificationCodeInputView];
}

点击屏幕,打印验证码的内容

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
  NSLog(@"%@", self.vertificationCodeInputView.vertificationCode);
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章

  • 详解iOS视频播放方式

    详解iOS视频播放方式

    本篇文章给大家详细讲述了详解iOS视频播放方式以及第三方开元播放软件的使用,学习下吧。
    2017-12-12
  • iOS 项目嵌入Flutter 运行(最新推荐)

    iOS 项目嵌入Flutter 运行(最新推荐)

    这篇文章主要介绍了iOS 项目嵌入Flutter 运行,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • iOS实现图片存在本地、再从本地获取图片的功能

    iOS实现图片存在本地、再从本地获取图片的功能

    本文主要介绍了iOS实现图片存在本地、再从本地获取图片的功能的代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • iOS中常用的宏定义总结

    iOS中常用的宏定义总结

    这篇文章主要给大家介绍了关于iOS中常用的宏定义的相关资料,例如UI元素、Log、系统、颜色类等等的示例代码,文中介绍地方非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-08-08
  • iOS应用开发中矢量图的使用及修改矢量图颜色的方法

    iOS应用开发中矢量图的使用及修改矢量图颜色的方法

    这篇文章主要介绍了iOS应用开发中矢量图的使用及修改矢量图颜色的方法,文中的方法是在Adobe Illustrator中绘制矢量图然后导入Xcode中使用,需要的朋友可以参考下
    2016-03-03
  • iOS 四种回调方法总结

    iOS 四种回调方法总结

    这篇文章主要介绍了iOS 四种回调方法总结的相关资料,需要的朋友可以参考下
    2016-10-10
  • iOS10 widget实现3Dtouch 弹出菜单

    iOS10 widget实现3Dtouch 弹出菜单

    这篇文章主要介绍了 iOS10 widget实现3Dtouch 弹出菜单的相关资料,需要的朋友可以参考下
    2016-12-12
  • iOS实现自定义表单实例代码

    iOS实现自定义表单实例代码

    表单对大家来说应该都不陌生,下面这篇文章主要给大家介绍了关于iOS如何实现自定义表单的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • iOS使用NSURLConnection实现断点续传下载

    iOS使用NSURLConnection实现断点续传下载

    这篇文章主要为大家详细介绍了iOS使用NSURLConnection实现断点续传下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • IOS 使用NSAssert()和NSParameterAssert调试程序

    IOS 使用NSAssert()和NSParameterAssert调试程序

    这篇文章主要介绍了IOS 使用NSAssert()和NSParameterAssert调试程序的相关资料,需要的朋友可以参考下
    2017-06-06

最新评论