iOS實(shí)現(xiàn)類似微信和支付寶的密碼輸入框(UIKeyInput協(xié)議)
目前在項(xiàng)目中需要實(shí)現(xiàn)發(fā)紅包的功能,自己就寫了一個(gè)密碼輸入框的控件,主要用到了UIKeyInput協(xié)議和CoreGraphics框架,效果類似微信支付,感覺還行就把我的思路和制作過(guò)程寫下來(lái)給大家分享一下。
讓你的自定義View具備輸入的功能(UIKeyInput協(xié)議)
通過(guò)UIKeyInput協(xié)議可以為響應(yīng)者提供簡(jiǎn)單的鍵盤輸入的功能,讓需要鍵盤的responder成為第一響應(yīng)者就行了。UIKeyInput協(xié)議必須實(shí)現(xiàn)的有三個(gè)方法,分別是以下方法:
#pragma mark - UIKeyInput /** * 用于顯示的文本對(duì)象是否有任何文本 */ - (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]; } }
通過(guò)CoreGraphics繪制出密碼輸入框
實(shí)現(xiàn)的思路是通過(guò)CoreGraphics框架繪制出密碼輸入框的外框和里面的小黑點(diǎn),然后通過(guò)從鍵盤上獲取到的字符串判斷輸入的位數(shù),具體實(shí)現(xiàn)如下:
/** * 設(shè)置正方形的邊長(zhǎng) */ - (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.pointRadius, 0, M_PI*2, YES); CGContextDrawPath(context, kCGPathFill); } }
源碼下載:https://github.com/631106979/WCLPassWordView
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS 下拉刷新動(dòng)畫的實(shí)現(xiàn)實(shí)例
這篇文章主要介紹了iOS 下拉刷新動(dòng)畫的實(shí)現(xiàn)實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05iOS開發(fā)中UIDatePicker控件的使用方法簡(jiǎn)介
這篇文章主要介紹了iOS開發(fā)中UIDatePicker控件的使用方法簡(jiǎn)介,用來(lái)處理各種時(shí)間日期的選擇,需要的朋友可以參考下2015-11-11ios App加載本地HTML網(wǎng)頁(yè),點(diǎn)擊網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到app頁(yè)面的方法
下面小編就為大家分享一篇ios App加載本地HTML網(wǎng)頁(yè),點(diǎn)擊網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到app頁(yè)面的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01詳解IOS串行隊(duì)列與并行隊(duì)列進(jìn)行同步或者異步的實(shí)例
這篇文章主要介紹了詳解IOS串行隊(duì)列與并行隊(duì)列進(jìn)行同步或者異步的實(shí)例的相關(guān)資料,IOS中GCD的隊(duì)列分為串行隊(duì)列和并行隊(duì)列,任務(wù)分為同步任務(wù)和異步任務(wù),他們的排列組合有四種情況這里就一一分析下,需要的朋友可以參考下2017-07-07iOS - UIButton(UIEdgeInsets)/設(shè)置button上的文字和圖片上下垂直居中對(duì)齊
這篇文章主要介紹了iOS - UIButton(UIEdgeInsets)/設(shè)置button上的文字和圖片上下垂直居中對(duì)齊的相關(guān)資料,需要的朋友可以參考下2015-09-09OC runtime學(xué)習(xí)筆記之關(guān)聯(lián)對(duì)象
這篇文章主要介紹了OC runtime學(xué)習(xí)筆記之關(guān)聯(lián)對(duì)象的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09