仿微信输入支付密码的弹窗

仿微信输入支付密码的弹窗

微信输入支付密码的弹窗效果相信大家都见过吧，先描述下它的特点（这里先不做微信支付的时候选择支付方式这一块）：

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 仿微信支付密码输入框

效果图如下：