1.公司最近要做一款錢包支付類的APP,由于系統(tǒng)鍵盤和支付方式都是自家的,不能使用系統(tǒng)自定義的,因此對這兩款功能進行了一下編寫封裝-密碼輸入框AND輸入鍵盤;
2.說明:這不是一個DEMO,只是兩個封裝好的類,下載之后直接拉入工程中就可以使用;
3.功能說明:
3.1 IB_DESIGNABLE結合運行時設置動態(tài)屬性
代碼:IB_DESIGNABLE
@interface PAWFPayPassWordView : UIView
//密碼位數(shù)
@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;
效果:
動態(tài)屬性,直接調(diào)整
3.2 drawRect實現(xiàn)密碼輸入
代碼實現(xiàn):
- (void)drawRect:(CGRect)rect {
//計算整個會話區(qū)域
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); //根據(jù)坐標繪制路徑
}
//畫黑點
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
