如何将标签添加到 textField 类或动画占位符

Posted 2023-02-23

【中文标题】如何将标签添加到 textField 类或动画占位符

【英文标题】：How to add a label to textField class or animate placeholder

【发布时间】：2018-06-09 11:27:44

【问题描述】：

我正在尝试在 ios 中制作自己的谷歌材料文本字段。点击时下划线会改变颜色，而当用户开始填写文本字段时，占位符文本会向上移动。像这样：

我首先关注了这个提要here。

到目前为止，文本下方的线条仍在工作，因此当用户点击该线条会改变颜色，而当用户点击文本字段外部时，线条会变回原始颜色。

我现在需要弄清楚如何使占位符文本留在屏幕上并动画化，这甚至可能吗？我不认为是这样，所以我的下一个想法是在我的自定义 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
    

【问题讨论】：

这是第三方库，但它会帮助你更多； github.com/Skyscanner/SkyFloatingLabelTextField

【参考方案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)
  

Demo