功能显示(view:UIView){
view.addSubview(self)
contentView!transform=CGAffineTransformMakeScale(1.21, 1.21)
contentView!alpha=0;
UIView.animateWithDuration(1,delay: 0,usingSpringWithDamping: 0.7,initialSpringVelocity: 1,options: UIViewAnimationOptions.CurveEaseInOut,animations: {()-Void in
self.textField.becomeFirstResponder()
self.contentView!transform=CGAffineTransformMakeScale(1, 1)
self.contentView!alpha=1;
},完成:无)
}2.布局弹出视图
上述提示中使用的标签不再提及。主要是UITextField的布局,几个小点和左边的线。布局UITextField时,隐藏UITextField,因为不需要向用户显示输入框。然后计算每6个点以及右侧分割线的位置,将小点也隐藏起来
函数setupView(){
contentView=UIView(frame: CGRectMake(40,100,240,200))
contentView!backgroundColor=UIColor.whiteColor()
contentView?layer.cornerRadius=5;
self.addSubview(contentView!)
让btn:UIButton=UIButton(type:Custom)
btn.frame=CGRectMake(0, 0, 46, 46)
btn .addTarget(self, action: "关闭", forControlEvents:TouchUpInside)
btn .setTitle("", forState:Normal)
btn .setTitleColor(UIColor.blackColor(), forState:Normal)
contentView!addSubview(btn)
让titleLabel:UILabel=UILabel(frame: CGRectMake(0,0,contentView!frame.size.width,46))
titleLabel.text="请输入支付密码"
titleLabel.textAlignment=NSTextAlignment.Center
titleLabel.font=UIFont.systemFontOfSize(15)
contentView!addSubview(titleLabel)
让linView:UIView=UIView (frame: CGRectMake(0,46,self.frame.size.height,1))
linView.backgroundColor=UIColor.blackColor()
linView.alpha=0.4
contentView?addSubview(linView)
让MoneyLabel:UILabel=UILabel(frame: CGRectMake(0,56,contentView!frame.size.width,26))
MoneyLabel.text="金额: 20元"
MoneyLabel.textAlignment=NSTextAlignment.Center
MoneyLabel.font=UIFont.systemFontOfSize(20)
contentView?addSubview(moneyLabel)
textField=UITextField(frame: CGRectMake(0,contentView!frame.size.height - 60, contentView!frame.size.width, 35))
textField.delegate=自我
文本字段.hidden=true
textField.keyboardType=UIKeyboardType.NumberPad
contentView?addSubview(textField!)
让inputView:UIView=UIView(frame: CGRectMake(self.inputViewX,contentView!frame.size.height - 60,inputViewWidth, 35))
inputView.layer.borderWidth=1;
inputView.layer.borderColor=UIColor(red: 0.9, green: 0.9, blue: 0.9, alpha: 1).CGColor;
contentView?addSubview(inputView)
让rect:CGRect=inputView.frame
让x:CGFloat=rect.origin.x + (inputViewWidth/12)
让y:CGFloat=矩形.origin.y + 35/2 - 5
对于var i=0 ;i 6;我++ {
让circleLabel:UILabel=UILabel(frame: CGRectMake(x + 35 * CGFloat(i) ,y,10,10))
CircleLabel.backgroundColor=UIColor.blackColor()
CircleLabel.layer.cornerRadius=5
CircleLabel.layer.masksToBounds=true
圆标签.hidden=true
contentView?addSubview(circleLabel)
pwdCircleArr.append(circleLabel)
如果我==5 {
继续
}
让line:UIView=UIView(frame: CGRectMake(rect.origin.x + (inputViewWidth/6)*CGFloat(i + 1),rect.origin.y, 1 ,35))
line.backgroundColor=UIColor(red: 0.8, green: 0.8, blue: 0.8, alpha: 1)
线.alpha=0.4
contentView?addSubview(line)
}
}3.实现UITextField的代理方法,在这个代理方法中处理小点的显示。
func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -Bool {
if(textField.text?characters.count 6){
返回错误
}
var 密码: 字符串
if string.characters.count=0 {
让索引=textField.text?endIndex.advancedBy(-1)
密码=textField.text!substringToIndex(index!)
}
别的{
密码=文本字段.文本! + 字符串
}
self .setCircleShow(password.characters.count)
if(密码.字符数.count==6){
完整块?(密码)
关闭()
}
返回真;
【Swift开发:实现类似微信支付密码输入的交互效果】相关文章:
用户评论
这是个很棒的功能!我一直想让我的 app 支持 WeChat Pay,这个支付密码输入效果能大大提升用户体验。
有10位网友表示赞同!
真期待看到完整的代码,看看如何实现这个流畅的效果。
有14位网友表示赞同!
分享一下你用到的第三方库吗?
有14位网友表示赞同!
这个支付密码输入效果会不会影响支付速度呢?
有9位网友表示赞同!
Swift 实现这种复杂的 UI 要花不少功夫吧!佩服你的技术实力。
有12位网友表示赞同!
有没有考虑过使用其他颜色作为背景,比如深色模式下用浅灰色的背景?
有7位网友表示赞同!
请问输入密码是否支持数字、英文和符号同时输入?
有10位网友表示赞同!
支付密码输入框的功能需求有很多,比如说错误提示、密码强度检测等等。
有18位网友表示赞同!
这篇文章能不能做个详细教程,一步步指导我们实现这个效果?
有14位网友表示赞同!
学习学习! 我也想试试在自己的项目中使用它。
有8位网友表示赞同!
这个输入效果是不是可以应用到其他类型的密码输入场景呢?
有11位网友表示赞同!
微信支付的安全性一直都很高,这次这方面又有哪些改进?
有6位网友表示赞同!
这个效果应该很美观吧? 预想一下动画展示的样子。
有13位网友表示赞同!
Swift开发WeChat Pay确实难度比较大,希望看到你的解决方案。
有5位网友表示赞同!
分享你的一些 Swift 开发经验吧! 或许能帮助到我们这些新手们。
有14位网友表示赞同!
除了输入界面,其他地方的代码逻辑也会受到影响吗?
有19位网友表示赞同!
文章内容是不是可以加上一些图片或视频演示效果呢?
有18位网友表示赞同!
学习你的代码,可以更深入了解 WeChat Pay 的开发流程。
有12位网友表示赞同!
希望看到更多关于 Swift 开发WeChat Pay的资源和分享!
有20位网友表示赞同!
这个支付密码输入,是不是会根据用户的手机型号适配?
有11位网友表示赞同!