支付交易密码

#import

#import "MZTTextField.h"

@interface PasswordView : UIView

//密码输入文本框

@property (nonatomic,strong) MZTTextField *passwordField;

@end

/**

设计思路:

第一步:先创建控件:标题、取消按钮、一个输入框。

第二步:再将输入框六等分,用分割线分开,这样看起来就有六个框了,再创建六个 密码点视图(就是黑圆点),位置根据输入框六等分来设置,添加到视图并全部hide,然后存放在一个数组里。

第三步:每次输入密码,先将全部密码点全部hide,然后再根据输入密码的长度,一个一个的显示出来,比如密码输入到第四位,就利用循环将数组前四位的密码点hide设置为NO。这样删除也好处理。

第四步:判断,显示动画。

**/

#import "PasswordView.h"

//禁止复制、粘贴、全选、剪切等操作的输入框

#import "MZTTextField.h"

//输入密码后的等待和成功动画

#import "PaymentLoadingHUD.h"

#import "PaymentSuccessHUD.h"

#import

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

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

//密码位数

static NSInteger const DotsNumber = 6;

//密码点的宽和高  应该是等高等宽的正方形 方便设置为圆角

static CGFloat const DotWith_height = 12;

@interface PasswordView ()

//标题

@property (nonatomic,strong) UILabel *title;

//取消按钮

@property (nonatomic,strong) UIButton *btn_cancel;

//忘记密码按钮

@property (nonatomic,strong) UIButton *forgetPassword;

//分割线

@property (nonatomic,strong) UIView *line;

//用来装密码点的数组,里面装的是view

@property (nonatomic,strong) NSMutableArray *passwordDotsArray;

//用户的默认支付密码

@property (nonatomic,strong) NSString *password;

@property (nonatomic,strong) UILabel *PaymentText;

@end

@implementation PasswordView

#pragma mark - 初始化密码、视图、数组

//重写初始化类方法

-(instancetype)initWithFrame:(CGRect)frame{

    if (self = [super initWithFrame:frame]) {

        self.backgroundColor = [UIColor whiteColor];

        [self getPassword];

        //创建子控件,并添加到视图

        [self InitAllUI];

    }

    return self;

}

////获取支付密码

-(void)getPassword {

    self.password = @"131415";

}

-(void)InitAllUI {

    //标题

    self.title = [[UILabel alloc]init];

    self.title.text = @"请输入支付密码";

    self.title.textAlignment = NSTextAlignmentCenter;

    self.title.font = [UIFont systemFontOfSize:16];

    CGSize size = [self.title.text sizeWithAttributes:@{NSFontAttributeName:self.title.font}];

    [self addSubview:self.title];

    [self.title mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(self.mas_top).with.offset(15);

        make.centerX.equalTo(self.mas_centerX);

        make.size.mas_equalTo(CGSizeMake(size.width+10, size.height));

    }];

    //取消按钮

    self.btn_cancel = [UIButton buttonWithType:UIButtonTypeCustom];

    [self.btn_cancel setImage:[UIImage imageNamed:@"箭头灰"] forState:UIControlStateNormal];

    [self.btn_cancel addTarget:self action:@selector(TakeUpPassword) forControlEvents:UIControlEventTouchUpInside];

    [self addSubview:self.btn_cancel];

    [self.btn_cancel mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerY.equalTo(self.title.mas_centerY);

        make.left.equalTo(self.mas_left).with.offset(10);

        make.size.mas_equalTo(CGSizeMake(28, 28));

    }];

    //分割线

    self.line = [UIView new];

    self.line.backgroundColor = [UIColor colorWithRed:222/255.0f green:222/255.0f blue:222/255.0f alpha:1];

    [self addSubview:self.line];

    [self.line mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(self.title.mas_bottom).with.offset(15);

        make.left.equalTo(self.mas_left);

        make.size.mas_equalTo(CGSizeMake(MZT_SCREEN_WIDTH, 1));

    }];

    //密码输入框

    self.passwordField = [[MZTTextField alloc]init];

    self.passwordField.backgroundColor = [UIColor whiteColor];

    self.passwordField.alpha = 0.8;

    self.passwordField.textColor = [UIColor clearColor];//这两个颜色一定要是clearColor,不然删除到第一个时可能会看见输入的数字

    self.passwordField.tintColor = [UIColor clearColor];

    self.passwordField.layer.borderColor = [UIColor colorWithRed:222/255.0f green:222/255.0f blue:222/255.0f alpha:1].CGColor;

    self.passwordField.layer.borderWidth = 1;

    self.passwordField.layer.cornerRadius = 8.0;

    self.passwordField.keyboardType = UIKeyboardTypeNumberPad;

    self.passwordField.secureTextEntry = YES;

    [self.passwordField addTarget:self action:@selector(passwordFieldDidChange:) forControlEvents:UIControlEventEditingChanged];

    self.passwordField.delegate = self;

    [self.passwordField becomeFirstResponder];

    [self addSubview:self.passwordField];

    //忘记密码

    self.forgetPassword = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    [self.forgetPassword setTitle:@"忘记密码?" forState:UIControlStateNormal];

    self.forgetPassword.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;

    [self.forgetPassword addTarget:self action:@selector(ForgetPassword) forControlEvents:UIControlEventTouchUpInside];

    [self addSubview:self.forgetPassword];

}

-(void) layoutSubviews {

    [super layoutSubviews];

    self.passwordField.frame = CGRectMake((ScreenWidth-ScreenWidth*0.15*6)/2, 70, ScreenWidth*0.15*6, ScreenWidth*0.15);

    [self.forgetPassword mas_makeConstraints:^(MASConstraintMaker *make) {

        make.right.equalTo(self.passwordField.mas_right);

        make.top.equalTo(self.passwordField.mas_bottom).with.offset(10);

        make.size.mas_equalTo(CGSizeMake(80, 16));

    }];

    //密码点要根据 passwordField.frame 来设置

    [self initDotsViews];

}

-(void) initDotsViews {

    //初始化数组

    self.passwordDotsArray = [NSMutableArray arrayWithCapacity:DotsNumber];

    CGFloat password_width = self.passwordField.frame.size.width/DotsNumber;

    CGFloat password_height = self.passwordField.frame.size.height;

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

        //分割线

        UIView *line = [[UIView alloc] initWithFrame:CGRectMake(i * password_width, 0, 1, password_height)];

        line.backgroundColor = [UIColor colorWithRed:222/255.0f green:222/255.0f blue:222/255.0f alpha:1];

        //不要第一个分割线

        if(i!=0) {

            [self.passwordField addSubview:line];

        }

        //密码点x和y坐标

        CGFloat dotViewX = (i + 1)*password_width - password_width / 2.0 - DotWith_height / 2.0;

        CGFloat dotViewY = (password_height - DotWith_height) / 2.0;

        //密码点视图

        UIView *dotView = [[UIView alloc] initWithFrame:CGRectMake(dotViewX, dotViewY, DotWith_height, DotWith_height)];

        dotView.backgroundColor = [UIColor colorWithRed:30/255.0f green:30/255.0f blue:30/255.0f alpha:1];

        dotView.layer.cornerRadius = DotWith_height/2.0;

        //创建好之后先隐藏

        dotView.hidden = YES;

        [self.passwordField addSubview:dotView];

        [self.passwordDotsArray addObject:dotView];

    }

}

#pragma mark - 点击事件

-(void) TakeUpPassword {

    //收起视图

    [self.passwordField resignFirstResponder];

    //并清除密码

    [self cleanPassword];

    [UIView animateWithDuration:0.3 animations:^{

        self.frame = CGRectMake(ScreenWidth, ScreenHeight*0.34, ScreenWidth, ScreenHeight*0.66);

    }];

}

-(void) ForgetPassword {

    MZTLog(@"忘记密码");

}

#pragma mark - 判断密码

-(void)passwordFieldDidChange:(UITextField *)textField {

    //先隐藏全部密码点

    [self setDotsViewHidden];

    //再根据输入框的长度来设置显示的相应个数的密码点视图

    for (int i = 0; i < self.passwordField.text.length; i ++)

    {

        if (self.passwordDotsArray.count > i )

        {

            //取出密码点视图并显示

            UIView *dotView = self.passwordDotsArray[i];

            [dotView setHidden:NO];

        }

    }

    //当输入六位密码

    if (self.passwordField.text.length == 6)

    {

        //判断输入密码与用户密码相等

        if ([self.passwordField.text isEqualToString:self.password])

        {

            NSLog(@" 打印信息  密码正确");

            [textField resignFirstResponder];

            //显示等待付款动画

            [PaymentLoadingHUD showIn:self];

            self.PaymentText = [[UILabel alloc]init];

            self.PaymentText.text = @"正在付款...";

            self.PaymentText.font = [UIFont systemFontOfSize:14];

            CGSize size = [self.PaymentText.text sizeWithAttributes:@{NSFontAttributeName:self.PaymentText.font}];

            [self addSubview:self.PaymentText];

            [self.PaymentText mas_makeConstraints:^(MASConstraintMaker *make) {

                make.centerX.equalTo(self.mas_centerX).with.offset(10);

                make.centerY.equalTo(self.mas_centerY).with.offset(50);

                make.size.mas_equalTo(CGSizeMake(size.width+10, size.width));

            }];

            //显示付款成功动画

            NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(PaymentSuccess) userInfo:nil repeats:NO];

        }

        else

        {

            UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@""

                                                            message:@"支付密码不正确"

                                                          delegate:self

                                                  cancelButtonTitle:@"重新输入"

                                                  otherButtonTitles:@"忘记密码", nil];

            [alert show];

        }

    }

}

-(void) cleanPassword {

    ////清除密码

    self.passwordField.text = @"";//置空输入框

    [self setDotsViewHidden];//隐藏所有密码点视图

}

-(void) setDotsViewHidden {

    ////隐藏所有密码点

    for (UIView *view in self.passwordDotsArray) {

        [view setHidden:YES];

    }

}

-(void) PaymentSuccess {

    [PaymentLoadingHUD hideIn:self];

    [PaymentSuccessHUD showIn:self];

    self.PaymentText.text = @"付款成功";

}

#pragma mark - UITextFieldDelegate

-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {

    // >= 六位数不能再输入

    if (self.passwordField.text.length >= DotsNumber) {

        return NO;

    }

    return YES;

}

#pragma mark - UIAlertViewDelegate

-(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {

    NSString* buttonTitle = [alertView buttonTitleAtIndex:buttonIndex];

    if ([buttonTitle isEqualToString:@"重新输入"]) {

        [self cleanPassword];

    }

    else if ([buttonTitle isEqualToString:@"忘记密码"]) {

        NSLog(@"忘记密码,重新设置密码");

    }

}

@end

#import

@interface MZTTextField : UITextField

@end

#import "MZTTextField.h"

@implementation MZTTextField

////禁止输入框的复制、粘贴、全选、剪切等操作

-(BOOL)canPerformAction:(SEL)action withSender:(id)sender {

    UIMenuController *MenuController = [UIMenuController sharedMenuController];

    if (MenuController) {

        [UIMenuController sharedMenuController].menuVisible = NO;

    }

    return NO;

}

@end

#import

@interface PaymentLoadingHUD : UIView

-(void)start;

-(void)hide;

+(PaymentLoadingHUD*)showIn:(UIView*)view;

+(PaymentLoadingHUD*)hideIn:(UIView*)view;

@end

#import "PaymentLoadingHUD.h"

#define BlueColor [UIColor colorWithRed:28/255.0 green:138/255.0 blue:234/255.0 alpha:1]

static CGFloat lineWidth = 5.0f;

@implementation PaymentLoadingHUD

{

    CADisplayLink *link;

    CAShapeLayer *animationLayer;

    CGFloat startAngle;

    CGFloat endAngle;

    CGFloat progress;

}

-(instancetype)initWithFrame:(CGRect)frame{

    if (self = [super initWithFrame:frame]) {

        [self buildUI];

    }

    return self;

}

-(void) buildUI {

    animationLayer = [CAShapeLayer layer];

    animationLayer.bounds = CGRectMake(0, 0, 60, 60);

    animationLayer.position = CGPointMake(self.bounds.size.width/2.0f, self.bounds.size.height/2.0);

    animationLayer.fillColor = [UIColor clearColor].CGColor;

    animationLayer.strokeColor = BlueColor.CGColor;

    animationLayer.lineWidth = lineWidth;

    animationLayer.lineCap = kCALineCapRound;

    [self.layer addSublayer:animationLayer];

    link = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction)];

    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

    link.paused = true;

}

-(void)displayLinkAction {

    progress += [self speed];

    if (progress >= 1) {

        progress = 0;

    }

    [self updateAnimationLayer];

}

-(void)updateAnimationLayer{

    startAngle = -M_PI_2;

    endAngle = -M_PI_2 +progress * M_PI * 2;

    if (endAngle > M_PI) {

        CGFloat progress1 = 1 - (1 - progress)/0.25;

        startAngle = -M_PI_2 + progress1 * M_PI * 2;

    }

    CGFloat radius = animationLayer.bounds.size.width/2.0f - lineWidth/2.0f;

    CGFloat centerX = animationLayer.bounds.size.width/2.0f;

    CGFloat centerY = animationLayer.bounds.size.height/2.0f;

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(centerX, centerY) radius:radius startAngle:startAngle endAngle:endAngle clockwise:true];

    path.lineCapStyle = kCGLineCapRound;

    animationLayer.path = path.CGPath;

}

-(CGFloat)speed{

    if (endAngle > M_PI) {

        return 0.3/60.0f;

    }

    return 2/60.0f;

}

+(PaymentLoadingHUD *)showIn:(UIView*)view {

    [self hideIn:view];

    PaymentLoadingHUD *hud = [[PaymentLoadingHUD alloc] initWithFrame:view.bounds];

    [hud start];

    [view addSubview:hud];

    return hud;

}

+(PaymentLoadingHUD *)hideIn:(UIView *)view {

    PaymentLoadingHUD *hud = nil;

    for (PaymentLoadingHUD *subView in view.subviews) {

        if ([subView isKindOfClass:[PaymentLoadingHUD class]]) {

            [subView hide];

            [subView removeFromSuperview];

            hud = subView;

        }

    }

    return hud;

}

-(void)start {

    link.paused = false;

}

-(void)hide {

    link.paused = true;

    progress = 0;

}

@end

#import

@interface PaymentSuccessHUD : UIView

-(void)start;

-(void)hide;

+(PaymentSuccessHUD*)showIn:(UIView*)view;

+(PaymentSuccessHUD*)hideIn:(UIView*)view;

@end

#import "PaymentSuccessHUD.h"

static CGFloat lineWidth = 4.0f;

static CGFloat circleDuriation = 0.5f;

static CGFloat checkDuration = 0.2f;

#define BlueColor [UIColor colorWithRed:28/255.0 green:138/255.0 blue:234/255.0 alpha:1]

@implementation PaymentSuccessHUD

{

    CALayer *_animationLayer;

}

//显示

+ (PaymentSuccessHUD*)showIn:(UIView*)view {

    [self hideIn:view];

    PaymentSuccessHUD *hud = [[PaymentSuccessHUD alloc] initWithFrame:view.bounds];

    [hud start];

    [view addSubview:hud];

    return hud;

}

//隐藏

+ (PaymentSuccessHUD *)hideIn:(UIView *)view {

    PaymentSuccessHUD *hud = nil;

    for (PaymentSuccessHUD *subView in view.subviews) {

        if ([subView isKindOfClass:[PaymentSuccessHUD class]]) {

            [subView hide];

            [subView removeFromSuperview];

            hud = subView;

        }

    }

    return hud;

}

- (void)start {

    [self circleAnimation];

    dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, 0.8 * circleDuriation * NSEC_PER_SEC);

    dispatch_after(time, dispatch_get_main_queue(), ^(void){

        [self checkAnimation];

    });

}

- (void)hide {

    for (CALayer *layer in _animationLayer.sublayers) {

        [layer removeAllAnimations];

    }

}

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {

        [self buildUI];

    }

    return self;

}

- (void)buildUI {

    _animationLayer = [CALayer layer];

    _animationLayer.bounds = CGRectMake(0, 0, 60, 60);

    _animationLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);

    [self.layer addSublayer:_animationLayer];

}

//画圆

- (void)circleAnimation {

    CAShapeLayer *circleLayer = [CAShapeLayer layer];

    circleLayer.frame = _animationLayer.bounds;

    [_animationLayer addSublayer:circleLayer];

    circleLayer.fillColor =  [[UIColor clearColor] CGColor];

    circleLayer.strokeColor  = BlueColor.CGColor;

    circleLayer.lineWidth = lineWidth;

    circleLayer.lineCap = kCALineCapRound;

    CGFloat lineWidth = 5.0f;

    CGFloat radius = _animationLayer.bounds.size.width/2.0f - lineWidth/2.0f;

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:circleLayer.position radius:radius startAngle:-M_PI/2 endAngle:M_PI*3/2 clockwise:true];

    circleLayer.path = path.CGPath;

    CABasicAnimation *circleAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    circleAnimation.duration = circleDuriation;

    circleAnimation.fromValue = @(0.0f);

    circleAnimation.toValue = @(1.0f);

    circleAnimation.delegate = self;

    [circleAnimation setValue:@"circleAnimation" forKey:@"animationName"];

    [circleLayer addAnimation:circleAnimation forKey:nil];

}

//对号

- (void)checkAnimation {

    CGFloat a = _animationLayer.bounds.size.width;

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(a*2.7/10,a*5.4/10)];

    [path addLineToPoint:CGPointMake(a*4.5/10,a*7/10)];

    [path addLineToPoint:CGPointMake(a*7.8/10,a*3.8/10)];

    CAShapeLayer *checkLayer = [CAShapeLayer layer];

    checkLayer.path = path.CGPath;

    checkLayer.fillColor = [UIColor clearColor].CGColor;

    checkLayer.strokeColor = BlueColor.CGColor;

    checkLayer.lineWidth = lineWidth;

    checkLayer.lineCap = kCALineCapRound;

    checkLayer.lineJoin = kCALineJoinRound;

    [_animationLayer addSublayer:checkLayer];

    CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    checkAnimation.duration = checkDuration;

    checkAnimation.fromValue = @(0.0f);

    checkAnimation.toValue = @(1.0f);

    checkAnimation.delegate = self;

    [checkAnimation setValue:@"checkAnimation" forKey:@"animationName"];

    [checkLayer addAnimation:checkAnimation forKey:nil];

}

@end



个人转载。以防丢失

iOS-支付密码插件_SunSatan的博客-CSDN博客_ios 支付密码控件

你可能感兴趣的:(支付交易密码)