Maison > Applet WeChat > Développement WeChat > iOS implémente une zone de saisie de mot de passe similaire à WeChat et Alipay (protocole UIKeyInput)

iOS implémente une zone de saisie de mot de passe similaire à WeChat et Alipay (protocole UIKeyInput)

高洛峰
Libérer: 2017-01-10 09:37:20
original
2433 Les gens l'ont consulté

Actuellement, je dois implémenter la fonction d'envoi d'enveloppes rouges dans le projet, j'ai donc écrit un contrôle pour la zone de saisie du mot de passe, en utilisant principalement le protocole UIKeyInput et le framework CoreGraphics. L'effet est similaire au paiement WeChat. ça fait du bien, je partagerai mes idées et mon processus de production. L'écrire et le partager avec tout le monde.

iOS implémente une zone de saisie de mot de passe similaire à WeChat et Alipay (protocole UIKeyInput)

Laissez votre vue personnalisée avoir la fonction de saisie (protocole UIKeyInput)

Le protocole UIKeyInput peut fournir au répondeur une simple fonction de saisie au clavier. répondeur qui nécessite un clavier le premier répondeur. Il existe trois méthodes qui doivent être implémentées dans le protocole UIKeyInput, qui sont les méthodes suivantes :

#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];
  }
}
Copier après la connexion

Dessinez la zone de saisie du mot de passe via CoreGraphics

L'idée de mise en œuvre est de dessiner l'extérieur de la zone de saisie du mot de passe via la zone du framework CoreGraphics et le petit point noir à l'intérieur, puis jugez le nombre de chiffres saisis en utilisant la chaîne obtenue à partir du clavier. L'implémentation spécifique est la suivante :

/**
 * 设置正方形的边长
 */
- (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);
  }
}
Copier après la connexion
<.>Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tous. Merci pour votre aide et j'espère que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'implémentation iOS de zones de saisie de mot de passe (protocole UIKeyInput) similaires à WeChat et Alipay, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal