At present, most apps are connected with tripartite payment, while some apps choose a recharge mode, allowing users to deposit their own funds in the app, so that users can pay with their wallets when they need to purchase goods in the app, which involves the implementation of payment password popup. Here’s how to implement a simple password payment popover.

UITextfield is the first thing you can think of in an input field, so let’s start with UITextfield.

The first thing you need to do is create a password entry box that you can pop up and type in.

If the input content is set as ciphertext input display based on UItextfield, the displayed effect will be crowded together, so we need to listen to the input content of the input box, and then judge the input content accordingly, and then draw the corresponding small black dot, and display it in the “input box”. In addition to the small black dots, we also need to draw the corresponding wireframe.

Create “Password field”

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); }];Copy the code

Draw small black dots and dividing lines

for(int i = 1; i<7; 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! UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(I *squreWidth, 0, 1, squreWidth)]; lineView.backgroundColor = UIColorFromRGB(0xb2b2b2); [inputView addSubview:lineView]; }}Copy the code

addUITextfield

[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); }];Copy the code

Lazy loading mode:

- (UITextField *)passWordTextField{if(! _passWordTextField) { _passWordTextField = [[UITextField alloc]init]; / / set to pure digital keyboard _passWordTextField keyboardType = UIKeyboardTypeNumberPad; [self.alertWhiteView addSubview:_passWordTextField]; // Default hidden _passWordTextField. Hidden = YES; Add input listener [_passWordTextField addTarget:self Action :@selector(textFieldDidChange:)forControlEvents:UIControlEventEditingChanged];
    }
    return _passWordTextField;
}
Copy the code

Listen for keyboard input

- (void)textFieldDidChange:(UITextField *)textField{if (textField.text.length == 6) {
//        [MBProgressHUD showError:@"Password error. Please try again."];
        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; }}}Copy the code

Here are the key points:

  • Draw your own little black dots insteadpassWordTextField“And add it to a custom” password input box”
  • When the password input box is displayed, letpassWordTextFieldTo be the first responder, hit the keyboard
  • Through the keyboard monitoring events, the content of the corresponding judgment, and take out the corresponding number of small black dots to display the input

other

Many steps are omitted here, and only the most critical ones, such as the creation of other related views, the relevant logic that pops up, and the input callback processing, will not be described here