iOS如何实现类似微信和支付宝的密码输入框

小编给大家分享一下iOS如何实现类似微信和支付宝的密码输入框，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

让你的自定义View具备输入的功能（UIKeyInput协议）

通过UIKeyInput协议可以为响应者提供简单的键盘输入的功能，让需要键盘的responder成为第一响应者就行了。UIKeyInput协议必须实现的有三个方法，分别是以下方法：

#pragmamark-UIKeyInput
/**
*用于显示的文本对象是否有任何文本
*/
-(BOOL)hasText{
returnself.textStore.length>0;
}

/**
*插入文本
*/
-(void)insertText:(NSString*)text{
if(self.textStore.length<self.passWordNum){
//判断是否是数字
NSCharacterSet*cs=[[NSCharacterSetcharacterSetWithCharactersInString:MONEYNUMBERS]invertedSet];
NSString*filtered=[[textcomponentsSeparatedByCharactersInSet:cs]componentsJoinedByString:@""];
BOOLbasicTest=[textisEqualToString:filtered];
if(basicTest){
if([self.delegaterespondsToSelector:@selector(passWordDidChange:)]){
[self.delegatepassWordDidChange:self];
}
if(self.textStore.length==self.passWordNum){
if([self.delegaterespondsToSelector:@selector(passWordCompleteInput:)]){
[self.delegatepassWordCompleteInput:self];
}
}
[self.textStoreappendString:text];
[selfsetNeedsDisplay];
}
}
}

/**
*删除文本
*/
-(void)deleteBackward{
if(self.textStore.length>0){
[self.textStoredeleteCharactersInRange:NSMakeRange(self.textStore.length-1,1)];
if([self.delegaterespondsToSelector:@selector(passWordDidChange:)]){
[self.delegatepassWordDidChange:self];
}
}
[selfsetNeedsDisplay];
}

/**
*是否能成为第一响应者
*/
-(BOOL)canBecomeFirstResponder{
returnYES;
}

/**
*点击成为第一相应者
*/
-(void)touchesBegan:(NSSet<UITouch*>*)toucheswithEvent:(UIEvent*)event{
if(![selfisFirstResponder]){
[selfbecomeFirstResponder];
}
}

通过CoreGraphics绘制出密码输入框

实现的思路是通过CoreGraphics框架绘制出密码输入框的外框和里面的小黑点，然后通过从键盘上获取到的字符串判断输入的位数，具体实现如下：

/**
*设置正方形的边长
*/
-(void)setSquareWidth:(CGFloat)squareWidth{
_squareWidth=squareWidth;
[selfsetNeedsDisplay];
}

/**
*设置键盘的类型
*/
-(UIKeyboardType)keyboardType{
returnUIKeyboardTypeNumberPad;
}

/**
*设置密码的位数
*/
-(void)setPassWordNum:(NSUInteger)passWordNum{
_passWordNum=passWordNum;
[selfsetNeedsDisplay];
}

/**
*绘制
*/
-(void)drawRect:(CGRect)rect{
CGFloatheight=rect.size.height;
CGFloatwidth=rect.size.width;
CGFloatx=(width-self.squareWidth*self.passWordNum)/2.0;
CGFloaty=(height-self.squareWidth)/2.0;
CGContextRefcontext=UIGraphicsGetCurrentContext();
//画外框
CGContextAddRect(context,CGRectMake(x,y,self.squareWidth*self.passWordNum,self.squareWidth));
CGContextSetLineWidth(context,1);
CGContextSetStrokeColorWithColor(context,self.rectColor.CGColor);
CGContextSetFillColorWithColor(context,[UIColorwhiteColor].CGColor);
//画竖条
for(inti=1;i<=self.passWordNum;i++){
CGContextMoveToPoint(context,x+i*self.squareWidth,y);
CGContextAddLineToPoint(context,x+i*self.squareWidth,y+self.squareWidth);
CGContextClosePath(context);
}
CGContextDrawPath(context,kCGPathFillStroke);
CGContextSetFillColorWithColor(context,self.pointColor.CGColor);
//画黑点
for(inti=1;i<=self.textStore.length;i++){
CGContextAddArc(context,x+i*self.squareWidth-self.squareWidth/2.0,y+self.squareWidth/2,self.pointRadius,0,M_PI*2,YES);
CGContextDrawPath(context,kCGPathFill);
}
}

看完了这篇文章，相信你对“iOS如何实现类似微信和支付宝的密码输入框”有了一定的了解，如果想了解更多相关知识，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！