ios - 如何在 iOS 中制作动画材料设计 TextField
问题描述
我正在尝试制作具有标签的 textField
我想让它像材料设计 TextField 一样具有动画效果
我尝试使用 CGAffineTransform 和 Auto Layout 的东西......但我无法成功
标签收缩向上移动到textField,textField不是centerX到containerView
我怎样才能制作这个动画。我没有在我的项目中包含 Material pod
解决方案
这是代码。
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)
}
}
推荐阅读
- typescript - TypeScript:如何从另一个界面合并对象?
- html - 如何水平对齐两个父级(1个共同父级和1个唯一)内部的2个div?
- c# - CefSharp WPF 崩溃
- php - 使用带前导零的最大和最小长度的数字范围生成器
- selenium-chromedriver - getText() 和 getFirstSelectedOption().getText() 没有给出预期的文本
- aws-lambda - 使用 AWS lambda 将 CMYK 图像替换为 RGB
- python-3.x - 如何将音频映射到目标文本转录
- javascript - 如何在 react native 和 redux 应用程序中处理 JWT 令牌到期
- curl - 带有 JQ 解析错误的卷曲响应:解析错误:第 1 行第 9 列的数字文字无效
- python - 比较 Datetime 和不可排序的类型