如何在 iOS 中制作 Animated Material Design TextField

Question

我正在尝试制作带有标签的 textField

我想让它像材料设计 TextField 一样具有动画效果

我尝试使用 CGAffineTransform 和 Auto Layout 的东西...但我无法成功

这就是我想做的。

标签收缩向上移动到textField，并且textField不是centerX到containerView

我怎样才能制作这个动画。我不会在我的项目中包含 Material pod

Answer 1

这里是代码。

 import UIKit

 class InputView: UIView, UITextFieldDelegate {

 private lazy var line: UIImageView = {
    let view = UIImageView()
    view.backgroundColor = .gray
    return view
}()
private lazy var titleLabel: UILabel = {
    let title = UILabel()
    return title
}()
private lazy var textField: UITextField = {
    let field = UITextField()
    field.delegate = self
    return field
}()

var titleBottomAnchor: NSLayoutConstraint?

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

convenience init () {
    self.init(frame:CGRect.zero)
    setupView()
}

required init(coder aDecoder: NSCoder) {
    fatalError("This class does not support NSCoding")
}

func setupView() {
    self.backgroundColor = UIColor.white
    addSubview(line)
    addSubview(titleLabel)
    addSubview(textField)
    setupFrames()
}

func setupFrames() {
    line.translatesAutoresizingMaskIntoConstraints = false
    line.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
    line.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
    line.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    line.heightAnchor.constraint(equalToConstant: 2.5).isActive = true
    
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
    titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 5).isActive = true
    titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 5).isActive = true
    titleLabel.heightAnchor.constraint(equalToConstant: 40).isActive = true
    titleBottomAnchor = titleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0)
    titleBottomAnchor?.isActive = true
    
    textField.translatesAutoresizingMaskIntoConstraints = false
    textField.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 5).isActive = true
    textField.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 5).isActive = true
    textField.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0).isActive = true
    textField.heightAnchor.constraint(equalToConstant: 40).isActive = true
}

var textEditing: Bool = false {
    didSet {
        if textEditing {
            titleBottomAnchor?.constant = -25
            titleLabel.font = UIFont.systemFont(ofSize: 12)
        } else {
            titleBottomAnchor?.constant = 0
            titleLabel.font = UIFont.systemFont(ofSize: 15)
        }
    }
}
var titleText: String {
    get {
        return titleLabel.text ?? ""
    }
    set {
        titleLabel.text = newValue
    }
}

var titleTextColor: UIColor {
    get {
        return titleLabel.textColor
    }
    set {
        titleLabel.textColor = newValue
    }
}

var valueText: String {
    get {
        return textField.text ?? ""
    }
    set {
        textField.text = newValue
    }
}

var backgroundViewColor: UIColor! {
    get {
        return self.backgroundColor
    }
    set {
        self.backgroundColor = newValue
    }
}

var borderRadius: CGFloat! {
    get {
        return self.layer.cornerRadius
    }
    set {
        self.layer.cornerRadius = newValue
    }
}


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

func textFieldDidBeginEditing(_ textField: UITextField) {
    textEditing = true
}

func textFieldDidEndEditing(_ textField: UITextField) {
    if valueText == "" {
        textEditing = false
    } else {
        textEditing = true
    }
  }

 }

在视图控制器中调用这个类

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    let inputView = InputView(frame: CGRect(x: 20, y: 100, width:   self.view.frame.size.width - 40, height: 60))
    inputView.titleText = "ID"
    inputView.titleTextColor = UIColor(white: 0, alpha: 0.6)
    inputView.borderRadius = 5
    self.view.addSubview(inputView)
}


}