本文提供了实现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的相关属性）
|
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);
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助。