简单实现支付密码输入框 By HL
阅读原文时间:2023年07月11日阅读:3

密码输入框在微信,支付宝中比较常见

主要功能点

1.6位(或者N位)密码输入框封装

//  SBTextFieldAlert.h
/**
* 密码输入框封装
*/

#import

@interface SBPwdTextField : UIView

@property(nonatomic,strong) UITextField *passwordTextField;

  • (void)clearUpPassword;

@end

//
// SBTextFieldAlert.m
// SafeInpuTextFiled
#define kDotSize CGSizeMake (10.0f,10.0f) //密码点的大小
#define kDotCount 6 //密码点数

#import "SBPwdTextField.h"

@implementation SBPwdTextField
{
NSMutableArray *passwordIndicatorArrary;
}

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

    self.layer.borderWidth=1;  
    self.layer.borderColor=\[UIColor lightGrayColor\].CGColor;

    \[self addSubview:self.passwordTextField\];  
    \[self initPwdTextField\];  
}  
return self;  

}

-(UITextField *)passwordTextField
{
if (!_passwordTextField) {
_passwordTextField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0,50, 30)];
_passwordTextField.hidden = YES;
_passwordTextField.delegate = self;
_passwordTextField.autocapitalizationType = UITextAutocapitalizationTypeNone;
_passwordTextField.keyboardType = UIKeyboardTypeNumberPad;
[_passwordTextField addTarget:self action:@selector(PwdTextFieldDidChange:) forControlEvents:UIControlEventEditingChanged];
[self addSubview:_passwordTextField];
}
return _passwordTextField;
}

-(void)PwdTextFieldDidChange:(UITextField *)tf
{
NSLog(@"%@",tf.text);
[self setDotWithCount:tf.text.length];
}

-(void)initPwdTextField
{
//每个密码输入框的宽度
CGFloat width = self.bounds.size.width/kDotCount;

//生成分割线  
for (int i = 0; i < kDotCount-1; i++)  
{  
    UIImageView \*lineImageView = \[\[UIImageView alloc\] initWithFrame:CGRectMake((i + 1) \* width, 0, 0.5f, self.bounds.size.height)\];  
    lineImageView.backgroundColor = \[UIColor grayColor\];  
    \[self addSubview:lineImageView\];  
}

passwordIndicatorArrary=\[\[NSMutableArray alloc\]init\];  
//生成中间的点  
for (int i = 0; i < kDotCount; i++)  
{  
    UIImageView \*dotImageView = \[\[UIImageView alloc\] initWithFrame:CGRectMake((width - kDotSize.width) / 2.0f + i \* width, (self.bounds.size.height - kDotSize.height) / 2.0f, kDotSize.width, kDotSize.height)\];  
    dotImageView.backgroundColor = \[UIColor blackColor\];  
    dotImageView.layer.cornerRadius = kDotSize.width / 2.0f;  
    dotImageView.clipsToBounds = YES;  
    dotImageView.hidden = YES; //先隐藏  
    \[self addSubview:dotImageView\];

    \[passwordIndicatorArrary addObject:dotImageView\];  
}

}

  • (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)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)setDotWithCount:(NSInteger)count
    {
    for (UIImageView *dotImageView in passwordIndicatorArrary)
    {
    dotImageView.hidden = YES;
    }

    for (int i = 0; i< count; i++)
    {
    ((UIImageView*)[passwordIndicatorArrary objectAtIndex:i]).hidden = NO;
    }
    if (count== kDotCount) {
    NSLog(@"输入完毕");
    [[NSNotificationCenter defaultCenter] postNotificationName:@"uuuu" object:self.passwordTextField.text];
    }
    }

/**
* 清除密码
*/

  • (void)clearUpPassword
    {
    _passwordTextField.text = @"";
    [self setDotWithCount:_passwordTextField.text.length];
    }

/**
* 点击self 弹出键盘
*/
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[_passwordTextField becomeFirstResponder];
}

  • (void)dealloc
    {
    [_passwordTextField removeFromSuperview];
    _passwordTextField=nil;
    }

2.显示提示框封装

// SBInputTextAlert.h
// SafeInpuTextFiled

#import
#import "SBPwdTextField.h"

@interface SBInputTextAlert : UIView

@property(nonatomic,strong) UILabel *titleLabel;

/**
* 密码输入框
*/
@property(nonatomic,strong) SBPwdTextField *TextFieldAlert;

-(void)show;
-(void)dismiss;

@end

@interface SBCoverMask : UIView
+(void)maskViewShow;
+(void)maskViewDismiss;
@end

// SBInputTextAlert.m
// SafeInpuTextFiled
#import "SBInputTextAlert.h"
#define SBKeyWindow [UIApplication sharedApplication].keyWindow

@interface SBInputTextAlert ()

@property(nonatomic,strong) UIView *linView;

@end

@implementation SBInputTextAlert

-(instancetype)initWithFrame:(CGRect)frame
{
self=[super initWithFrame:frame];
if (self) {
self.layer.cornerRadius=8;
self.layer.masksToBounds=YES;

    \[self initSubViews\];  
    \[self addSubview:self.titleLabel\];  
    \[self addSubview:self.linView\];

    \[self  addSubview:self.TextFieldAlert\];  
}  
return self;  

}

-(UIView *)linView
{
if (!_linView) {
_linView=[[UIView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.titleLabel.frame)+10, self.bounds.size.width,0.5)];
_linView.backgroundColor=[UIColor greenColor];
}
return _linView;
}

-(void)initSubViews
{
UIButton *closeButton=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, 50, 30)];
[closeButton setTitle:@"关闭" forState:UIControlStateNormal];
closeButton.backgroundColor=[UIColor greenColor];
[closeButton addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:closeButton];
}

-(UILabel *)titleLabel
{
if (!_titleLabel) {
_titleLabel=[[UILabel alloc]init];
_titleLabel.textAlignment=NSTextAlignmentCenter;
_titleLabel.font=[UIFont boldSystemFontOfSize:18];
_titleLabel.frame=CGRectMake(0,5, self.bounds.size.width,25);
}
return _titleLabel;
}

-(SBPwdTextField *)TextFieldAlert
{
if (!_TextFieldAlert) {
CGFloat textFieldwidth=(self.bounds.size.width-40);
_TextFieldAlert=[[SBPwdTextField alloc]initWithFrame:CGRectMake(20, 50 ,textFieldwidth,textFieldwidth/6)];
}
return _TextFieldAlert;
}

/**
* 显示这儿view
*/
-(void)show{
[SBCoverMask maskViewShow];
self.frame=CGRectMake(0,-100, self.bounds.size.width, self.bounds.size.height);
[UIView animateWithDuration:0.3 animations:^{
self.hidden = NO;
self.frame=CGRectMake(SBKeyWindow.frame.size.width/2-self.bounds.size.width/2,100, self.bounds.size.width, self.bounds.size.height);
[self.TextFieldAlert becomeFirstResponder];
[SBKeyWindow addSubview:self];
}];
}
/**
* 隐藏这个view
*/
-(void)dismiss{
[SBCoverMask maskViewDismiss];
[UIView animateWithDuration:0.5 animations:^{
self.hidden = YES;
[self.TextFieldAlert resignFirstResponder];
[self removeFromSuperview];
}];

//清空密码  
\[self.TextFieldAlert clearUpPassword\];  

}

@end

/**
* 蒙版MaskView
*/
@implementation SBCoverMask
+(void)maskViewShow{
SBCoverMask *view = [[SBCoverMask alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
view.backgroundColor = [UIColor blackColor];
view.alpha = 0.3;

\[\[UIApplication sharedApplication\].keyWindow addSubview:view\];  

}
+(void)maskViewDismiss{
UIWindow *keyWidow=[UIApplication sharedApplication].keyWindow;
for (UIView *view in keyWidow.subviews) {
if ([view isKindOfClass:[SBCoverMask class]]) {
[view removeFromSuperview];
}
}
}

@end

使用

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIButton *CSButton=[UIButton buttonWithType:UIButtonTypeCustom];
CSButton.frame=CGRectMake(50,350, 100, 80);
CSButton.backgroundColor=[UIColor redColor];
[CSButton setTitle:@"显示输入框" forState:UIControlStateNormal];
[CSButton addTarget:self action:@selector(showKeyBord) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:CSButton];

UIButton   \*CSButton2=\[UIButton  buttonWithType:UIButtonTypeCustom\];  
CSButton2.frame=CGRectMake(self.view.frame.size.width-100-50,350, 100, 80);  
CSButton2.backgroundColor=\[UIColor   redColor\];  
\[CSButton2  setTitle:@"隐藏输入框" forState:UIControlStateNormal\];  
\[CSButton2  addTarget:self action:@selector(hideKeyBord) forControlEvents:UIControlEventTouchDown\];  
\[self.view  addSubview:CSButton2\];

\[\[NSNotificationCenter defaultCenter\] addObserver:self selector:@selector(gotoNextVC:) name:@"uuuu" object:nil\];  

}

-(SBInputTextAlert *)SBTextField{
if (!_SBTextField) {
_SBTextField=[[SBInputTextAlert alloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width-20,200)];
_SBTextField.titleLabel.text=@"请输入6位支付密码";
_SBTextField.backgroundColor=[UIColor whiteColor];
}
return _SBTextField;
}

-(void)gotoNextVC:(NSNotification *)nti
{
NSLog(@"text=%@",nti.object);
[self.SBTextField dismiss];
secondViewController *secvc=[[secondViewController alloc]init];
[self presentViewController:secvc animated:YES completion:nil];
}

-(void)showKeyBord
{
[self.SBTextField show];
[self.SBTextField.TextFieldAlert.passwordTextField becomeFirstResponder];
}

-(void)hideKeyBord
{
[self.SBTextField dismiss];
[self.SBTextField.TextFieldAlert.passwordTextField resignFirstResponder];
}

效果图  可根据设计图添加相关UI即可

Demo地址 https://files.cnblogs.com/files/sixindev/SafeInpuTextFiled.zip

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章