ios一个简单的自定义密码输入框,alert样式和sheet样式

今天给大家分享一个自定义的密码输入框,有alert样式和sheet样式

先看效果图:

                  

先说下原理吧:首先我们需要一个输入框我用的是UITextFiled 这个是来记录键盘输入的密码的  但是这个UITextFiled是隐藏起来的    我们看到的输入一个数字 显示的一个圆点实际上是一个个小的黑点图片,我们绘制一个密码框,每个框里面有一张圆的黑点图片,通过监听UITextFiled的输入密码的长度来改变黑点是否显示的问题,哈哈,听完了原理是不是感觉在欺骗用户?


直接上代码吧:

#import <UIKit/UIKit.h>

typedef enum {
    PasswordAlertViewType_default, //从window中间弹出
    PasswordAlertViewType_sheet,   //从底部弹出
}PasswordAlertViewType;


@protocol PasswordAlertViewDelegate <NSObject>

//点击了确定按钮  或者是完成了6位密码的输入
-(void)PasswordAlertViewCompleteInputWith:(NSString*)password;
//点击了取消按钮
-(void)PasswordAlertViewDidClickCancleButton;
//点击了忘记密码按钮
-(void)PasswordAlertViewDidClickForgetButton;
@end




@interface PasswordAlertView : UIView

@property (nonatomic,weak) id<PasswordAlertViewDelegate> delegate;
@property (nonatomic,strong) UILabel *titleLable;  //标题
@property (nonatomic,strong) UILabel *tipsLalbe;   //输入框下面的提示lable(如提示密码错误) 默认隐藏 当调用密码错误的方法时就显示出来

- (instancetype)initWithType:(PasswordAlertViewType)type;

-(void)show;

//密码正确后调用这个方法
-(void)passwordCorrect;

//密码错误后调用这个方法
-(void)passwordError;

@end



#define ScreenHeight [UIScreen mainScreen].bounds.size.height
#define ScreenWidth [UIScreen mainScreen].bounds.size.width

#import "PasswordAlertView.h"

@interface PasswordAlertView ()<UITextFieldDelegate>
@property (nonatomic,assign) PasswordAlertViewType currentType;
@property (nonatomic,strong) UIView         *bgView;
@property (nonatomic,strong) UIView         *inputBgView;
@property (nonatomic,strong) UITextField    *inputTextFiled; //输入框
@property (nonatomic,strong) UIButton       *confirmBtn;

@end

@implementation PasswordAlertView



- (instancetype)initWithType:(PasswordAlertViewType)type
{
    self = [super init];
    if (self) {
        self.frame = CGRectMake(0, 0, ScreenWidth,ScreenHeight);
        self.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.1];
        self.inputTextFiled = [[UITextField alloc]init];
        self.inputTextFiled.keyboardType = UIKeyboardTypeNumberPad;
        self.inputTextFiled.delegate = self;
        [self addSubview:self.inputTextFiled];
        self.inputTextFiled.hidden = YES;
        [self.inputTextFiled addTarget:self action:@selector(inputTextChanged:) forControlEvents:UIControlEventEditingChanged];
        _currentType = type;
        switch (type) {
            case PasswordAlertViewType_default:
            {
                [self setupWithPasswordAlertViewType_default];
            }
                break;
                
            case PasswordAlertViewType_sheet:
            {
                [self setupithPasswordAlertViewType_sheet];
                
            }
                break;
            default:
                break;
        }
    }
    return self;
}

-(void)setupWithPasswordAlertViewType_default{
    
    self.bgView = [[UIView alloc]initWithFrame:CGRectMake(20, self.center.y-100, ScreenWidth-40, 200)];
    self.bgView.backgroundColor = [UIColor whiteColor];
    self.bgView.layer.cornerRadius = 15;
    self.bgView.layer.masksToBounds = YES;
    [self addSubview:self.bgView];
    
    //标题
    self.titleLable = [[UILabel alloc]initWithFrame:CGRectMake(40, 0, self.bgView.frame.size.width-80, 50)];
    self.titleLable.textAlignment = NSTextAlignmentCenter;
    self.titleLable.font = [UIFont systemFontOfSize:19];
    self.titleLable.text = @"请输入密码";
    self.titleLable.textColor = [UIColor blackColor];
    [self.bgView addSubview:self.titleLable];
    
    //取消按钮
    UIButton *cancleBtn  = [UIButton buttonWithType:UIButtonTypeCustom];
    cancleBtn.frame = CGRectMake(CGRectGetWidth(self.bgView.frame)-35, 5, 30, 30);
    cancleBtn.backgroundColor = [UIColor clearColor];
    [cancleBtn setImage:[UIImage imageNamed:@"xxx"] forState:UIControlStateNormal];
    [cancleBtn addTarget:self action:@selector(cancleBtnClick) forControlEvents:UIControlEventTouchUpInside];
    [self.bgView addSubview:cancleBtn];
    
    //分割线
    UIView *line1 = [[UIView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.titleLable.frame), self.bgView.frame.size.width,1)];
    line1.backgroundColor = [UIColor lightGrayColor];
    [self.bgView addSubview:line1];
    
    //开始绘制输入框(6个格子40X45)
    _inputBgView = [[UIView alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.bgView.frame)/2-135, CGRectGetMaxY(line1.frame)+25, 270, 40)];
    _inputBgView.backgroundColor = [UIColor whiteColor];
    _inputBgView.layer.borderWidth = 1.0;
    _inputBgView.layer.borderColor = [UIColor lightGrayColor].CGColor;
    [self.bgView addSubview:_inputBgView];
    //线框
    for (int i = 0; i<5; i++) {
        UIView *line = [[UIView alloc]initWithFrame:CGRectMake((i+1)*45, 0, 1, 40)];
        line.backgroundColor = [UIColor lightGrayColor];
        [_inputBgView addSubview:line];
    }
    //黑色圆点
    for (int i = 0; i<6; i++) {
        
        UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(i*45, 0, 45, 40)];
        imgView.tag = 100+i;
        imgView.hidden = YES;
        [_inputBgView addSubview:imgView];
        
        UIImageView *smallImageView = [[UIImageView alloc]initWithFrame:CGRectMake(12.5, 10, 20, 20)];
        smallImageView.image = [UIImage imageNamed:@"passwordIcon"];
        [imgView addSubview:smallImageView];
    }
    
    //下面的提示文字
    self.tipsLalbe = [[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMinX(_inputBgView.frame), CGRectGetMaxY(_inputBgView.frame)+7.5, 240, 15)];
    self.tipsLalbe.font = [UIFont systemFontOfSize:14];
    self.tipsLalbe.textColor = [UIColor redColor];
    self.tipsLalbe.text = @"密码不正确!";
    self.tipsLalbe.hidden = YES;
    [self.bgView addSubview:self.tipsLalbe];
    
    //确定按钮
    self.confirmBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    self.confirmBtn.frame = CGRectMake(30, CGRectGetMaxY(self.tipsLalbe.frame)+5, CGRectGetWidth(self.bgView.frame)-60, 40);
    self.confirmBtn.userInteractionEnabled = NO;
    self.confirmBtn.backgroundColor = [UIColor grayColor];
    self.confirmBtn.layer.cornerRadius = 10;
    self.confirmBtn.layer.masksToBounds = YES;
    [self.confirmBtn setTitle:@"确定" forState:UIControlStateNormal];
    [self.confirmBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [self.confirmBtn addTarget:self action:@selector(cofirmBtnClick) forControlEvents:UIControlEventTouchUpInside];
    [self.bgView addSubview:self.confirmBtn];
}

-(void)setupithPasswordAlertViewType_sheet{
    //监听键盘
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardWillShow:) name:UIKeyboardWillShowNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardWillHidden) name:UIKeyboardWillHideNotification object:nil];
    
    self.bgView = [[UIView alloc]initWithFrame:CGRectMake(0, ScreenHeight, ScreenWidth, 200)];
    self.bgView.backgroundColor = [UIColor whiteColor];
    [self addSubview:self.bgView];
    
    //标题
    self.titleLable = [[UILabel alloc]initWithFrame:CGRectMake(40, 0, self.bgView.frame.size.width-80, 50)];
    self.titleLable.textAlignment = NSTextAlignmentCenter;
    self.titleLable.font = [UIFont systemFontOfSize:19];
    self.titleLable.text = @"请输入密码";
    self.titleLable.textColor = [UIColor blackColor];
    [self.bgView addSubview:self.titleLable];
    
    //取消按钮
    UIButton *cancleBtn  = [UIButton buttonWithType:UIButtonTypeCustom];
    cancleBtn.frame = CGRectMake(5, 5, 30, 30);
    cancleBtn.backgroundColor = [UIColor clearColor];
    [cancleBtn setImage:[UIImage imageNamed:@"xxx"] forState:UIControlStateNormal];
    [cancleBtn addTarget:self action:@selector(cancleBtnClick) forControlEvents:UIControlEventTouchUpInside];
    [self.bgView addSubview:cancleBtn];
    
    //分割线
    UIView *line1 = [[UIView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.titleLable.frame), self.bgView.frame.size.width,1)];
    line1.backgroundColor = [UIColor lightGrayColor];
    [self.bgView addSubview:line1];
    
    //开始绘制输入框(6个格子40X45)
    _inputBgView = [[UIView alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.bgView.frame)/2-135, CGRectGetMaxY(line1.frame)+25, 270, 40)];
    _inputBgView.backgroundColor = [UIColor whiteColor];
    _inputBgView.layer.borderWidth = 1.0;
    _inputBgView.layer.borderColor = [UIColor lightGrayColor].CGColor;
    [self.bgView addSubview:_inputBgView];
    //线框
    for (int i = 0; i<5; i++) {
        UIView *line = [[UIView alloc]initWithFrame:CGRectMake((i+1)*45, 0, 1, 40)];
        line.backgroundColor = [UIColor lightGrayColor];
        [_inputBgView addSubview:line];
    }
    //黑色圆点
    for (int i = 0; i<6; i++) {
        
        UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(i*45, 0, 45, 40)];
        imgView.tag = 100+i;
        imgView.hidden = YES;
        [_inputBgView addSubview:imgView];
        
        UIImageView *smallImageView = [[UIImageView alloc]initWithFrame:CGRectMake(12.5, 10, 20, 20)];
        smallImageView.image = [UIImage imageNamed:@"passwordIcon"];
        [imgView addSubview:smallImageView];
    }
    
    //下面的提示文字
    self.tipsLalbe = [[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMinX(_inputBgView.frame), CGRectGetMaxY(_inputBgView.frame)+7.5, 240, 15)];
    self.tipsLalbe.font = [UIFont systemFontOfSize:14];
    self.tipsLalbe.textColor = [UIColor redColor];
    self.tipsLalbe.text = @"密码不正确!";
    self.tipsLalbe.hidden = YES;
    [self.bgView addSubview:self.tipsLalbe];
    
    //忘记密码按钮
    UIButton *forgetPWBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    forgetPWBtn.frame = CGRectMake(CGRectGetMaxX(self.inputBgView.frame)-70, CGRectGetMaxY(self.tipsLalbe.frame), 80, 30);
    [forgetPWBtn addTarget:self action:@selector(forgetPWBtnClick) forControlEvents:UIControlEventTouchUpInside];
    forgetPWBtn.titleLabel.font = [UIFont systemFontOfSize:14];
    [forgetPWBtn setTitle:@"忘记密码?" forState:UIControlStateNormal];
    [forgetPWBtn setTitleColor:[UIColor colorWithRed:0.01f green:0.45f blue:0.88f alpha:1.00f] forState:UIControlStateNormal];
    [forgetPWBtn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
    [self.bgView addSubview:forgetPWBtn];
}

-(void)keyBoardWillShow:(NSNotification*)notic{

    //获取键盘的frame
    CGRect keyBoardRect = [[notic.userInfo objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
    //获取键盘的动画持续时间
    CGFloat durTime = [[notic.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] floatValue];
    
    //开始动画
    //弹出框的y为:当前键盘的高度-弹出框的高度-间隔
    [UIView animateWithDuration:durTime animations:^{
        
        CGRect rect = self.bgView.frame;
        rect.origin.y = keyBoardRect.origin.y - rect.size.height;
        self.bgView.frame = rect;
        
    }];
    
}


-(void)keyBoardWillHidden{
    
    if (_currentType == PasswordAlertViewType_sheet) {
        [UIView animateWithDuration:0.25 animations:^{
            
            self.bgView.frame = CGRectMake(0, ScreenHeight, ScreenWidth, 200);
            
        }];
    }
    
}

-(void)cancleBtnClick{
    for (int i = 0; i<6; i++) {
        UIImageView *imgView = [self.inputBgView viewWithTag:100+i];
        imgView.hidden = YES;
    }
    self.inputTextFiled.text = @"";
    self.tipsLalbe.hidden = YES;
    
    if ([self.delegate respondsToSelector:@selector(PasswordAlertViewDidClickCancleButton)]) {
        [self.delegate PasswordAlertViewDidClickCancleButton];
    }
    [self.inputTextFiled resignFirstResponder];
    self.confirmBtn.userInteractionEnabled = NO;
    self.confirmBtn.backgroundColor = [UIColor grayColor];
    [self removeFromSuperview];

}

-(void)cofirmBtnClick{
    if ([self.delegate respondsToSelector:@selector(PasswordAlertViewCompleteInputWith:)]) {
        [self.delegate PasswordAlertViewCompleteInputWith:self.inputTextFiled.text];
    }
    self.confirmBtn.userInteractionEnabled = NO;
    self.confirmBtn.backgroundColor = [UIColor grayColor];
}

-(void)forgetPWBtnClick{
    
    if ([self.delegate respondsToSelector:@selector(PasswordAlertViewDidClickForgetButton)]) {
        [self.delegate PasswordAlertViewDidClickForgetButton];
    }
    for (int i = 0; i<6; i++) {
        UIImageView *imgView = [self.inputBgView viewWithTag:100+i];
        imgView.hidden = YES;
    }
    self.inputTextFiled.text = @"";
    self.tipsLalbe.hidden = YES;
    
    [self.inputTextFiled resignFirstResponder];
    
    [self removeFromSuperview];
}

-(void)show{
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    [window addSubview:self];
    [self.inputTextFiled becomeFirstResponder];
}

//密码文字改变
-(void)inputTextChanged:(UITextField *)textField{
    
    self.tipsLalbe.hidden = YES;
    NSLog(@"%@",textField.text);
    
    //显示
    for (int i = 1; i<=textField.text.length; i++) {
        UIImageView *imgView = [self.inputBgView viewWithTag:99+i];
        imgView.hidden = NO;
    }
    //隐藏
    for (NSInteger i = textField.text.length+1; i<=6; i++) {
        UIImageView *imgView = [self.inputBgView viewWithTag:99+i];
        imgView.hidden = YES;
    }
    
    switch (_currentType) {
        case PasswordAlertViewType_default:
        {
            if (textField.text.length == 6) {
                self.confirmBtn.backgroundColor = [UIColor colorWithRed:255/255.0 green:159/255.0 blue:106/255.0 alpha:1];
                self.confirmBtn.userInteractionEnabled = YES;
            }else{
                self.confirmBtn.backgroundColor = [UIColor grayColor];
                self.confirmBtn.userInteractionEnabled = NO;
                
            }
        }
            break;
        case PasswordAlertViewType_sheet:
        {
            if (textField.text.length == 6) {
                
                if ([self.delegate respondsToSelector:@selector(PasswordAlertViewCompleteInputWith:)]) {
                    [self.delegate PasswordAlertViewCompleteInputWith:self.inputTextFiled.text];
                }
                
            }
        }
            break;
        default:
            break;
    }

}

-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{
//    NSLog(@"---------->%@",textField.text);
    if (range.location >= 6) {
        return NO;
    }
    return YES;
}


//密码错误后调用这个方法
-(void)passwordError{
    for (int i = 0; i<6; i++) {
        UIImageView *imgView = [self.inputBgView viewWithTag:100+i];
        imgView.hidden = YES;
    }
    self.inputTextFiled.text = @"";
    self.tipsLalbe.hidden = NO;
}
//密码正确后调用这个方法
-(void)passwordCorrect{
    for (int i = 0; i<6; i++) {
        UIImageView *imgView = [self.inputBgView viewWithTag:100+i];
        imgView.hidden = YES;
    }
    self.inputTextFiled.text = @"";
    self.tipsLalbe.hidden = YES;
    [self removeFromSuperview];
    [self.inputTextFiled resignFirstResponder];
}

-(void)dealloc{
    [[NSNotificationCenter defaultCenter]removeObserver:self];
}

@end



#import "ViewController.h"
#import "PasswordAlertView.h"
@interface ViewController ()<PasswordAlertViewDelegate>
@property (nonatomic,strong) PasswordAlertView *alertView1;
@property (nonatomic,strong) PasswordAlertView *alertView2;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(100, 100, 100, 30);
    btn1.backgroundColor = [UIColor redColor];
    [btn1 setTitle:@"默认样式" forState:UIControlStateNormal];
    [btn1 addTarget:self action:@selector(click1) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn1];
    
    UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn2.frame = CGRectMake(100, 300, 100, 30);
    btn2.backgroundColor = [UIColor redColor];
    [btn2 setTitle:@"sheet样式" forState:UIControlStateNormal];
    [btn2 addTarget:self action:@selector(click2) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn2];
    
    _alertView1 =[[PasswordAlertView alloc]initWithType:PasswordAlertViewType_default];
    _alertView1.delegate = self;
    _alertView1.titleLable.text = @"请输入银行卡密码";
    _alertView1.tipsLalbe.text = @"您输入的密码不正确!";
    
    _alertView2 =[[PasswordAlertView alloc]initWithType:PasswordAlertViewType_sheet];
    _alertView2.delegate = self;
    _alertView2.titleLable.text = @"请输入银行卡密码";
    _alertView2.tipsLalbe.text = @"您输入的密码不正确!";
}
-(void)click1{
    
    [_alertView1 show];
}

-(void)click2{
    [_alertView2 show];
}

-(void)PasswordAlertViewCompleteInputWith:(NSString*)password{
    NSLog(@"完成了密码输入,密码为:%@",password);
    
    if ([password isEqualToString:@"111111"]) {
        NSLog(@"密码正确!");
        [_alertView1 passwordCorrect];
        //这里必须延迟一下  不然看不到最后一个黑点显示整个视图就消失了
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [_alertView2 passwordCorrect];
        });
        
    }else{
        NSLog(@"密码错误");
        [_alertView1 passwordError];
        //这里必须延迟一下  不然看不到最后一个黑点显示整个视图就消失了
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [_alertView2 passwordError];
        });
        
    }
}

-(void)PasswordAlertViewDidClickCancleButton{
    NSLog(@"点击了取消按钮");
}


-(void)PasswordAlertViewDidClickForgetButton{
    NSLog(@"点击了忘记密码按钮");
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end





demo下载地址:http://download.csdn.net/detail/sg_zxw/9713075

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值