? 微信輸入支付密碼的彈窗效果相信大家都見過(guò)吧，先描述下它的特點(diǎn)（這里先不做微信支付的時(shí)候選擇支付方式這一塊）：
? 1.模態(tài)顯示，背景灰色，點(diǎn)擊背景彈窗消失。
? 2.提供輸入的密碼框是看不到光標(biāo)的，在文本框上長(zhǎng)按的時(shí)候是可以看到放大鏡，但是禁止賦值粘貼等操作。
? 3.輸入密碼的文本框是有分隔線的，而且會(huì)用黑色的圓點(diǎn)來(lái)替代輸入的字符。
? 4.密碼為6位數(shù)字，當(dāng)用戶輸入夠6位數(shù)字之后彈窗自動(dòng)消失，然后判斷密碼正確性，就相當(dāng)于點(diǎn)擊了確認(rèn)按鈕。
下面講具體實(shí)現(xiàn)：
1.首先，這里用到了一個(gè)第三方庫(kù)的WTReTextField，這個(gè)類是UITextField的一個(gè)子類，可以通過(guò)設(shè)置它的pattern來(lái)限制文本框填充內(nèi)容的格式，比如我們可以設(shè)置它可以輸入像xxx xxxx xxxx這樣格式的手機(jī)號(hào)碼。在這里，我們限制它填充的內(nèi)容為6為數(shù)字，不能輸入其他非法字符。
2.我們定義一個(gè)YLPasswordTextFiled繼承自WTReTextField。在這個(gè)類里面，重寫了-(void)setFrame:(CGRect)frame方法，在這里面用UILabel控件來(lái)作為占位符（即在輸入數(shù)字的時(shí)候顯示的黑色圓點(diǎn)）剛開始這些占位符是隱藏的，當(dāng)輸入內(nèi)容后顯示，用戶輸入多少個(gè)字符就對(duì)應(yīng)顯示多少個(gè)黑點(diǎn)：
-(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：
//禁止復(fù)制粘帖
-(BOOL)canPerformAction:(SEL)action withSender:(id)sender{
UIMenuController *menuController = [UIMenuController sharedMenuController];
if(menuController){
menuController.menuVisible=NO;
}
return NO;
}
這樣就基本完成了供輸入密碼的文本框的構(gòu)造。
3.定義一個(gè)LMPopInputPasswordView繼承自UIView,這個(gè)是彈出視圖，并定義一個(gè)LMPopInputPassViewDelegate委托和委托方法-(void)buttonClickedAtIndex:(NSUInteger)index withText:(NSString*)text;來(lái)傳遞用戶輸入的內(nèi)容。
4.通過(guò)設(shè)置_textFiled.tintColor= [UIColorclearColor];//看不到光標(biāo)
_textFiled.textColor= [UIColorclearColor];//看不到輸入內(nèi)容
來(lái)讓用戶看不到文本框的輸入內(nèi)容以及光標(biāo)。
5.通過(guò)[_textFiledaddTarget:selfaction:@selector(textFiledEdingChanged)forControlEvents:UIControlEventEditingChanged];為文本框綁定事件，并通過(guò)以下方法來(lái)控制幾個(gè)黑點(diǎn)的顯示和隱藏，并且在輸入密碼長(zhǎng)度等于6的時(shí)候調(diào)用點(diǎn)擊確定按鈕事件對(duì)應(yīng)的方法：
-(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.最后再為L(zhǎng)MPopInputPasswordView添加動(dòng)畫彈出和動(dòng)畫消失的轉(zhuǎn)場(chǎng)動(dòng)畫：
#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.最后在點(diǎn)擊按鈕的時(shí)候調(diào)用委托方法，傳遞用戶輸入的密碼，然后彈窗消失：
-(void)buttonClickedAction:(UIButton*)sender
{
//傳值給委托對(duì)象
if([_delegaterespondsToSelector:@selector(buttonClickedAtIndex:withText:)]){
[_delegate buttonClickedAtIndex:sender.tag withText:_textFiled.text];
}
[selfdismiss];
}
最后附上demo地址：DemoInPutPasswordView 仿微信支付密碼輸入框
效果圖如下：
