密碼輸入框：HQLPasswordViewDemo

之前一篇文章：密碼輸入框：CYPasswordView_Block 源碼解析 粗略的分析了 CYPasswordView 的源碼，因?yàn)橐玫?，但是總覺(jué)得實(shí)現(xiàn)的方式不夠優(yōu)雅，于是我又照著重寫(xiě)了一遍，在大致實(shí)現(xiàn)方式基本不變的情況下，優(yōu)化了些許地方：

一、框架結(jié)構(gòu)

框架結(jié)構(gòu)基本不變：

二、HQLPasswordBackgroundView

背景視圖：

修改或者優(yōu)化的地方：

  • 標(biāo)題改用 label 標(biāo)簽的形式顯示；
  • drawRect: 方法中只畫(huà)了背景視圖和輸入框；
  • 重構(gòu)了重置小圓點(diǎn)的實(shí)現(xiàn)方式；

1?? 標(biāo)題改用 label 標(biāo)簽的形式顯示

#pragma mark - Lifecycle

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

/** 添加子控件 */
- (void)setupSubViews {
    [self addSubview:self.titleLabel];
    [self addSubview:self.closeButton];
    [self addSubview:self.forgetPwdButton];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    // 設(shè)置【標(biāo)題】的坐標(biāo)
    self.titleLabel.centerX = HQLScreenWidth * 0.5;
    self.titleLabel.centerY = HQLPasswordViewTitleHeight * 0.5;
    
    // 設(shè)置【關(guān)閉按鈕】的坐標(biāo)
    self.closeButton.width  = HQLPasswordViewCloseButtonWH;
    self.closeButton.height = HQLPasswordViewCloseButtonWH;
    self.closeButton.x = HQLPasswordViewCloseButtonMarginLeft;
    self.closeButton.centerY = HQLPasswordViewTitleHeight * 0.5;
    
    // 設(shè)置【忘記密碼】按鈕的坐標(biāo)
    self.forgetPwdButton.x = HQLScreenWidth - (HQLScreenWidth - HQLPasswordViewTextFieldWidth) * 0.5 - self.forgetPwdButton.width;
    self.forgetPwdButton.y = HQLPasswordViewTitleHeight + HQLPasswordViewTextFieldMarginTop + HQLPasswordViewTextFieldHeight + HQLPasswordViewForgetPWDButtonMarginTop;
}

2?? drawRect: 方法中只畫(huà)了背景視圖和輸入框；

- (void)drawRect:(CGRect)rect {
    // 畫(huà)背景視圖
    UIImage *backgroundImage =
        [UIImage imageNamed:HQLPasswordViewSrcName(@"password_background")];
    [backgroundImage drawInRect:rect];
    
    // 畫(huà)輸入框
    UIImage *imgTextField =
        [UIImage imageNamed:HQLPasswordViewSrcName(@"password_textfield")];
    [imgTextField drawInRect:[self textFieldRect]];
}

3?? 重構(gòu)了重置小圓點(diǎn)的實(shí)現(xiàn)方式；

  1. 首先數(shù)組中存放的是6個(gè) dotsImageView 對(duì)象，對(duì)應(yīng)6個(gè)不同位置的 ●
- (NSMutableArray *)dotsImgArray {
    if (!_dotsImgArray) {
        _dotsImgArray = [NSMutableArray arrayWithCapacity:KPasswordNumber];
        for (int i = 0; i < KPasswordNumber; i++) {
            
            // textField 的 Rect
            CGFloat textFieldW = HQLPasswordViewTextFieldWidth;
            CGFloat textFieldH = HQLPasswordViewTextFieldHeight;
            CGFloat textFieldX = (HQLScreenWidth - textFieldW) * 0.5;
            CGFloat textFieldY = HQLPasswordViewTitleHeight + HQLPasswordViewTextFieldMarginTop;
           
            // 圓點(diǎn) 的 Rect
            CGFloat pointW = HQLPasswordViewPointnWH;
            CGFloat pointH = HQLPasswordViewPointnWH;
            CGFloat pointY = textFieldY + (textFieldH - pointH) * 0.5;
            // 一個(gè)格子的寬度
            CGFloat cellW = textFieldW / KPasswordNumber;
            CGFloat padding = (cellW - pointW) * 0.5;
            // 圓點(diǎn)的 X
            CGFloat pointX = textFieldX + (2 * i + 1) * padding + i * pointW;
            // 添加圓形圖片
            UIImage *dotsImage =
                [UIImage imageNamed:HQLPasswordViewSrcName(@"password_point")];
            UIImageView *dotsImageView =
                [[UIImageView alloc] initWithImage:dotsImage];
            dotsImageView.contentMode = UIViewContentModeScaleAspectFit;
            dotsImageView.frame = CGRectMake(pointX, pointY, pointW, pointH);
            // 先全部隱藏
            dotsImageView.hidden = YES;
            
            [self addSubview:dotsImageView];
            [_dotsImgArray addObject:dotsImageView];
        }
    }
    return _dotsImgArray;
}
  1. 通過(guò)傳入當(dāng)前密碼的長(zhǎng)度 length 重置小圓點(diǎn)，比 length值大的 dotsImgArray 視圖設(shè)置為顯示，比 length值小的 dotsImgArray 視圖設(shè)置為隱藏。
// 重置圓點(diǎn)
- (void)resetDotsWithLength:(NSUInteger)length {
    for (int i = 0; i < self.dotsImgArray.count; i++) {
        if (length == 0 || i >= length) {
            ((UIImageView *)[self.dotsImgArray objectAtIndex:i]).hidden = YES;
        }else {
            ((UIImageView *)[self.dotsImgArray objectAtIndex:i]).hidden = NO;
        }
    }
}

HQLPasswordView

密碼輸入視圖：

修改或者優(yōu)化的地方：

  • 密碼輸入框 pwdTextField 和畫(huà)上去的輸入框圖片一樣大，可以響應(yīng)用戶觸摸并彈出鍵盤(pán)，而不是 CGRectMake(0, 0, 1, 1) ；
  • 之前多出來(lái)的單擊手勢(shì)也不浪費(fèi)，組織又有新任務(wù)了：用戶如果觸摸上方灰色的蒙版視圖也是可以關(guān)閉密碼輸入框的。
  • 因?yàn)樾薷牧诵A點(diǎn)的實(shí)現(xiàn)方式，所以 UITextFieldDelegate 委托協(xié)議實(shí)現(xiàn)方式也有改動(dòng)。

1?? 密碼輸入框 pwdTextField 可以響應(yīng)用戶觸摸并彈出鍵盤(pán)

只要把它所有的顏色設(shè)置為透明就可以了。

- (UITextField *)pwdTextField {
    if (!_pwdTextField) {
        _pwdTextField = [[UITextField alloc] init];
        _pwdTextField.frame = [self.backgroundView textFieldRect];
        _pwdTextField.backgroundColor = [UIColor clearColor];
        _pwdTextField.textColor = [UIColor clearColor];
        _pwdTextField.tintColor = [UIColor clearColor];
        _pwdTextField.keyboardType = UIKeyboardTypeNumberPad;
        _pwdTextField.delegate = self;
    }
    return _pwdTextField;
}

2?? 用戶如果觸摸上方灰色的蒙版視圖可以關(guān)閉密碼輸入框。

/** 
 用戶點(diǎn)擊事件,觸摸灰色蒙版區(qū)域，實(shí)現(xiàn)關(guān)閉操作
 */
- (void)tap:(UITapGestureRecognizer *)recognizer {
    // 獲取點(diǎn)擊的坐標(biāo)位置
    CGPoint point = [recognizer locationInView:self];
    // 輸入框上方的蒙版區(qū)域
    CGRect frame = CGRectMake(0,
                              0,
                              HQLScreenWidth,
                              HQLScreenHeight - HQLPasswordInputViewHeight);
    // 判斷點(diǎn)擊區(qū)域是否包含在蒙版矩形中
    if (CGRectContainsPoint(frame, point)) {
        [self removePasswordView];
    }
}

/** 移除密碼輸入視圖 */
- (void)removePasswordView {
    [self.pwdTextField resignFirstResponder];
    [self removeFromSuperview];
}

3?? UITextFieldDelegate 委托協(xié)議實(shí)現(xiàn)方式也有改動(dòng):

用協(xié)議的方式自動(dòng)重置密碼輸入框，而不是手動(dòng)燒腦判斷

每次彈出鍵盤(pán)就重置密碼框

1.第一次跟隨密碼輸入視圖彈出會(huì)調(diào)用；

2.提示密碼輸入錯(cuò)誤，再次輸入密碼會(huì)調(diào)用；

#pragma mark - UITextFieldDelegate

- (void)textFieldDidBeginEditing:(UITextField *)textField {
    NSLog(@"%@",NSStringFromSelector(_cmd));
    
    // 每次 TextField 開(kāi)始編輯，都要重置密碼框
    [self clearUpPassword];
}

// 清除密碼
- (void)clearUpPassword {
    // 1.清空輸入文本框密碼
    self.pwdTextField.text = @"";
    // 2.清空黑色圓點(diǎn)
    [self.backgroundView resetDotsWithLength:0];
    // 3.隱藏加載圖片和文字
    self.rotationImageView.hidden = YES;
    self.loadingTextLabel.hidden  = YES;
}

// 每當(dāng)用戶操作導(dǎo)致其文本更改時(shí)，文本字段將調(diào)用此方法。 使用此方法來(lái)驗(yàn)證用戶鍵入的文本。 例如，您可以使用此方法來(lái)防止用戶輸入任何數(shù)字，但不能輸入數(shù)值。
// 每當(dāng)一個(gè)字符被鍵入時(shí)，都會(huì)首先調(diào)用此方法，詢問(wèn)是否應(yīng)該將輸入的字符添加進(jìn) TextField 中。
// 因此調(diào)用該方法時(shí)，正被輸入的字符實(shí)際上還沒(méi)有被添加進(jìn) TextField 中
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {    
    // 輸入進(jìn) TextField 的數(shù)字個(gè)數(shù)
    NSUInteger numberLength = textField.text.length + string.length;
    
    if([string isEqualToString:@""]) {
        // 1.判斷是不是刪除鍵？
        [self.backgroundView resetDotsWithLength:numberLength - 1];
        return YES;
    } else if(numberLength >= KPasswordNumber) {
        // 2.判斷此次輸入數(shù)字的是不是第6個(gè)數(shù)字？
        [self.backgroundView resetDotsWithLength:numberLength];
        // 2.1 收起鍵盤(pán)
        [self.pwdTextField resignFirstResponder];
        // 2.2 發(fā)起請(qǐng)求 Block
        if (self.finishBlock) {
            [self startLoading];
            NSString *password = [textField.text stringByAppendingString:string];
            self.finishBlock(password);
        }
        return NO;
    } else {
        // 3.每次鍵入一個(gè)值，都要重設(shè)黑點(diǎn)
        [self.backgroundView resetDotsWithLength:numberLength];
        return YES;
    }
}

4?? 其它的沒(méi)什么變化，少了幾個(gè)移除視圖的一些重置方法

UIView 動(dòng)畫(huà)

+ (void)animateWithDuration:(NSTimeInterval)duration 
                      delay:(NSTimeInterval)delay 
                    options:(UIViewAnimationOptions)options 
                  animations:(void (^)(void))animations 
                  completion:(void (^ __nullable)(BOOL finished))completion ;

[UIView animateWithDuration:(NSTimeInterval)          // 動(dòng)畫(huà)的持續(xù)時(shí)間
                      delay:(NSTimeInterval)          // 動(dòng)畫(huà)執(zhí)行的延遲時(shí)間
                    options:(UIViewAnimationOptions)  // 執(zhí)行的動(dòng)畫(huà)選項(xiàng)，
                 animations:^{

        // 要執(zhí)行的動(dòng)畫(huà)代碼
 } completion:^(BOOL finished) {
        // 動(dòng)畫(huà)執(zhí)行完畢后的調(diào)用
}];

通過(guò)指定動(dòng)畫(huà)持續(xù)時(shí)間、動(dòng)畫(huà)延遲、執(zhí)行動(dòng)畫(huà)選項(xiàng)和動(dòng)畫(huà)完成后回調(diào)的 Block 對(duì)象 更改一個(gè)或多個(gè)視圖的動(dòng)畫(huà)。

使用示例：

- (IBAction)paymentButtonDidClicked:(id)sender {

    self.passwordView = [[HQLPasswordView alloc] init];
    [self.passwordView showInView:self.view.window];
    self.passwordView.title = @"我是標(biāo)題";
    self.passwordView.loadingText = @"正在支付中...";
    self.passwordView.closeBlock = ^{
        NSLog(@"取消支付回調(diào)...");
    };
    self.passwordView.forgetPasswordBlock = ^{
        NSLog(@"忘記密碼回調(diào)...");
    };
    WS(weakself);
    self.passwordView.finishBlock = ^(NSString *password) {
        NSLog(@"完成支付回調(diào)...");
        
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(kRequestTime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            flag = !flag;
            if (flag) {
                // 購(gòu)買(mǎi)成功，跳轉(zhuǎn)到成功頁(yè)
                [weakself.passwordView requestComplete:YES message:@"購(gòu)買(mǎi)成功"];
                
                dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)( KDelay* NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                    // 從父視圖移除密碼輸入視圖
                    [weakself.passwordView removePasswordView];
                });
            } else {
                // 購(gòu)買(mǎi)失敗，跳轉(zhuǎn)到失敗頁(yè)
                [weakself.passwordView requestComplete:NO];
                
                dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(KDelay * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                    // 購(gòu)買(mǎi)失敗的處理，也可以繼續(xù)支付
                    
                });
            }
        });
    };
}

參考

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,790評(píng)論 25贊 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,075評(píng)論 4贊 61
  • 青春似一顆蠶豆， 彎彎的壯實(shí)， 同腎臟一樣充滿活力。 青春中的我們做著各式的夢(mèng)， 夢(mèng)過(guò)清華，夢(mèng)過(guò)富足， 夢(mèng)過(guò)攬我心...
    深秋之吻閱讀 395評(píng)論 0贊 0
  • 姥姥去世已經(jīng)很多年了，每次想起姥姥，總想寫(xiě)點(diǎn)什么，但因?yàn)楦鞣N原因終沒(méi)寫(xiě)成，今天看了一篇文章，引起了我對(duì)姥姥的懷念。...
    梅好時(shí)光er閱讀 515評(píng)論 0贊 2
  • 寶相莊嚴(yán)袈裟傅，佛光普照萬(wàn)民心?？嗫谄判?，救蒼生水火。 清幽深處浮屠現(xiàn)，鐘聲凈寺僧侶意。參禪悟道，領(lǐng)諸佛之心。
    遨游于天際閱讀 204評(píng)論 0贊 6

友情鏈接更多精彩內(nèi)容