服务器之家

服务器之家 > 正文

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

时间:2021-01-04 17:04     来源/作者:世俗孤岛

本文提供了实现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的相关属性)

?
1
2
3
4
5
6
7
8
9
10
@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的子控件)

?
1
2
3
4
5
6
7
8
@interface idvertificationcodeinputview () <uitextfielddelegate>
/**用于获取键盘输入的内容,实际不显示*/
@property (nonatomic, strong) uitextfield *textfield;
/**验证码/密码输入框的背景图片*/
@property (nonatomic, strong) uiimageview *backgroundimageview;
/**实际用于显示验证码/密码的label*/
@property (nonatomic, strong) idlabel *label;
@end

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

公有属性

?
1
2
3
4
5
6
@interface idlabel : uilabel
/**验证码/密码的位数*/
@property (nonatomic, assign) nsinteger numberofvertificationcode;
/**控制验证码/密码是否密文显示*/
@property (nonatomic, assign) bool securetextentry;
@end

3、业务逻辑

vertificationcodeinputview的初始化

  • 设置验证码/密码的默认位数(4位),添加textfield和label
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- (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
?
1
2
3
4
5
6
7
8
- (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中一致
?
1
2
3
4
5
6
7
8
9
- (void)setnumberofvertificationcode:(nsinteger)numberofvertificationcode {
  _numberofvertificationcode = numberofvertificationcode;
  // 保持label的验证码/密码位数与idvertificationcodeinputview一致,此时label一定已经被创建
  self.label.numberofvertificationcode = _numberofvertificationcode;
}
- (void)setsecuretextentry:(bool)securetextentry {
  _securetextentry = securetextentry;
  self.label.securetextentry = _securetextentry;
}

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

弹出键盘

?
1
2
3
- (void)touchesbegan:(nsset<uitouch *> *)touches withevent:(uievent *)event {
  [self.textfield becomefirstresponder];
}

接收键盘输入的字符

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- (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方法

?
1
2
3
4
5
6
//重写settext方法,当text改变时手动调用drawrect方法,将text的内容按指定的格式绘制到label上
- (void)settext:(nsstring *)text {
  [super settext:text];
  // 手动调用drawrect方法
  [self setneedsdisplay];
}

绘制验证码/密码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 按照指定的格式绘制验证码/密码
- (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相关属性

?
1
2
3
4
5
6
7
8
9
10
- (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];
}

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

?
1
2
3
- (void)touchesbegan:(nsset<uitouch *> *)touches withevent:(uievent *)event {
  nslog(@"%@", self.vertificationcodeinputview.vertificationcode);
}

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

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
返回顶部