如何向textField类添加标签或为占位符添加动画

Question

我正在尝试在ios中创建自己的Google材质文本字段。当用户开始填写文本字段时，点击时下划线更改颜色，并且占位符文本向上移动。像这样：

我从这里开始关注此提要。

到目前为止，我在文本下方使用了该行，因此，当用户点击该行时，颜色会更改，而当用户在文本字段外点击时，该行会变回原始颜色。

我现在需要弄清楚如何使占位符文本停留在屏幕上并进行动画处理，这是否可能？我不认为这是我的下一个想法，是向我的自定义textField类添加UILabel并对其进行动画处理，但是我无法解决该怎么做？这有可能吗？

自定义文本字段类：

class CustomTextField: UITextField, UITextFieldDelegate{

    let border = CALayer()

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        delegate = self
        createBorder()
    }
    required override init(frame: CGRect) {
        super.init(frame: frame)
        delegate = self
        createBorder()
    }

    func createBorder(){
        let width = CGFloat(2.0)
        border.borderColor = UIColor(red:0.60, green:0.60, blue:0.60, alpha:1.0).cgColor
        border.frame = CGRect(x: 0, y: self.frame.size.height-width, width: self.frame.size.width, height: self.frame.size.height)
        border.borderWidth = width
        self.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }

    func textFieldDidBeginEditing(_ textField: UITextField) {
        clearButtonMode = .whileEditing
        movePlaceholderUp()
    }
    func textFieldDidEndEditing(_ textField: UITextField) {
        movePlaceholderDown()
    }

    func movePlaceholderUp(){
        border.borderColor = UIColor(red:0.87, green:0.30, blue:0.32, alpha:1.0).cgColor        
    }
    func movePlaceholderDown(){
        border.borderColor = UIColor(red:0.60, green:0.60, blue:0.60, alpha:1.0).cgColor
    }
}

Answer 1

如果我的理解是错误的，请纠正我，但是您想为UITextField开始输入正确的时间设置占位符文本的动画吗？如果是这样，那么我认为您在内部添加标签UITextField并在开始键入内容时赋予动画效果方面是正确的。

我做了类似的事情（仅当用户在文本字段内键入内容时，我才对标签进行动画处理），但是您的要求更加容易。

class View: UIView {

  private var usernameLabelYAnchorConstraint: NSLayoutConstraint!
  private var usernameLabelLeadingAnchor: NSLayoutConstraint!

  private lazy var usernameLBL: UILabel! = {
    let label = UILabel()
    label.text = "Username"
    label.translatesAutoresizingMaskIntoConstraints = false
    label.alpha = 0.5
    return label
  }()

  private lazy var usernameTextField: UITextField! = {
    let textLabel = UITextField()
    textLabel.borderStyle = .roundedRect
    textLabel.translatesAutoresizingMaskIntoConstraints = false
    return textLabel
  }()

  init() {
    super.init(frame: UIScreen.main.bounds)
    addSubview(usernameTextField)
    addSubview(usernameLBL)
    backgroundColor = UIColor(white: 1, alpha: 1)
    usernameTextField.delegate = self

    configureViews()
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  func configureViews() {
    let margins = self.layoutMarginsGuide
    usernameLabelYAnchorConstraint = usernameLBL.centerYAnchor.constraint(equalTo: usernameTextField.centerYAnchor, constant: 0)
    usernameLabelLeadingAnchor = usernameLBL.leadingAnchor.constraint(equalTo: usernameTextField.leadingAnchor, constant: 5)

    NSLayoutConstraint.activate([
      usernameTextField.centerXAnchor.constraint(equalTo: margins.centerXAnchor),
      usernameTextField.centerYAnchor.constraint(equalTo: margins.centerYAnchor),
      usernameTextField.widthAnchor.constraint(equalToConstant: 100),
      usernameTextField.heightAnchor.constraint(equalToConstant: 25),

      usernameLabelYAnchorConstraint,
      usernameLabelLeadingAnchor,
      ])
  }

}

extension View: UITextFieldDelegate {

  func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    return textField.resignFirstResponder()
  }

  func textFieldDidBeginEditing(_ textField: UITextField) {
    usernameLabelYAnchorConstraint.constant = -25
    usernameLabelLeadingAnchor.constant = 0
    performAnimation(transform: CGAffineTransform(scaleX: 0.8, y: 0.8))
  }

  func textFieldDidEndEditing(_ textField: UITextField) {
    if let text = textField.text, text.isEmpty {
      usernameLabelYAnchorConstraint.constant = 0
      usernameLabelLeadingAnchor.constant = 5
      performAnimation(transform: CGAffineTransform(scaleX: 1, y: 1))
    }
  }

  fileprivate func performAnimation(transform: CGAffineTransform) {
    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
      self.usernameLBL.transform = transform
      self.layoutIfNeeded()
    }, completion: nil)
  }

}

演示版