微信输入支付密码的弹窗效果相信大家都见过吧，先描述下它的特点（这里先不做微信支付的时候选择支付方式这一块）：
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<kPasswordLength;i++){
if(i<kPasswordLength-1){
UILabel*vLine = (UILabel*)[self viewWithTag:kLineTag+ i];
if(!vLine){
vLine = [[UILabel alloc]init];
vLine.tag=kLineTag+ i;
[self addSubview:vLine];
}
vLine.frame=CGRectMake(perWidth + (perWidth +1)*i,0,1, frame.size.height);
vLine.backgroundColor= [UIColor grayColor];
}
UILabel*dotLabel = (UILabel*)[self viewWithTag:kDotTag+ i];
if(!dotLabel){
dotLabel = [[UILabel alloc]init];
dotLabel.tag=kDotTag+ i;
[self addSubview:dotLabel];
}
dotLabel.frame=CGRectMake((perWidth +1)*i + (perWidth -10)*0.5, (frame.size.height-10)*0.5,10,10);
dotLabel.layer.masksToBounds=YES;
dotLabel.layer.cornerRadius=5;
dotLabel.backgroundColor= [UIColorblackColor];
dotLabel.hidden=YES;
}
}
为了防止用户赋值粘帖，重写了-(BOOL)canPerformAction:(SEL)action withSender:(id)sender：
//禁止复制粘帖
-(BOOL)canPerformAction:(SEL)action withSender:(id)sender{
UIMenuController *menuController = [UIMenuController sharedMenuController];
if(menuController){
menuController.menuVisible=NO;
}
return NO;
}
这样就基本完成了供输入密码的文本框的构造。
3.定义一个LMPopInputPasswordView继承自UIView,这个是弹出视图，并定义一个LMPopInputPassViewDelegate委托和委托方法-(void)buttonClickedAtIndex:(NSUInteger)index withText:(NSString*)text;来传递用户输入的内容。
4.通过设置_textFiled.tintColor= [UIColorclearColor];//看不到光标
_textFiled.textColor= [UIColorclearColor];//看不到输入内容
来让用户看不到文本框的输入内容以及光标。
5.通过[_textFiledaddTarget:selfaction:@selector(textFiledEdingChanged)forControlEvents:UIControlEventEditingChanged];为文本框绑定事件，并通过以下方法来控制几个黑点的显示和隐藏，并且在输入密码长度等于6的时候调用点击确定按钮事件对应的方法：
-(void)textFiledEdingChanged
{
NSIntegerlength =_textFiled.text.length;
NSLog(@"lenght=%li",(long)length);
if(length==kPasswordLength){
[self buttonClickedAction:_ensureButton];
}
for(NSIntegeri=0;i
UILabel*dotLabel = (UILabel*)[_textFiled viewWithTag:kDotTag+ i];
if(dotLabel){
dotLabel.hidden= length <= i;
}
}
}
6.最后再为LMPopInputPasswordView添加动画弹出和动画消失的转场动画：
#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 仿微信支付密码输入框
效果图如下：
网友评论