iOS - 输入支付密码方格(封装)

Untitled.gif

前言:

需求如上,需要设计输入密码的方格类型,本人进行了简单的封装,可以设置方格的个数,方格边框的颜色,支持密码删除,下面给出分装的详细代码以及使用方法

思路:

自定义一个UIView然后在添加一个UITextField这样可以保证点击方格以外的部分可以键盘的编辑状态(要把这个UITextField隐藏才行),首先创建几个输入框,用个数组保存,然后把键盘输入的内容,通过遍历数组内的输入方格,将输入的内容按顺序赋值给这些方格

具体代码,在.h文件中利用block回调输入的密码

#import <UIKit/UIKit.h>
typedef void (^ReturnPasswordStringBlock)(NSString *password);
@interface PasswordView : UIView
@property (copy, nonatomic) ReturnPasswordStringBlock returnPasswordStringBlock;
@end

在.m文件中具体实现

• 可以在此文件中自定义密码的位数,方格边框的颜色,方格的尺寸

#import "PasswordView.h"
// 输入密码的位数
static const int boxCount = 6;
// 输入方格的边长
static const CGFloat boxWH = 40;
@interface PasswordView()
@property (strong, nonatomic) NSMutableArray *boxes;
// 占位编辑框(这样就点击密码格以外的部分,可以弹出键盘)
@property (weak, nonatomic) UITextField *contentTextField;

@end

@implementation PasswordView
- (instancetype)initWithFrame:(CGRect)frame{
    if (self == [super initWithFrame:frame]) {
        
        self.backgroundColor = [UIColor whiteColor];
        [self setUpContentView];
    }
    return self;
}

- (void)setUpContentView
{
    UITextField *contentField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    self.contentTextField = contentField;
    contentField.placeholder = @"请输入支付密码";
    contentField.hidden = YES;
    [contentField addTarget:self action:@selector(txchange:) forControlEvents:UIControlEventEditingChanged];
    [self addSubview:contentField];
    
    // 密码格之间的间隔
    CGFloat margin = 10;
    for (int i = 0; i < boxCount; i++)
    {
        CGFloat x = ([UIScreen mainScreen].bounds.size.width - boxCount * boxWH - (boxCount - 1)* margin) * 0.5 + (boxWH + margin) * i;
        UITextField *pwdLabel = [[UITextField alloc] initWithFrame:CGRectMake(x, (self.frame.size.height - boxWH) * 0.5, boxWH, boxWH)];
        pwdLabel.layer.borderColor = LineCommanColorA.CGColor;
        pwdLabel.enabled = NO;
        pwdLabel.textAlignment = NSTextAlignmentCenter;//居中
        pwdLabel.secureTextEntry = YES;//设置密码模式
        pwdLabel.layer.borderWidth = 1;
        [self addSubview:pwdLabel];
        
        [self.boxes addObject:pwdLabel];
    }
    //进入界面，contentTextField 成为第一响应
    [self.contentTextField becomeFirstResponder];
}
#pragma mark 文本框内容改变
- (void)txchange:(UITextField *)tx
{
    NSString *password = tx.text;

    for (int i = 0; i < self.boxes.count; i++)
    {
        UITextField *pwdtx = [self.boxes objectAtIndex:i];
        pwdtx.text = @"";
        if (i < password.length)
        {
            NSString *pwd = [password substringWithRange:NSMakeRange(i, 1)];
            pwdtx.text = pwd;
        }
        
    }
    // 输入密码完毕
    if (password.length == boxCount)
    {
         [tx resignFirstResponder];//隐藏键盘
        if (self.returnPasswordStringBlock != nil) {
            self.returnPasswordStringBlock(password);
        }

    }
}
#pragma mark --- 懒加载
- (NSMutableArray *)boxes{
    if (!_boxes) {
        _boxes = [NSMutableArray array];
    }
    return _boxes;
}
@end

分类的用法:

首先是导入头文件

 PasswordView *pdView = [[PasswordView alloc] initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, 60)];
    pdView.returnPasswordStringBlock = ^(NSString *password){
// 这里可以对输入的密码进行处理
        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"输入的密码是" message:password delegate:nil cancelButtonTitle:@"完成" otherButtonTitles:nil, nil];
        [alert show];

    };
    [self.view addSubview:pdView];