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

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

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

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

2、视图中的子控件

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

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

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

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

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

层级关系

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

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

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

验证码输入效果

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

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

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

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);
}

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

时间: 2016-01-08

iOS实现类似微信和支付宝的密码输入框(UIKeyInput协议)

目前在项目中需要实现发红包的功能,自己就写了一个密码输入框的控件,主要用到了UIKeyInput协议和CoreGraphics框架,效果类似微信支付,感觉还行就把我的思路和制作过程写下来给大家分享一下. 让你的自定义View具备输入的功能(UIKeyInput协议) 通过UIKeyInput协议可以为响应者提供简单的键盘输入的功能,让需要键盘的responder成为第一响应者就行了.UIKeyInput协议必须实现的有三个方法,分别是以下方法: #pragma mark - UIKeyInput

iOS密码在进入后台1小时后重新设置

废话不多说了,直接给大家贴代码了,具体代码如下所示: AppDelegate.m #import "AppDelegate.h" #import "ViewController.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDi

iOS实现账号、密码记住功能

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 一.效果图 二.工程图 三.代码 RegisViewController.h #import <UIKit/UIKit.h> @interface RegisViewController : UIViewController @end RegisViewController.m //注册页面 #import "RegisViewController.h" #import "Log

iOS输入框(UITextField)密码明暗文切换方法

在做明暗文切换(密码输入框)的时候遇见一个坑,就是切换secureTextEntry的时候,输入框的光标会偏移,下面列出了一个解决办法及一种明暗文切换的方法 - (IBAction)pwdTextSwitch:(UIButton *)sender { // 前提:在xib中设置按钮的默认与选中状态的背景图 // 切换按钮的状态 sender.selected = !sender.selected; if (sender.selected) { // 按下去了就是明文 NSString *temp

利用VBS脚本修改联想笔记本BIOS密码的代码分享

这不科学!无意中找到的一些资料: vbs 代码: 复制代码 代码如下: strComputer = "." Set objWMIService = GetObject("winmgmts:\\" & strComputer & "\root\WMI") ' Obtain an instance of the the class ' using a key property value. Set objShare = objWMIS

IOS开发使用KeychainItemWrapper 持久存储用户名和密码

首先从官网下载 KeychainItemWrapper.h KeychainItemWrapper.m 将这两个文件导入项目中 不过该文件是手动释放的 所以要使用这个文件需要先做一些处理: 如果要使用KeychainItemWrapper.h类 在CompileSources中选中该类 添加-fno-objc-arc 接下来直接上代码: KeychainItemWrapper *keychain=[[KeychainItemWrapper alloc] initWithIdentifier:@"

Android实战教程第七篇之如何在内存中存储用户名和密码

本文实例为大家分享了Android内存中存储用户名和密码的方法,供大家参考,具体内容如下 首先是配置文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layo

用批处理/注销脚本清除 存储用户名和密码 列表的代码

windows xp pro以上的系统,在进行网络共享验证.内部网或代理域验证.runas /savecred 等方式存储的windows用户名和密码,可以在控制面板的"用户和账户"的密码管理中进行管理,也可以运行control keymgr.dll进行管理. 在用户目录%appdata%/microsoft 下的 Credentials.Protect保存了这些保存用户名和密码.在删除这两个目录后重启,即可清除保存动密码列表. 故可以建立批处理,添加到用户的注销脚本中: 复制代码 代

IOS 开发之数据存储writeToFile的应用实例

IOS 开发之数据存储writeToFile的应用实例 最近项目上要弄数据的导入与导出,所以就研究了一下数据的保存,其实很简单  第一步:获得文件即将保存的路径: NSArray *documentPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,  NSUserDomainMask,YES);//使用C函数NSSearchPathForDirectoriesInDomains来获得沙盒中目录的全路径.该函数有三个参数

详解iOS开发中app的归档以及偏好设置的存储方式

ios应用数据存储方式(归档) 一.简单说明 在使用plist进行数据存储和读取,只适用于系统自带的一些常用类型才能用,且必须先获取路径相对麻烦: 偏好设置(将所有的东西都保存在同一个文件夹下面,且主要用于存储应用的设置信息) 归档:因为前两者都有一个致命的缺陷,只能存储常用的类型.归档可以实现把自定义的对象存放在文件中. 二.代码示例 1.文件结构 2.代码示例 YYViewController.m文件 复制代码 代码如下: // //  YYViewController.m //  02-归

iOS开发系列--详细介绍数据存取

概览 在iOS开发中数据存储的方式可以归纳为两类:一类是存储为文件,另一类是存储到数据库.例如前面IOS开发系列-Objective-C之Foundation框架的文章中提到归档.plist文件存储,包括偏好设置其本质都是存储为文件,只是说归档或者plist文件存储可以选择保存到沙盒中,而偏好设置系统已经规定只能保存到沙盒的Library/Preferences目录.当然,文件存储并不作为本文的重点内容.本文重点还是说数据库存储,做过数据库开发的朋友应该知道,可以通过SQL直接访问数据库,也可以

详解iOS开发中Keychain的相关使用

一.Keychain 基础 根据苹果的介绍,iOS设备中的Keychain是一个安全的存储容器,可以用来为不同应用保存敏感信息比如用户名,密码,网络密码,认证令牌.苹果自己用keychain来保存Wi-Fi网络密码,VPN凭证等等.它是一个sqlite数据库,位于/private/var/Keychains/keychain-2.db,其保存的所有数据都是加密过的. 开发者通常会希望能够利用操作系统提供的功能来保存凭证(credentials)而不是把它们(凭证)保存到NSUserDefault

浅谈iOS开发中static变量的三大作用

(1)先来介绍它的第一条也是最重要的一条:隐藏 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性.为理解这句话,我举例来说明.我们要同时编译两个源文件,一个是a.c,另一个是main.c. 下面是a.c的内容 char a = 'A'; // global variable void msg() { printf("Hello\n"); } 下面是main.c的内容 int main(void) { extern char a; // extern v

iOS开发系列--通知与消息机制详解

概述 在多数移动应用中任何时候都只能有一个应用程序处于活跃状态,如果其他应用此刻发生了一些用户感兴趣的那么通过通知机制就可以告诉用户此时发生的事情.iOS中通知机制又叫消息机制,其包括两类:一类是本地通知:另一类是推送通知,也叫远程通知.两种通知在iOS中的表现一致,可以通过横幅或者弹出提醒两种形式告诉用户,并且点击通知可以会打开应用程序,但是实现原理却完全不同.今天就和大家一块去看一下如何在iOS中实现这两种机制,并且在文章后面会补充通知中心的内容避免初学者对两种概念的混淆. 本地通知 本地通

React Native搭建iOS开发环境

一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&