【移動應(yīng)用開發(fā)技術(shù)】iOS開發(fā)類似支付寶密碼輸入框功能的示例分析

【移動應(yīng)用開發(fā)技術(shù)】iOS開發(fā)類似支付寶密碼輸入框功能的示例分析

這篇文章給大家分享的是有關(guān)iOS開發(fā)類似支付寶密碼輸入框功能的示例分析的內(nèi)容。在下覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過來看看吧。

這篇文章主要介紹了iOS實(shí)現(xiàn)類似微信和支付寶的密碼輸入框，通過UIKeyInput協(xié)議為響應(yīng)者提供簡單的鍵盤輸入的功，再通過CoreGraphics繪制出密碼輸入框，感興趣的小伙伴們可以參考一下目前在項(xiàng)目中需要實(shí)現(xiàn)發(fā)紅包的功能，自己就寫了一個(gè)密碼輸入框的控件，主要用到了UIKeyInput協(xié)議和CoreGraphics框架，效果類似微信支付，感覺還行就把我的思路和制作過程寫下來給大家分享一下。讓你的自定義View具備輸入的功能（UIKeyInput協(xié)議）通過UIKeyInput協(xié)議可以為響應(yīng)者提供簡單的鍵盤輸入的功能，讓需要鍵盤的responder成為第一響應(yīng)者就行了。UIKeyInput協(xié)議必須實(shí)現(xiàn)的有三個(gè)方法，分別是以下方法：#pragma

mark

-

UIKeyInput

/**

*

用于顯示的文本對象是否有任何文本

*/

-

(BOOL)hasText

{

return

self.textStore.length

>

0;

}

/**

*

插入文本

*/

-

(void)insertText:(NSString

*)text

{

if

(self.textStore.length

<

self.passWordNum)

{

//判斷是否是數(shù)字

NSCharacterSet

*cs

=

[[NSCharacterSet

characterSetWithCharactersInString:MONEYNUMBERS]

invertedSet];

NSString*filtered

=

[[text

componentsSeparatedByCharactersInSet:cs]

componentsJoinedByString:@""];

BOOL

basicTest

=

[text

isEqualToString:filtered];

if(basicTest)

{

if

([self.delegate

respondsToSelector:@selector(passWordDidChange:)])

{

[self.delegate

passWordDidChange:self];

}

if

(self.textStore.length

==

self.passWordNum)

{

if

([self.delegate

respondsToSelector:@selector(passWordCompleteInput:)])

{

[self.delegate

passWordCompleteInput:self];

}

}

[self.textStore

appendString:text];

[self

setNeedsDisplay];

}

}

}

/**

*

刪除文本

*/

-

(void)deleteBackward

{

if

(self.textStore.length

>

0)

{

[self.textStore

deleteCharactersInRange:NSMakeRange(self.textStore.length

-

1,

1)];

if

([self.delegate

respondsToSelector:@selector(passWordDidChange:)])

{

[self.delegate

passWordDidChange:self];

}

}

[self

setNeedsDisplay];

}

/**

*

是否能成為第一響應(yīng)者

*/

-

(BOOL)canBecomeFirstResponder

{

return

YES;

}

/**

*

點(diǎn)擊成為第一相應(yīng)者

*/

-

(void)touchesBegan:(NSSet<UITouch

*>

*)touches

withEvent:(UIEvent

*)event

{

if

(![self

isFirstResponder])

{

[self

becomeFirstResponder];

}

}通過CoreGraphics繪制出密碼輸入框?qū)崿F(xiàn)的思路是通過CoreGraphics框架繪制出密碼輸入框的外框和里面的小黑點(diǎn)，然后通過從鍵盤上獲取到的字符串判斷輸入的位數(shù)，具體實(shí)現(xiàn)如下：/**

*

設(shè)置正方形的邊長

*/

-

(void)setSquareWidth:(CGFloat)squareWidth

{

_squareWidth

=

squareWidth;

[self

setNeedsDisplay];

}

/**

*

設(shè)置鍵盤的類型

*/

-

(UIKeyboardType)keyboardType

{

return

UIKeyboardTypeNumberPad;

}

/**

*

設(shè)置密碼的位數(shù)

*/

-

(void)setPassWordNum:(NSUInteger)passWordNum

{

_passWordNum

=

passWordNum;

[self

setNeedsDisplay];

}

/**

*

繪制

*/

-

(void)drawRect:(CGRect)rect

{

CGFloat

height

=

rect.size.height;

CGFloat

width

=

rect.size.width;

CGFloat

x

=

(width

-

self.squareWidth*self.passWordNum)/2.0;

CGFloat

y

=

(height

-

self.squareWidth)/2.0;

CGContextRef

context

=

UIGraphicsGetCurrentContext();

//畫外框

CGContextAddRect(context,

CGRectMake(

x,

y,

self.squareWidth*self.passWordNum,

self.squareWidth));

CGContextSetLineWidth(context,

1);

CGContextSetStrokeColorWithColor(context,

self.rectColor.CGColor);

CGContextSetFillColorWithColor(context,

[UIColor

whiteColor].CGColor);

//畫豎條

for

(int

i

=

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);

//畫黑點(diǎn)

for

(int

i

=

1;

i

<=

self.textStore.length;

i++)

{

CGContextAddArc(context,

x+i*self.squareWidth

-

self.squareWidth/2.0,

y+self.squareWidth/2,

self.