仿微信输入支付密码的弹窗
微信输入支付密码的弹窗效果相信大家都见过吧,先描述下它的特点(这里先不做微信支付的时候选择支付方式这一块):
1.模态显示,背景灰色,点击背景弹窗消失。
2.提供输入的密码框是看不到光标的,在文本框上长按的时候是可以看到放大镜,但是禁止赋值粘贴等操作。
3.输入密码的文本框是有分隔线的,而且会用黑色的圆点来替代输入的字符。
4.密码为6位数字,当用户输入够6位数字之后弹窗自动消失,然后判断密码正确性,就相当于点击了确认按钮。
下面讲具体实现:
1.首先,这里用到了一个第三方库的WTReTextField,这个类是UITextField的一个子类,可以通过设置它的pattern来限制文本框填充内容的格式,比如我们可以设置它可以输入像xxx xxxx xxxx这样格式的手机号码。在这里,我们限制它填充的内容为6为数字,不能输入其他非法字符。
2.我们定义一个YLPasswordTextFiled继承自WTReTextField。在这个类里面,重写了-(void)setFrame:(CGRect)frame方法,在这里面用UILabel控件来作为占位符(即在输入数字的时候显示的黑色圆点)刚开始这些占位符是隐藏的,当输入内容后显示,用户输入多少个字符就对应显示多少个黑点:
-(void)setFrame:(CGRect)frame
{
[super setFrame:frame];
CGFloatperWidth = (frame.size.width-kPasswordLength+1)*1.0/kPasswordLength;
for(NSIntegeri=0;i
pragma mark —animation methods
-(void)fadeIn
{
self.transform=CGAffineTransformMakeScale(1.3,1.3);
self.alpha=0;
[UIView animateWithDuration:.35animations:^{
self.alpha=1;
self.transform=CGAffineTransformMakeScale(1,1);
}completion:^(BOOLfinished) {
[_textFiled becomeFirstResponder];
}];
}
- (void)fadeOut
{
[self endEditing:YES];
[UIView animateWithDuration:.35animations:^{
self.transform=CGAffineTransformMakeScale(1.3,1.3);
self.alpha=0.0;
}completion:^(BOOLfinished) {
if(finished) {
[_overlayView removeFromSuperview];
[self removeFromSuperview];
}
}];
}
- (void)pop
{
UIWindow*keywindow = [[UIApplication sharedApplication]keyWindow];
[keywindow addSubview:_overlayView];
[keywindow addSubview:self];
self.center=CGPointMake(keywindow.bounds.size.width/2.0f,
keywindow.bounds.size.height/2.0f-100);
[self fadeIn];
}
- (void)dismiss
{
[self fadeOut];
}
7.最后在点击按钮的时候调用委托方法,传递用户输入的密码,然后弹窗消失:
-(void)buttonClickedAction:(UIButton*)sender
{
//传值给委托对象
if([_delegaterespondsToSelector:@selector(buttonClickedAtIndex:withText:)]){
[_delegate buttonClickedAtIndex:sender.tag withText:_textFiled.text];
}
[selfdismiss];
}
最后附上demo地址:DemoInPutPasswordView 仿微信支付密码输入框
效果图如下: