密碼輸入框實現流程簡述

時間 2019-12-08

標籤密碼輸入實現流程簡述简体版

原文原文鏈接

如今的 app 大部分會接入三方支付，同時也有一些 app 會選擇一種充值模式，讓用戶把本身的資金存入 app 內，這樣在用戶須要在 app 中購買商品時，就可以用本身的錢包進行支付，在這裏就會涉及到支付密碼彈窗的實現，下面說一下對一個簡單的密碼支付彈窗實現過程。數組

首先想到輸入框就避不開 UITextfield，因此咱們的思路從 UITextfield 開始發散。bash

首先須要建立一個密碼輸入框，目的是能夠彈起鍵盤，而且輸入內容。app

若是以 UItextfield 爲基礎，將輸入內容設置爲密文輸入顯示的話，展現出來的效果是會把內容擠在一塊兒，因此須要監聽輸入框的輸入內容，而後經過輸入的內容進行相應判斷，而後咱們繪製好對應的小黑點，將其在"輸入框"中顯示。同時除了小黑點以外，咱們還須要繪製對應的線框。ui

建立"密碼輸入框"

UIView *inputView = [[UIView alloc]init];
    inputView.backgroundColor = White_Color;
    inputView.layer.borderWidth = 1;
    inputView.layer.borderColor = UIColorFromRGB(0xb2b2b2).CGColor;
    [self.alertWhiteView addSubview:inputView];
    [inputView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.moneyLabel.mas_bottom).offset(19);
        make.centerX.equalTo(self.alertWhiteView);
        make.width.offset(squreWidth*6);
        make.height.offset(squreWidth);
        make.bottom.offset(-19);
    }];
複製代碼

繪製小黑點以及分割線

for (int i = 1; i<7; i++) {
        //  黑色點
        UIView *spotView = [[UIView alloc]initWithFrame:CGRectMake((i-1)*squreWidth+(squreWidth-dotWidth)/2, (squreWidth-dotWidth)/2, dotWidth, dotWidth)];
        spotView.backgroundColor = UIColorFromRGB(0x262122);
        // 切圓
        spotView.clipsToBounds = YES;
        spotView.layer.cornerRadius = dotWidth/2;
        // 隱藏，輸入時再顯示
        spotView.hidden = YES;
        [inputView addSubview:spotView];
        // 把小黑點按照順序依次加入數組中
        [_dotArray addObject:spotView];
        if (i!=6) {
            // 分割線
            UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(i*squreWidth, 0, 1, squreWidth)];
            lineView.backgroundColor = UIColorFromRGB(0xb2b2b2);
            [inputView addSubview:lineView];
        }
        
    }

複製代碼

添加 `UITextfield`

// 密碼輸入框
    [self.passWordTextField mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.moneyLabel.mas_bottom).offset(19);
        make.centerX.equalTo(self.alertWhiteView);
        make.width.offset(squreWidth*6);
        make.height.offset(squreWidth);
        make.bottom.offset(-19);
    }];

複製代碼

懶加載方式：spa

// 懶加載方式    
- (UITextField *)passWordTextField{
    if (!_passWordTextField) {
        _passWordTextField = [[UITextField alloc]init];
        // 設置爲純數字鍵盤
        _passWordTextField.keyboardType = UIKeyboardTypeNumberPad;
        [self.alertWhiteView addSubview:_passWordTextField];
        // 默認隱藏
        _passWordTextField.hidden = YES;
        // 添加輸入監聽
        [_passWordTextField addTarget:self action:@selector(textFieldDidChange:)forControlEvents:UIControlEventEditingChanged];
    }
    return _passWordTextField;
}
複製代碼

監聽鍵盤輸入內容

// 鍵盤內容監聽
- (void)textFieldDidChange:(UITextField *)textField{
    if (textField.text.length == 6) {
//        [MBProgressHUD showError:@"密碼錯誤，請從新嘗試"];
        if (self.completeBlock) {
            self.completeBlock(textField.text);
            [textField resignFirstResponder];
            textField.text = @"";
            
        }
        
    }
    
    if (textField.text.length == 7) {
        textField.text = [textField.text substringToIndex:1];
        for (int j = 0; j<_dotArray.count; j++) {
            UIView *view = _dotArray[j];
            view.hidden = YES;
        }
    
    }
    if (textField.text.length>0&&textField.text.length<7) {
        for (int j = 0; j<_dotArray.count; j++) {
            UIView *view = _dotArray[j];
  
            if (j<textField.text.length) {
                view.hidden = NO;
            }else{
                view.hidden = YES;
            }
        }
        
    }else{
        for (int j = 0; j<_dotArray.count; j++) {
            UIView *view = _dotArray[j];
            view.hidden = YES;
        }
    }
}
複製代碼