iOS仿支付寶輸入支付密碼框

類似於下圖這樣的輸入框,並實現其功能

實現這個頁面,其中輸入框部分為核心問題,僅針對輸入框部分進行解讀 下面代碼只看其功能不看其位置信息

    topTextField = [[UITextField alloc] initWithFrame:CGRectMake(0, wayLine.bottom, passView.width, topLabel.height*2)];
    topTextField.hidden = YES;
    topTextField.keyboardType = UIKeyboardTypePhonePad;
    [topTextField addTarget:self action:@selector(txChange:) forControlEvents:UIControlEventEditingChanged];
    [passView addSubview:topTextField];
    
    
    for (int i = 0; i < 6; i++)
    {
        UITextField *pwdLabel = [[UITextField alloc] initWithFrame:CGRectMake(20+i*(passView.width - 40)/6, wayLine.bottom + 10, (passView.width - 40)/6, (passView.width - 40)/6)];
        pwdLabel.layer.borderColor = [TncTool colorWithHexString:@"d2d2d2"].CGColor;
        pwdLabel.enabled = NO;
        pwdLabel.backgroundColor = [UIColor whiteColor];
        pwdLabel.textAlignment = NSTextAlignmentCenter;//居中
        pwdLabel.secureTextEntry = YES;//設置密碼模式
        pwdLabel.layer.borderWidth = 1;
        [passView addSubview:pwdLabel];
        
        [textMuArray addObject:pwdLabel];
    }

實現topTextField添加的事件

- (void)txChange:(UITextField *)textField{
    NSString *password = textField.text;
    
    if (password.length == textMuArray.count)
    {
        [textField resignFirstResponder];//隱藏鍵盤
    }
    
    for (int i = 0; i < textMuArray.count; i++)
    {
        UITextField *pwdtx = [textMuArray objectAtIndex:i];
        if (i < password.length)
        {
            NSString *pwd = [password substringWithRange:NSMakeRange(i, 1)];
            pwdtx.text = pwd;
        }
        
    }
    
    if (password.length == 6)
    {
        [topTextField resignFirstResponder];
        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"輸入的密碼是" message:password delegate:nil cancelButtonTitle:@"完成" otherButtonTitles:nil, nil];
        [alert show];
    }

}

這樣就解決的輸入框的問題,至於具體的邏輯就要看產品狗的需求了