如何实现用于短信验证码的UITextField布局/设计？

Question

我正在尝试实现短信验证码的以下功能。我将如何实现它？在研究了Github中的一堆库之后，没有一个库与行业中广泛使用的这种设计足够相似。

我试着用6个文本字段实现它，但发现了很多问题，除了第一个文本字段用于初始输入之外，阻塞了所有的文本字段，firstResponder的迟缓移动等等，是什么让我怀疑拥有6个文本字段是否真的是最好的方法。

绕过边界是小菜一碟。最难的部分是功能(即光标平滑移动，来回移动，当输入错误时使它们全部变红，等等)

你们觉得怎么样？我如何才能实现这样的行为/功能？

​

​

Answer 1

试试下面的代码。(目前包含4个UITextField，请根据需要修改)

extension ConfirmationCodeViewController: UITextFieldDelegate {

    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        if !(string == "") {
            textField.text = string
            if textField == txtFirst {
                txtSecond.becomeFirstResponder()
            }
            else if textField == txtSecond {
                txtThird.becomeFirstResponder()
            }
            else if textField == txtThird {
                txtForth.becomeFirstResponder()
            }
            else {
                textField.resignFirstResponder()
            }
            return false
        }
        return true
    }

    func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
        if (textField.text?.count ?? 0) > 0 {

        }
        return true
    }
}

Answer 2

尝试此操作(确保已添加textField标记并且已连接委派)

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
    if (string != "") {
        
        if (textField.text == "") {
            textField.text = string
            let nextResponder: UIResponder? = view.viewWithTag(textField.tag + 1)
            if (nextResponder != nil) {
                nextResponder?.becomeFirstResponder()
            }
        }
        return false
    } else {
        
        textField.text = string

        let nextResponder: UIResponder? = view.viewWithTag(textField.tag - 1)
        if (nextResponder != nil) {
            nextResponder?.becomeFirstResponder()
        }
        return false
    }
}

Answer 3

请看一下这个git集线库...

PinCodeTextField

您还可以自定义输入文本字段的数量。