iOS开发进阶 - 实现类似微信和支付宝的密码输入框(UIKeyInput协议)

原创 2016年06月02日 14:10:26

如果移动端访问不佳,请访问我的个人博客

目前在项目中需要实现发红包的功能,自己就写了一个密码输入框的控件,主要用到了UIKeyInput协议和CoreGraphics框架,效果类似微信支付,感觉还行就把我的思路和制作过程写下来给大家分享一下。(demo地址觉得有用的可以star一下)

wcl.gif

让你的自定义View具备输入的功能(UIKeyInput协议)

通过UIKeyInput协议可以为响应者提供简单的键盘输入的功能,让需要键盘的responder成为第一响应者就行了。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);
    }
}

以上就是实现的主要代码和分析,大家需要看demo可以点击超链接进去下载观看,谢谢大家的阅读~

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wang631106979/article/details/51566752

iOS简单的密码输入组件XLPasswordView,UI类似支付宝

0. Githud链接 - [https://github.com/Shannoon/XLPasswordView](https://github.com/Shannoon/XLPasswor...
  • qq_30513483
  • qq_30513483
  • 2016年07月12日 23:06
  • 1390

仿支付宝支付密码输入框

仿支付宝支付密码输入框前段时间看到小伙伴们在做一个密码输入框,刚好拿来复习下Quartz 2D,不废话,直接上图: 主要思路如下: - UITextField上面覆盖一个UIView - 设置U...
  • u010026245
  • u010026245
  • 2015年06月02日 20:20
  • 2126

仿微信/支付宝的密码输入框效果 android

在用到支付类app时,都有一个简密的输入框。。开始实现的时候思路有点问题,后来到github上搜了下,找到了一个开源的库看起来相当的牛逼,,来个地址先: https://github.com/Jun...
  • yaya_soft
  • yaya_soft
  • 2015年03月16日 16:25
  • 37233

iOS 密码输入框

简单实用的密码输入框https://github.com/CocoaMiAo/EMPasswordInputView.git
  • MiAo_EM
  • MiAo_EM
  • 2017年06月06日 10:24
  • 270

iOS 密码输入框(UITextField)

UITextField txtPassword = new UITextField (); txtPassword.Frame = new CGRect (0, 0, 100, 50); txtPas...
  • honeycandys
  • honeycandys
  • 2016年01月05日 15:09
  • 708

ios一个简单的自定义密码输入框,alert样式和sheet样式

ios一个简单的自定义密码输入框,有alert样式和sheet样式!首先我们来了解自定义密码输入框的原理。。。。。。...
  • sg_zxw
  • sg_zxw
  • 2016年12月16日 10:44
  • 1287

iOS-仿京东6位密码支付输入框

用于安全支付的密码支付输入框.
  • findhappy117
  • findhappy117
  • 2018年02月20日 12:06
  • 245

自己写的类似UITextView的类,实现UIKeyInput协议

这是别人的一个app作品,我仿着做的,之前对keyboard用的不多,一般都是UITextField用到的,从来没想过可以写个类似功能的 看到这个画面的时候,我在想这是有个隐藏的textField把...
  • lqzitongyezu
  • lqzitongyezu
  • 2015年07月17日 15:07
  • 553

UIKeyCommand自定义键盘

有时候给自己的程序添加一些自定义的快捷键也是有必要的,在需要添加快捷键的viewController里面添加 -(BOOL)canBecomeFirstResponder{     r...
  • huwenbo1hao
  • huwenbo1hao
  • 2015年04月14日 14:15
  • 1686

仿微信输入支付密码的弹窗

仿微信输入支付密码的弹窗微信输入支付密码的弹窗效果相信大家都见过吧,先描述下它的特点(这里先不做微信支付的时候选择支付方式这一块): 1.模态显示,背景灰色,点击背景弹窗消失。2.提供输入的密码框是看...
  • lqcjdx
  • lqcjdx
  • 2015年06月26日 15:10
  • 1901
收藏助手
不良信息举报
您举报文章:iOS开发进阶 - 实现类似微信和支付宝的密码输入框(UIKeyInput协议)
举报原因:
原因补充:

(最多只允许输入30个字)