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

 更新时间:2016年08月05日 11:15:02   投稿:lijiao  
这篇文章主要介绍了iOS实现类似微信和支付宝的密码输入框,通过UIKeyInput协议为响应者提供简单的键盘输入的功,再通过CoreGraphics绘制出密码输入框,感兴趣的小伙伴们可以参考一下

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

让你的自定义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);
  }
}

源码下载:https://github.com/631106979/WCLPassWordView

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • iOS统计代码总行数的命令(便捷且简单)

    iOS统计代码总行数的命令(便捷且简单)

    在工作中有时候会需要统计我们工程的总代码行数,下面小编给大家分享一个超便捷超简单的方法,通过一行命令统计ios代码总行数,需要的朋友参考下吧
    2017-11-11
  • iOS 禁止按钮在一定时间内连续点击

    iOS 禁止按钮在一定时间内连续点击

    本文主要介绍了iOS中禁止按钮在一定时间内连续点击的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • iOS滑动全屏实现返回功能

    iOS滑动全屏实现返回功能

    这篇文章主要为大家详细介绍了iOS滑动全屏实现返回功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • iOS使用Target如何快速科学的区分开发环境详解

    iOS使用Target如何快速科学的区分开发环境详解

    这篇文章主要给大家介绍了关于iOS使用Target如何快速科学的区分开发环境的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • iOS 进度条、加载、安装动画的简单实现

    iOS 进度条、加载、安装动画的简单实现

    这篇文章主要介绍了iOS 进度条、加载、安装动画的简单实现,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • iOS在页面销毁时如何优雅的cancel网络请求详解

    iOS在页面销毁时如何优雅的cancel网络请求详解

    这篇文章主要给大家介绍了关于iOS在页面销毁时如何优雅的cancel网络请求的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-05-05
  • IOS安装包比Android容量大的原因

    IOS安装包比Android容量大的原因

    这篇文章主要介绍了为什么IOS安装包比Android容量大的原因,如果你是一个IOS或者安卓开发者,学习下相关知识吧。
    2018-02-02
  • iOS中图片的解压缩到渲染过程详解

    iOS中图片的解压缩到渲染过程详解

    这篇文章主要给大家介绍了关于iOS中图片的解压缩到渲染过程的相关资料,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • iOS粒子路径移动效果 iOS实现QQ拖动效果

    iOS粒子路径移动效果 iOS实现QQ拖动效果

    这篇文章主要为大家详细介绍了iOS粒子路径移动效果,iOS实现QQ拖动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • ios 11和iphone x的相关适配问题及解决方法

    ios 11和iphone x的相关适配问题及解决方法

    这篇文章主要介绍了ios 11和iphone x的相关适配,文中给大家提到了在ios 11中,tableView会莫名偏移问题的解决方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11

最新评论