Пользовательское поле UIText с прерывистыми нижними границами

Question

Сейчас я работаю над UITextfield. Я надеюсь узнать, как добавить четыре прерывистых нижних границы в поле UIText и как увеличить расстояние между входными цифрами, чтобы они поместились точно в четыре строки соответственно. Кроме того, если возможно, как сделать линию черной (в то время как другие линии остаются серыми), когда пользователи вводят цифры в этой строке? Большое вам спасибо!

Answer 1

Используйте следующий подкласс UITextField и создайте текстовое поле для каждой цифры в раскадровке или программно.

Обратите внимание, что в каждом текстовом поле должен быть установлен тег, например

1-я цифра: textField1.tag=1

2-я цифра: textField1.tag=2

3-я цифра: 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
    }
}

что дает

Answer 2

проверить это ..

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.
    }

}