具有不连续底部边框的自定义UITextfield

凯文

这是我想要实现的结果

我现在正在研究UITextfield。我希望知道如何为UITextfield添加四个不连续的底部边框,以及如何使输入数字之间的间距更大以使其分别恰好适合四行。此外,如果可能,当用户在该行上输入数字时,如何使该行变为黑色(而其他行保持灰色)?非常感谢!

AamirR

使用UITextField的以下子类,并在情节提要中或以编程方式为每个数字创建文本字段。

请注意,每个文本字段都必须设置一个标签,例如

第一位: textField1.tag=1

第二位数: textField1.tag=2

第三位数: textField1.tag=3

第四位数: textField1.tag=4

class CustomTextField: UITextField {
    private let normalStateColor = UIColor.lightGray.cgColor
    private let focusStateColor = UIColor.black.cgColor

    private let border = CALayer()
    private let borderHeight: CGFloat = 4.0

    // MARK:- Init
    required init?(coder aDecoder: NSCoder) {
        super.init(coder:aDecoder)
        setup()
    }

    override init(frame:CGRect) {
        super.init(frame:frame)
        setup()
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        setup()
    }
    // MARK:- Overrides
    override func layoutSubviews() {
        super.layoutSubviews()

        let size = self.frame.size
        self.border.frame = CGRect(x: 0, y: size.height - borderHeight, width: size.width, height: borderHeight)
    }

    override func willMove(toSuperview newSuperview: UIView!) {
        guard newSuperview != nil else {
            NotificationCenter.default.removeObserver(self)
            return
        }

        NotificationCenter.default.addObserver(self, selector: #selector(beginEdit),
                                               name: UITextField.textDidBeginEditingNotification, object: self)
        NotificationCenter.default.addObserver(self, selector: #selector(endEdit),
                                               name: UITextField.textDidEndEditingNotification, object: self)
    }

    @objc func beginEdit() {
        border.backgroundColor = self.focusStateColor
    }

    @objc func endEdit() {
        border.backgroundColor = self.normalStateColor
    }

    private func setup() {
        border.backgroundColor = self.normalStateColor
        textAlignment = .center
        borderStyle = .none
        layer.addSublayer(border)
        delegate = self
    }
}

extension CustomTextField: UITextFieldDelegate {

    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        if textField.text!.count < 1  && string.count > 0 {
            textField.text = string
            textField.superview?.viewWithTag(textField.tag + 1)?.becomeFirstResponder()
            return false
        } else if textField.text!.count >= 1  && string.count == 0 {
            textField.text = ""
            textField.superview?.viewWithTag(textField.tag - 1)?.becomeFirstResponder()
            return false
        }

        return true
    }
}

那产生

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章