摘要:首先想到输入框就避不开,所以我们的思路从开始发散。首先需要创建一个密码输入框,目的是可以弹起键盘,并且输入内容。
现在的 app 大部分会接入三方支付,同时也有一些 app 会选择一种充值模式,让用户把自己的资金存入 app 内,这样在用户需要在 app 中购买商品时,就能够用自己的钱包进行支付,在这里就会涉及到支付密码弹窗的实现,下面说一下对一个简单的密码支付弹窗实现过程。
首先想到输入框就避不开 UITextfield,所以我们的思路从 UITextfield 开始发散。
首先需要创建一个密码输入框,目的是可以弹起键盘,并且输入内容。
如果以 UItextfield 为基础,将输入内容设置为密文输入显示的话,展示出来的效果是会把内容挤在一起,所以需要监听输入框的输入内容,然后通过输入的内容进行相应判断,然后我们绘制好对应的小黑点,将其在"输入框"中显示。同时除了小黑点之外,我们还需要绘制对应的线框。
创建"密码输入框"UIView *inputView = [[UIView alloc]init]; inputView.backgroundColor = White_Color; inputView.layer.borderWidth = 1; inputView.layer.borderColor = UIColorFromRGB(0xb2b2b2).CGColor; [self.alertWhiteView addSubview:inputView]; [inputView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.moneyLabel.mas_bottom).offset(19); make.centerX.equalTo(self.alertWhiteView); make.width.offset(squreWidth*6); make.height.offset(squreWidth); make.bottom.offset(-19); }];绘制小黑点以及分割线
for (int i = 1; i<7; i++) {
// 黑色点
UIView *spotView = [[UIView alloc]initWithFrame:CGRectMake((i-1)*squreWidth+(squreWidth-dotWidth)/2, (squreWidth-dotWidth)/2, dotWidth, dotWidth)];
spotView.backgroundColor = UIColorFromRGB(0x262122);
// 切圆
spotView.clipsToBounds = YES;
spotView.layer.cornerRadius = dotWidth/2;
// 隐藏,输入时再显示
spotView.hidden = YES;
[inputView addSubview:spotView];
// 把小黑点按照顺序依次加入数组中
[_dotArray addObject:spotView];
if (i!=6) {
// 分割线
UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(i*squreWidth, 0, 1, squreWidth)];
lineView.backgroundColor = UIColorFromRGB(0xb2b2b2);
[inputView addSubview:lineView];
}
}
添加 UITextfield
// 密码输入框 [self.passWordTextField mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.moneyLabel.mas_bottom).offset(19); make.centerX.equalTo(self.alertWhiteView); make.width.offset(squreWidth*6); make.height.offset(squreWidth); make.bottom.offset(-19); }];
懒加载方式:
// 懒加载方式
- (UITextField *)passWordTextField{
if (!_passWordTextField) {
_passWordTextField = [[UITextField alloc]init];
// 设置为纯数字键盘
_passWordTextField.keyboardType = UIKeyboardTypeNumberPad;
[self.alertWhiteView addSubview:_passWordTextField];
// 默认隐藏
_passWordTextField.hidden = YES;
// 添加输入监听
[_passWordTextField addTarget:self action:@selector(textFieldDidChange:)forControlEvents:UIControlEventEditingChanged];
}
return _passWordTextField;
}
监听键盘输入内容
// 键盘内容监听
- (void)textFieldDidChange:(UITextField *)textField{
if (textField.text.length == 6) {
// [MBProgressHUD showError:@"密码错误,请重新尝试"];
if (self.completeBlock) {
self.completeBlock(textField.text);
[textField resignFirstResponder];
textField.text = @"";
}
}
if (textField.text.length == 7) {
textField.text = [textField.text substringToIndex:1];
for (int j = 0; j<_dotArray.count; j++) {
UIView *view = _dotArray[j];
view.hidden = YES;
}
}
if (textField.text.length>0&&textField.text.length<7) {
for (int j = 0; j<_dotArray.count; j++) {
UIView *view = _dotArray[j];
if (jelse{
view.hidden = YES;
}
}
}else{
for (int j = 0; j<_dotArray.count; j++) {
UIView *view = _dotArray[j];
view.hidden = YES;
}
}
}
这里面比较关键的地方是:
自己绘制小黑点代替 passWordTextField 的内容,并添加到自定义的"密码输入框"中
当弹出密码输入框时,让 passWordTextField 变成第一响应者,弹起键盘
通过键盘的监听事件,内容进行相应判断,以及取出对应数量的小黑点来进行输入的展示
其他在这里省略了很多步骤,只拿最关键的过程来描述,比如其他相关视图的创建,弹起的相关逻辑,以及输入完毕的回调处理,在这里就不一一赘述了
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/7073.html
摘要:前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正。为什么要梳理这篇文章最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目。 前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正。 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目...
摘要:通用头部这也是开发人员见过的最多的信息,包括如下请求的服务器地址请求方式请求的返回状态码,如代表成功请求的远程服务器地址会转为譬如,在跨域拒绝时,可能是为,状态码为等当然,实际上可能的组合有很多。 面试中经常会被问到这个问题吧,唉,我最开始被问到的时候也就能大概说一些流程。被问得多了,自己就想去找找这个问题的全面回答,于是乎搜了很多资料和网上的文章,根据那些文章写一个总结。 写得不好...
摘要:通用头部这也是开发人员见过的最多的信息,包括如下请求的服务器地址请求方式请求的返回状态码,如代表成功请求的远程服务器地址会转为譬如,在跨域拒绝时,可能是为,状态码为等当然,实际上可能的组合有很多。 面试中经常会被问到这个问题吧,唉,我最开始被问到的时候也就能大概说一些流程。被问得多了,自己就想去找找这个问题的全面回答,于是乎搜了很多资料和网上的文章,根据那些文章写一个总结。 写得不好...
摘要:通用头部这也是开发人员见过的最多的信息,包括如下请求的服务器地址请求方式请求的返回状态码,如代表成功请求的远程服务器地址会转为譬如,在跨域拒绝时,可能是为,状态码为等当然,实际上可能的组合有很多。 面试中经常会被问到这个问题吧,唉,我最开始被问到的时候也就能大概说一些流程。被问得多了,自己就想去找找这个问题的全面回答,于是乎搜了很多资料和网上的文章,根据那些文章写一个总结。 写得不好...
阅读 681·2023-04-25 19:43
阅读 3854·2021-11-30 14:52
阅读 3727·2021-11-30 14:52
阅读 3794·2021-11-29 11:00
阅读 3745·2021-11-29 11:00
阅读 3812·2021-11-29 11:00
阅读 3528·2021-11-29 11:00
阅读 6007·2021-11-29 11:00