内容简介:现在的 app 大部分会接入三方支付,同时也有一些 app 会选择一种充值模式,让用户把自己的资金存入 app 内,这样在用户需要在 app 中购买商品时,就能够用自己的钱包进行支付,在这里就会涉及到支付密码弹窗的实现,下面说一下对一个简单的密码支付弹窗实现过程。首先想到输入框就避不开 UITextfield,所以我们的思路从 UITextfield 开始发散。首先需要创建一个密码输入框,目的是可以弹起键盘,并且输入内容。
现在的 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 (j<textField.text.length) { view.hidden = NO; }else{ view.hidden = YES; } } }else{ for (int j = 0; j<_dotArray.count; j++) { UIView *view = _dotArray[j]; view.hidden = YES; } } } 复制代码
这里面比较关键的地方是:
- 自己绘制小黑点代替 passWordTextField 的内容,并添加到自定义的"密码输入框"中
- 当弹出密码输入框时,让 passWordTextField 变成第一响应者,弹起键盘
- 通过键盘的监听事件,内容进行相应判断,以及取出对应数量的小黑点来进行输入的展示
其他
在这里省略了很多步骤,只拿最关键的过程来描述,比如其他相关视图的创建,弹起的相关逻辑,以及输入完毕的回调处理,在这里就不一一赘述了
以上所述就是小编给大家介绍的《密码输入框实现流程简述》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
百度SEO一本通
潘坚、李迅 / 电子工业出版社 / 2015-6 / 59.00元
《百度SEO一本通》通过浅显易懂的叙述方式,以及大量的图示,详细介绍了SEO的关键技术要点,对于搜索引擎优化中重要的关键词优化、链接优化,以及百度推广中的推广技巧都进行了详细的介绍。 《百度SEO一本通》共分为11章,首先让大家了解SEO存在的原因,然后对网页、网站、空间和程序与SEO的关系展开了细节上的讨论,最后几章深入介绍了百度推广的相关概念、设置、技巧和实操,让读者可以轻松上手操作,易......一起来看看 《百度SEO一本通》 这本书的介绍吧!