自定义密码输入框

基本样式
1.实现方式是底层为一个UIView,然后添加一个与view相同大小的UITextField,将UITextField的hidden设置为YES
2.根据需要添加添加分割线的个数(密码如果是六位的就需要添加五个分隔线),分割线使用CALayer绘制,使用其frame属性设置其大小与X,Y.
3.添加密码输入之后显示的黑色圆点,也是使用CALayer来绘制,圆点是一张图片(我使用的是一张黑色圆点图片,如有其它需求可让美工做一张其它样式的),一次性创建6个(与所需要输入的密码长度相同),将其hidden设置为YES。
4,在layoutSubviews方法中设置UITextField和分隔线和黑色圆点的frame(推荐子控件的布局在layoutSubviews中设置)
5,监听UITextField的的输入,UITextField没有提供代理方法来监听他的点击,需要注册通知来监听UITextFieldTextDidChangeNotification这个通知.
6.在监听点击的方法中判断UITextField中text的长度,根据text的长度来控制黑色圆点的hidden的YES or NO;
7,以下为实际代码,如有不足,谢请指出。

//这个值是最大输入数
#define maxInputCount 10

#define DXTextFieldWSize  self.frame.size

@interface DXInputPasswordView ()<UITextFieldDelegate>
//黑色圆点数组,布局时和控制hidden时使用
@property (nonatomic, strong) NSMutableArray *dotInputArray;
//分隔线数组,布局时使用
@property (nonatomic, strong) NSMutableArray *lineArray;
//底部的UITextField
@property (nonatomic, strong) UITextField *textField;
@end

@implementation DXInputPasswordView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        [self setupSubviews];

    }
    return self;
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        [self setupSubviews];
    }
    return self;
}
//使用懒加载来创建数组
-(NSMutableArray *)pointInputArray
{
    if (!_dotInputArray) {

        _dotInputArray = [NSMutableArray array];
    }

    return _dotInputArray;
}

-(NSMutableArray *)lineArray
{
    if (!_lineArray) {

        _lineArray = [NSMutableArray array];
    }

    return _lineArray;
}

//添加子控件的方法
-(void)setupSubviews
{
    self.layer.borderWidth = 1;
    self.layer.borderColor = [UIColor lightGrayColor].CGColor;

    UITextField *textField = [[UITextField alloc]init];
    [textField becomeFirstResponder];
    //边框的样式
    textField.borderStyle  = UITextBorderStyleNone;
    textField.backgroundColor = [UIColor redColor];
    textField.hidden = YES;
    //键盘的样式
    textField.keyboardType = UIKeyboardTypeNumberPad;
    textField.delegate     = self;
    [self addSubview:textField];
    _textField = textField;

    //添加监听UITextField的输入
    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(textFieldTextDidChange) name:UITextFieldTextDidChangeNotification object:_textField];

        //圆点的默认大小
        self.dotSize = 10.0;

    //添加分隔线
    for (int i = 0; i < maxInputCount - 1; i++) {
        CALayer *lineLayer = [[CALayer alloc]init];
        lineLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
        [self.layer addSublayer:lineLayer];
        [self.lineArray addObject:lineLayer];

    }
    //添加黑色圆点图片
    for (int i = 0; i < maxInputCount; i++) {
        CALayer *dotLayer = [[CALayer alloc]init];
        [dotLayer setNeedsDisplay];
        UIImage *backgroundImage = [UIImage imageNamed:@"1"];
        dotLayer.contents = (__bridge id _Nullable)(backgroundImage.CGImage);
        dotLayer.hidden = YES;
        [self.layer addSublayer:dotLayer];
        [self.pointInputArray addObject:dotLayer];

    }
}
//监听其点击的方法
-(void)textFieldTextDidChange
{
    //显示圆点数
    [self setDotWithCount:_textField.text.length];

    //判断输入的值是否大于输入长度,如果大于退出键盘
    if(_textField.text.length >= maxInputCount) {

        [_textField resignFirstResponder];

        if ([self.delegate respondsToSelector:@selector(inputPasswordView:completeInput:)]) {

            [self.delegate inputPasswordView:self completeInput:_textField.text];
        }
    }

}
//控制圆点的显示与隐藏
-(void)setDotWithCount:(NSInteger)count
{

    for (int i = 0; i < maxInputCount; i++) {

        CALayer *pointLayer = _dotInputArray[i];
        if (i < count) {

            pointLayer.hidden = NO;
        } else {

            pointLayer.hidden = YES;

        }

    }

}
//清空输入
-(void)clearUpPassword
{
    _textField.text = nil;
    [self setDotWithCount:0];
    [_textField becomeFirstResponder];

}

-(void)layoutSubviews
{
    [super layoutSubviews];

    _textField.frame = CGRectMake(0, 0,DXTextFieldWSize.width,DXTextFieldWSize.height);

    CGFloat lineInterval = DXTextFieldWSize.width / maxInputCount;
    for (int i = 0; i < maxInputCount - 1; i++) {
        CALayer *lineLayer = self.lineArray[i];
        lineLayer.frame    = CGRectMake((i + 1) *lineInterval, 0, 1, DXTextFieldWSize.height);
    }

    for (int i = 0; i < maxInputCount; i++) {
        CALayer *dotLayer = self.dotInputArray[i];
        dotLayer.frame    = CGRectMake(i *lineInterval+ (lineInterval - self.dotSize) /2 , (self.frame.size.height - self.dotSize)/2, self.dotSize, self.dotSize);
    }

}

//设置边框的颜色

-(void)setBoardColor:(UIColor *)boardColor
{
    _boardColor = boardColor;

    self.layer.borderColor = boardColor.CGColor;

}

//设置分隔线的颜色

-(void)setIntervalLineColor:(UIColor *)intervalLineColor
{
    _intervalLineColor = intervalLineColor;

    for (int i = 0; i < maxInputCount - 1; i++) {
        CALayer *lineLayer = self.lineArray[i];
        lineLayer.backgroundColor =  intervalLineColor.CGColor;
    }

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值