iOS開(kāi)發(fā)類似支付寶密碼輸入框功能的示例分析

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

這篇文章主要介紹了iOS實(shí)現(xiàn)類似微信和支付寶的密碼輸入框，通過(guò)UIKeyInput協(xié)議為響應(yīng)者提供簡(jiǎn)單的鍵盤輸入的功，再通過(guò)CoreGraphics繪制出密碼輸入框，感興趣的小伙伴們可以參考一下

目前在項(xiàng)目中需要實(shí)現(xiàn)發(fā)紅包的功能，自己就寫了一個(gè)密碼輸入框的控件，主要用到了UIKeyInput協(xié)議和CoreGraphics框架，效果類似微信支付，感覺(jué)還行就把我的思路和制作過(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();
  //畫(huà)外框
  CGContextAddRect(context, CGRectMake( x, y, self.squareWidth*self.passWordNum, self.squareWidth));
  CGContextSetLineWidth(context, 1);
  CGContextSetStrokeColorWithColor(context, self.rectColor.CGColor);
  CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
  //畫(huà)豎條
  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);
  //畫(huà)黑點(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);
  }
}

感謝各位的閱讀！關(guān)于“iOS開(kāi)發(fā)類似支付寶密碼輸入框功能的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！