摘要：首先想到輸入框就避不開(kāi)，所以我們的思路從開(kāi)始發(fā)散。首先需要?jiǎng)?chuàng)建一個(gè)密碼輸入框，目的是可以彈起鍵盤(pán)，并且輸入內(nèi)容。

現(xiàn)在的 app 大部分會(huì)接入三方支付，同時(shí)也有一些 app 會(huì)選擇一種充值模式，讓用戶把自己的資金存入 app 內(nèi)，這樣在用戶需要在 app 中購(gòu)買(mǎi)商品時(shí)，就能夠用自己的錢(qián)包進(jìn)行支付，在這里就會(huì)涉及到支付密碼彈窗的實(shí)現(xiàn)，下面說(shuō)一下對(duì)一個(gè)簡(jiǎn)單的密碼支付彈窗實(shí)現(xiàn)過(guò)程。

首先想到輸入框就避不開(kāi) UITextfield，所以我們的思路從 UITextfield 開(kāi)始發(fā)散。

首先需要?jiǎng)?chuàng)建一個(gè)密碼輸入框，目的是可以彈起鍵盤(pán)，并且輸入內(nèi)容。

如果以 UItextfield 為基礎(chǔ)，將輸入內(nèi)容設(shè)置為密文輸入顯示的話，展示出來(lái)的效果是會(huì)把內(nèi)容擠在一起，所以需要監(jiān)聽(tīng)輸入框的輸入內(nèi)容，然后通過(guò)輸入的內(nèi)容進(jìn)行相應(yīng)判斷，然后我們繪制好對(duì)應(yīng)的小黑點(diǎn)，將其在"輸入框"中顯示。同時(shí)除了小黑點(diǎn)之外，我們還需要繪制對(duì)應(yīng)的線框。

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++) {
        //  黑色點(diǎn)
        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;
        // 隱藏，輸入時(shí)再顯示
        spotView.hidden = YES;
        [inputView addSubview:spotView];
        // 把小黑點(diǎn)按照順序依次加入數(shù)組中
        [_dotArray addObject:spotView];
        if (i!=6) {
            // 分割線
            UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(i*squreWidth, 0, 1, squreWidth)];
            lineView.backgroundColor = UIColorFromRGB(0xb2b2b2);
            [inputView addSubview:lineView];
        }
        
    }

// 密碼輸入框
    [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);
    }];

懶加載方式：

    
// 懶加載方式    
- (UITextField *)passWordTextField{
    if (!_passWordTextField) {
        _passWordTextField = [[UITextField alloc]init];
        // 設(shè)置為純數(shù)字鍵盤(pán)
        _passWordTextField.keyboardType = UIKeyboardTypeNumberPad;
        [self.alertWhiteView addSubview:_passWordTextField];
        // 默認(rèn)隱藏
        _passWordTextField.hidden = YES;
        // 添加輸入監(jiān)聽(tīng)
        [_passWordTextField addTarget:self action:@selector(textFieldDidChange:)forControlEvents:UIControlEventEditingChanged];
    }
    return _passWordTextField;
}

// 鍵盤(pán)內(nèi)容監(jiān)聽(tīng)
- (void)textFieldDidChange:(UITextField *)textField{
    if (textField.text.length == 6) {
//        [MBProgressHUD showError:@"密碼錯(cuò)誤，請(qǐng)重新嘗試"];
        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 (jelse{
                view.hidden = YES;
            }
        }
        
    }else{
        for (int j = 0; j<_dotArray.count; j++) {
            UIView *view = _dotArray[j];
            view.hidden = YES;
        }
    }
}

自己繪制小黑點(diǎn)代替 passWordTextField 的內(nèi)容，并添加到自定義的"密碼輸入框"中

當(dāng)彈出密碼輸入框時(shí)，讓 passWordTextField 變成第一響應(yīng)者，彈起鍵盤(pán)

通過(guò)鍵盤(pán)的監(jiān)聽(tīng)事件，內(nèi)容進(jìn)行相應(yīng)判斷，以及取出對(duì)應(yīng)數(shù)量的小黑點(diǎn)來(lái)進(jìn)行輸入的展示

在這里省略了很多步驟，只拿最關(guān)鍵的過(guò)程來(lái)描述，比如其他相關(guān)視圖的創(chuàng)建，彈起的相關(guān)邏輯，以及輸入完畢的回調(diào)處理，在這里就不一一贅述了