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

Question

我现在正在处理 UITextfield。我希望知道如何向 UITextfield 添加四个不连续的底部边框，以及如何使输入数字之间的 space 变大以使其分别正好适合四行。此外，如果可能的话，当用户在该行输入数字时，如何使该行变为黑色（而其他行保持灰色）？非常感谢！

Answer 1

检查这个..

ViewController.swift

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {

    @IBOutlet weak var txtOne: UITextField!
    @IBOutlet weak var txtTwo: UITextField!
    @IBOutlet weak var txtThree: UITextField!
    @IBOutlet weak var txtFour: UITextField!

    @IBOutlet weak var vwFour: UIView!
    @IBOutlet weak var vwThree: UIView!
    @IBOutlet weak var vwTwo: UIView!
    @IBOutlet weak var vwOne: UIView!


    func textFieldDidBeginEditing(_ textField: UITextField) {
        if textField == txtOne {
            vwOne.backgroundColor = .black
            vwTwo.backgroundColor = .lightGray
            vwThree.backgroundColor = .lightGray
            vwFour.backgroundColor = .lightGray
        } else if textField == txtTwo {
            vwTwo.backgroundColor = .black
            vwOne.backgroundColor = .lightGray
            vwThree.backgroundColor = .lightGray
            vwFour.backgroundColor = .lightGray
        } else if textField == txtThree {
            vwThree.backgroundColor = .black
            vwTwo.backgroundColor = .lightGray
            vwOne.backgroundColor = .lightGray
            vwFour.backgroundColor = .lightGray
        } else {
            vwFour.backgroundColor = .black
            vwTwo.backgroundColor = .lightGray
            vwThree.backgroundColor = .lightGray
            vwOne.backgroundColor = .lightGray
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

}

Answer 2

使用 UITextField 的以下子类，并在故事板中或以编程方式为每个数字创建文本字段。

注意每个文本框都要设置一个标签，比如

第一个数字：textField1.tag=1

第二位数字：textField1.tag=2

第三个数字：textField1.tag=3

第 4 位数：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
    }
}

产量

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

Custom UITextfield with discontinuous bottom borders

uitextfield

uitextinput

swift