自定义密码输入框和自定义键盘-非常简单适用

1.公司最近要做一款钱包支付类的APP,由于系统键盘和支付方式都是自家的,不能使用系统自定义的,因此对这两款功能进行了一下编写封装-密码输入框AND输入键盘;

2.说明:这不是一个DEMO,只是两个封装好的类,下载之后直接拉入工程中就可以使用;

3.功能说明:

3.1 IB_DESIGNABLE结合运行时设置动态属性

代码:IB_DESIGNABLE

@interface PAWFPayPassWordView : UIView

//密码位数

@property (nonatomic,assign)IBInspectable NSUInteger passWordNumber;

//密码框大小

@property (nonatomic,assign)IBInspectable CGFloat squareWidth;

//密码黑点的大小

@property (nonatomic,assign)IBInspectable CGFloat pointRadius;

//密码点的颜色

@property (nonatomic,strong)IBInspectable UIColor *pointColor;

//边框的颜色

@property (nonatomic,strong)IBInspectable UIColor *borderColor;

//中间分割线的颜色

@property (nonatomic,strong)IBInspectable UIColor *lineColor;

效果:

动态属性,直接调整

3.2 drawRect实现密码输入

代码实现:

- (void)drawRect:(CGRect)rect {

//计算整个会话区域

CGFloat height = rect.size.height;

CGFloat width = rect.size.width;

CGFloat widthV = width / self.passWordNumber;

CGFloat x = (width - widthV*self.passWordNumber)/2.0;

CGFloat y = (height - self.squareWidth)/2.0;

//开启图形上下文

CGContextRef context = UIGraphicsGetCurrentContext();

//画外框

CGFloat radius = 5;

// 移动到初始点

CGContextMoveToPoint(context, radius, 0);

// 绘制第1条线和第1个1/4圆弧，右上圆弧

CGContextAddLineToPoint(context, width - radius,0);

CGContextAddArc(context, width - radius, radius, radius, -0.5 *M_PI,0.0,0);

// 绘制第2条线和第2个1/4圆弧，右下圆弧

CGContextAddLineToPoint(context, width, height - radius);

CGContextAddArc(context, width - radius, height - radius, radius,0.0,0.5 *M_PI,0);

// 绘制第3条线和第3个1/4圆弧，左下圆弧

CGContextAddLineToPoint(context, radius, height);

CGContextAddArc(context, radius, height - radius, radius,0.5 *M_PI,M_PI,0);

// 绘制第4条线和第4个1/4圆弧，左上圆弧

CGContextAddLineToPoint(context, 0, radius);

CGContextAddArc(context, radius, radius, radius,M_PI,1.5 *M_PI,0);

// 闭合路径

CGContextClosePath(context);

// 填充半透明红色

CGContextSetLineWidth(context, 2.0);//线的宽度

CGContextSetStrokeColorWithColor(context, self.borderColor.CGColor);//线框颜色

CGContextDrawPath(context,kCGPathStroke);

//画竖条

for (int i = 1; i < self.passWordNumber; i++) {

CGContextMoveToPoint(context, x+i*widthV, 0);

CGContextAddLineToPoint(context, x+i*widthV, height);

CGContextSetLineWidth(context, 1);

CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);

CGContextDrawPath(context, kCGPathStroke); //根据坐标绘制路径

}

//画黑点

CGContextSetFillColorWithColor(context, self.pointColor.CGColor);

for (int i = 1; i <= self.passWordString.length; i++) {

CGContextAddArc(context,  x+i*widthV - widthV/2.0, y+self.squareWidth/2, self.pointRadius, 0, M_PI*2, YES);

CGContextDrawPath(context, kCGPathFill);

}

效果:

输入密码采用画点方式代替

4.遵守代理,在密码输入完成的代理方法中通过block那个密码字符串.....之后的操作就不再赘诉

下载地址: https://github.com/zhaozhenghua/PassWord