iOS 仿支付宝/微信数字支付键盘

Simulator Screen Shot 2016年10月28日 17.46.54.png

写在前面

由于今天好累,晚些时候回去再将文章好好修改下;

需求

前段时间,我们公司 app要做一个纯数字的输入框.输入框要求是:当你点击它的时候,可以弹出键盘,可以支持 IQKey Board 输入框往上推;

方案

1. 使用一个 UIKeyInput协议和CoreGraphics框架;监听文本输入,文本改变就重新绘图

2.使用一个 UITextField,再在上面画框和原点;监听文本输入,控制黑点的显示和隐藏

分析

第一种没有不能使用IQKeyBoard ;所以我们使用了第二种

遇到的坑

使用xib创建时候,使用懒加载,会出现尺寸不是我们设置的尺寸;

原因

• layoutSubView 会调用几次
• 第一次setframe是默认 xib 的尺寸;往后才会设置真实屏幕的值;
• 如果使用懒加载; frame 只会设置一次,所以尺寸是 xib的尺寸;不是我们设置的尺寸

源码

//
//  CBWPassWordView.h
//  DigitalPwdDemo
//
//  Created by 陈博文 on 16/10/25.
//  Copyright © 2016年 陈博文. All rights reserved.
//

#import 

@class CBWPassWordView;

@protocol  CBWPassWordViewDelegate

@optional
/**
 *  监听输入的改变
 */
- (void)passWordDidChange:(CBWPassWordView *)passWord;

/**
 *  监听输入的完成时
 */
- (void)passWordCompleteInput:(CBWPassWordView *)passWord;

/**
 *  监听开始输入
 */
- (void)passWordBeginInput:(CBWPassWordView *)passWord;

@end

@interface CBWPassWordView : UIView

@property (weak, nonatomic) IBOutlet id delegate;
@property (strong, nonatomic, readonly) NSMutableString *textStore;//保存密码的字符串

@end

//
//  CBWPassWordView.m
//  DigitalPwdDemo
//
//  Created by 陈博文 on 16/10/25.
//  Copyright © 2016年 陈博文. All rights reserved.
//

#import "CBWPassWordView.h"

#define kDotSize CGSizeMake (10, 10) //密码点的大小
#define kDotCount 6  //密码个数
#define K_Field_Height 45  //每一个输入框的高度
#define Screen_Width [UIScreen mainScreen].bounds.size.width
#define lineColor [UIColor grayColor]
#define dotColor [UIColor blackColor]
#define textFieldBorderColor [UIColor blackColor]

@interface CBWPassWordView ()

@property (nonatomic, strong) UITextField *textField;
@property (nonatomic, strong) NSMutableArray *dotArray; //用于存放黑色的点点
@end

@implementation CBWPassWordView

-(void)awakeFromNib{
    
    [super awakeFromNib];
    
//    self.backgroundColor = [UIColor greenColor];
}

-(void)layoutSubviews{
    
    [super layoutSubviews];
    
    [self addSubview:self.textField];
    //页面出现时让键盘弹出
    [self.textField becomeFirstResponder];
    
    [self initPwdTextField];
    
    self.textField.frame = self.bounds;
}

- (void)initPwdTextField
{
    //每个密码输入框的宽度
    CGFloat w = self.frame.size.width / kDotCount;
    CGFloat h = self.frame.size.height;
    
    //生成分割线
    for (int i = 0; i < kDotCount - 1; i++) {
        UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake((i + 1) * w, 0, 1, h)];
        lineView.backgroundColor = lineColor;
        [self addSubview:lineView];
    }
    
    self.dotArray = [[NSMutableArray alloc] init];
    //生成中间的点
    for (int i = 0; i < kDotCount; i++) {
        UIView *dotView = [[UIView alloc] initWithFrame:CGRectMake(0 + (w - kDotCount) / 2 + i * w, 0 + (h - kDotSize.height) / 2, kDotSize.width, kDotSize.height)];
        dotView.backgroundColor = dotColor;
        dotView.layer.cornerRadius = kDotSize.width / 2.0f;
        dotView.clipsToBounds = YES;
        dotView.hidden = YES; //先隐藏
        [self addSubview:dotView];
        //把创建的黑色点加入到数组中
        [self.dotArray addObject:dotView];
    }
}

- (UIKeyboardType)keyboardType {
    return UIKeyboardTypeNumberPad;
}

#pragma mark - delegate

- (void)textFieldDidBeginEditing:(UITextField *)textField{
    
    if ([self.delegate respondsToSelector:@selector(passWordBeginInput:)]) {
        
        [self.delegate passWordBeginInput:self];
    }
    
}

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
    NSLog(@"变化%@", string);
    if([string isEqualToString:@"\n"]) {
        //按回车关闭键盘
        [textField resignFirstResponder];
        return NO;
    } else if(string.length == 0) {
        //判断是不是删除键
        return YES;
    }
    else if(textField.text.length >= kDotCount) {
        //输入的字符个数大于6，则无法继续输入，返回NO表示禁止输入
        NSLog(@"输入的字符个数大于6，忽略输入");
        return NO;
    } else {
        return YES;
    }
}

/**
 *  重置显示的点
 */
- (void)textFieldDidChange:(UITextField *)textField
{
    
    _textStore = textField.text.mutableCopy;
    
    
    if ([self.delegate respondsToSelector:@selector(passWordDidChange:)]) {
        
        [self.delegate passWordDidChange:self];
    }
    
    NSLog(@"%@", textField.text);
    for (UIView *dotView in self.dotArray) {
        dotView.hidden = YES;
    }
    for (int i = 0; i < textField.text.length; i++) {
        ((UIView *)[self.dotArray objectAtIndex:i]).hidden = NO;
    }
    if (textField.text.length == kDotCount) {
        NSLog(@"输入完毕");
        
        if ([self.delegate respondsToSelector:@selector(passWordCompleteInput:)]) {
            [self.delegate passWordCompleteInput:self];
        }
    }
}

#pragma mark - init

- (UITextField *)textField
{
    if (!_textField) {
        
        _textField = [[UITextField alloc] init];
        _textField.backgroundColor = [UIColor whiteColor];
        //输入的文字颜色为白色
        _textField.textColor = [UIColor clearColor];
        //输入框光标的颜色为白色
        _textField.tintColor = [UIColor whiteColor];
        _textField.delegate = self;
        _textField.autocapitalizationType = UITextAutocapitalizationTypeNone;
        _textField.keyboardType = UIKeyboardTypeNumberPad;
        _textField.layer.borderColor = lineColor.CGColor;
        _textField.layer.borderWidth = 1;
        _textField.layer.masksToBounds = YES;
        
        [_textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
    }
    return _textField;
}

@end

demo

demo下载