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

目前在项目中需要实现发红包的功能,自己就写了一个密码输入框的控件,主要用到了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

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

时间: 2016-08-02

IOS 仿支付宝支付屏幕亮度变化机制

1.首先,在需要实现的界面viewDidLoad中先保存亮度没有变化之前的亮度,因为这个界面消失之后还要变回原来的亮度,变化亮度也相当于用户的一种设置,所以也要保存一下这个状态,因为之后当APP在active和非active切换时候需要知道是否需要为用户做这个功能 // 保存原来的亮度 [[NSUserDefaults standardUserDefaults] setObject:@([UIScreen mainScreen].brightness) forKey:@"brightness&q

iOS支付宝使用方法详解

支付宝相关资源下载地址:支付宝开放平台 在移动支付功能处下载. 一.使用官方的Demo 需要配置基本信息: 打开"APViewController.m"文件,对以下三个参数进行编辑. 二.集成支付宝到自己的工程 1.启动Xcode,为了方便快速开发,将解压包里面的AlipaySDK.bundle和AlipaySDK.framework 和Demo里面的以下文件拷贝到自己的工程文件夹中去,并导入到项目工程中. 2.在Build Phases选项卡的Link Binary With Lib

支付宝支付开发IOS图文教程案例

前言:继上次<微信支付开发IOS图文教程案例>以来,一直没有太多时间,更新总结详细支付这样的长篇大论,很抱歉.今天,推出支付宝支付的详细流程. 1.开始下载和查看支付宝支付的Demo. 我们直接进入支付宝的支付平台参考来进行集成支付宝支付: https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.jIUkAQ&treeId=59&articleId=103675&docType=1 集成过程基本

iOS仿支付宝芝麻信用分数仪表盘动画效果

先看看效果图: 仪表盘动画效果.jpg 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字-->背景颜色变化 * */ #import <UIKit/UIKit.h> @interface ZLDashboardView : UIView @property (nonatomic, strong) UIImage *bgIm

iOS支付宝支付方法详解

支付宝SDK下载地址:https://doc.open.alipay.com/doc2/detail?treeId=54&articleId=103419&docType=1 支付宝集成 在支付宝集成的过程中,会遇到一些报错,下面就碰到的报错,和大家一起解决. 集成参考官方文档: 导入代码文档:https://doc.open.alipay.com/doc2/detail.htm?spm=0.0.0.0.RiFaVa&treeId=59&articleId=103676&a

iOS开发支付宝支付成功返回字符串的处理操作

{ memo=""; result="partner=\"311811\"&seller_id=\"nse@gmail.com\"&out_trade_no=\"S005372\"&subject=\"\U522b\U5885\U8ba2\U5355\"&body=\"\U5885\"&total_fee=\"0.1\"

iOS动画解析之支付宝支付打钩动画的实现方法

前言 我们平时在用支付宝付款时,会有一个支付中的动画和一个支付完成的动画.这篇博客主要分析一下这种动画效果,效果如下: 支付宝支付动画 一.动画解析 为了方便观察,放慢了动画的速度并添加辅助线: 放慢后的动画 从图中可以看出:加载圆弧运动轨迹可分为前半段和后半段:并且圆弧的起始角度(StartAngle)和结束角度(EndAngle)在做有规律的变化: 前半段: 从-0.5π到π,这一段运动中速度较快:StartAngle不变,始终未-0.5π:EndAngle在匀速上升,一直到π:前半段中圆弧

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

本文手把手教你图片->SVG->Path的姿势.. 从此酷炫Path动画,如此简单. 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便搜了一个铅笔画的图,丢进去 随手复制的二维码icon 来自大佬wing的铁塔 前文回顾 这里简单回顾一下前文,GIF如下图: PathAnimView接受的唯一数据源是Path(给我一个Path,还你一个动画View) 所以内置了几种将别的资源->Path的方法: 直接传string.(A-Z,0-9 "." &qu

Android中PathMeasure仿支付宝支付动画

前言 在 Android 自定义 View 中,Path 可能用的比较多,PathMeasure 可能用的比较少,就我而言,以前也没有使用过 PathMeasure 这个 api,看到别人用 PathMeasure 和 ValueAnimator 结合在一起完成了很好的动画效果,于是我也学习下 PathMeasure ,此处记录下. PathMeasure 构造器: forceClosed 含义: // 创建一个 Path 对象 path = new Path(); path.moveTo(20

iOS动画解析之圆球加载动画XLBallLoading的实现

前言 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loading动画,提示于用户页面在加载中,本文将详细给大家介绍关于iOS圆球加载动画XLBallLoading实现的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.显示效果 二.原理分析 1.拆解动画 从效果图来看,动画可拆解成两部分:放大动画.位移动画 放大动画 比较简单,这里主要来分析一下位移动画 (1).先去掉缩放效果: 屏蔽放大效果 (2).去掉其中的一个圆球 现

iOS的CoreAnimation开发框架中的Layer层动画制作解析

CAAnimation动画体系的介绍 CAAnimation是CoreAnimation框架中执行动画对象的基类,下面有一张图,是我手画的,不太美观,但是可以将与CAAnimation相关的几个动画类的关系表达清楚: 从上图中可以看到,从CAAnimation中继承出三个子类,分别是用于创建属性动画的CAPropertyAnimation,创建转场动画的CATransition和创建组合动画的CAAnimationGroup. 我们就先从根类开始探讨. 1.CAAnimation属性和方法 CA

iOS开发傻瓜式微信支付的方法教程

前言 本文主要给大家介绍了关于iOS开发傻瓜式微信支付的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. 方法步骤如下: 先下载微信SDK,如果集成了友盟分享里的微信,那就不用下载,也不用配置环境,因为配置友盟分享的时候已经把微信支付的环境都配置好了(包括框架,schema跳转,白名单)如果没有集成过友盟分享那么请到微信开放平台下载SDK 如果公司没有给微信平台的appkey则需要自己帮公司去微信平台申请 工程的bundle id 也要和在微信平台注册的bundle id一样 链接