Alipay 비밀번호 입력창 기능과 유사한 iOS 개발

이 기사에서는 주로 UIKeyInput 프로토콜을 통해 응답자에게 간단한 키보드 입력 기능을 제공하는 WeChat 및 Alipay와 유사한 비밀번호 입력 상자의 iOS 구현을 소개하고, 관심 있는 친구는 CoreGraphics를 통해 비밀번호 입력 상자를 그릴 수 있습니다.

은 현재 프로젝트에서 빨간 봉투를 보내는 기능을 구현해야 하므로 주로 UIKeyInput 프로토콜과 CoreGraphics프레임워크컨트롤을 작성했습니다. > 효과는 위챗 결제와 비슷합니다. 기분이 좋으면 제 아이디어와 제작 과정을 적어서 공유하겠습니다.

사용자 정의 보기에 입력 기능을 부여하세요. (UIKeyInput 프로토콜)

UIKeyInput 프로토콜은 간단한 키보드 입력 기능을 제공할 수 있습니다. 최초 대응자가 되기 위해 키보드가 필요한 대응자. UIKeyInput 프로토콜에서 구현해야 하는 세 가지 메소드는 다음과 같습니다:

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

/**
 * 插入文本
 */
- (void)insertText:(NSString *)text {
  if (self.textStore.length < self.passWordNum) {
    //判断是否是数字
    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];
}

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

/**
 * 点击成为第一相应者
 */
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
  if (![self isFirstResponder]) {
    [self becomeFirstResponder];
  }
}

CoreGraphics를 통해 비밀번호 입력 상자 그리기

의 아이디어 구현은 CoreGraphics 프레임워크를 통해 비밀번호를 그리는 것입니다. 입력 상자의 외부 프레임과 내부의 작은 검은 점, 입력 자릿수는 키보드에서 얻은

문자열에 따라 결정됩니다.

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

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

/**
 * 设置密码的位数
 */
- (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);
  //画黑点
  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);
  }
}

[관련 추천]

1.

특별 추천: "php Programmer Toolbox" V0 .1 버전 다운로드

2 .

WeChat Mini 프로그램 전체 소스 코드 다운로드

WeChat Mini 프로그램 데모: Guoku 업데이트 버전

위 내용은 Alipay 비밀번호 입력창 기능과 유사한 iOS 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!