自定义浮动文本字段 - 快速

发布于 2025-02-13 12:07:05 字数 1897 浏览 2 评论 0原文

当我开始输入标签时，我想创建一个自定义文本字段，应浮出水面。我知道有一些图书馆可以做到这一点，但我想自己做。我找到了一些有关此博客的博客，但通常是在ViewController中进行的，但是我会在许多页面中使用此格式，因此我认为我应该创建一个自定义文本字段并在需要的地方使用它。我尝试在自定义文本字段中使用代码，但没有发生。

有在ViewController中起作用的代码：

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {
    
    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var textLabel: UILabel!
    @IBOutlet weak var textLabelTop: NSLayoutConstraint!
    @IBOutlet weak var textLabelLeading: NSLayoutConstraint!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        textField.delegate = self
        // Create a padding view for padding on left
        let indentView = UIView(frame: CGRect(x: 0, y: 10, width: 10, height: 20))
        textField.leftView = indentView
        textField.leftViewMode = .always

        // Create a padding view for padding on right
        textField.rightView = UIView(frame: CGRect(x: 0, y: 10, width: 15, height: textField.frame.height))
    }
    func textFieldDidBeginEditing(_ textField: UITextField) {
          floatTitle()
          performAnimation(transform: CGAffineTransform(scaleX: 1, y: 1))
      }
     // This is where we adjust constraint and the label will float to the top
     func floatTitle() {
         textLabel.font = textLabel.font?.withSize(8)
         textLabelTop.constant = 7
         textLabelLeading.constant = 7
      }
      // By adding a little animation
      private func performAnimation(transform: CGAffineTransform) {
          UIView.animate(withDuration: 0.5, delay: 0, options: .curveEaseOut, animations: {
              self.textLabel.transform = transform
              self.view.layoutIfNeeded()
          }, completion: nil)
      }
}

“应该看起来像这样”

如何实现此代码到自定义文本字段？

原文

I want to create a custom text field when I started to input label should float to top-left. I know there is some libraries to make that but I want to do it myself. I found some blog about that but these are generally make that in viewController but I'll use this format in many pages so I think I should create a custom text field and use this where I need. I tried to use codes in my custom text field but nothings happen.

There is codes which working in viewController :

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {
    
    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var textLabel: UILabel!
    @IBOutlet weak var textLabelTop: NSLayoutConstraint!
    @IBOutlet weak var textLabelLeading: NSLayoutConstraint!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        textField.delegate = self
        // Create a padding view for padding on left
        let indentView = UIView(frame: CGRect(x: 0, y: 10, width: 10, height: 20))
        textField.leftView = indentView
        textField.leftViewMode = .always

        // Create a padding view for padding on right
        textField.rightView = UIView(frame: CGRect(x: 0, y: 10, width: 15, height: textField.frame.height))
    }
    func textFieldDidBeginEditing(_ textField: UITextField) {
          floatTitle()
          performAnimation(transform: CGAffineTransform(scaleX: 1, y: 1))
      }
     // This is where we adjust constraint and the label will float to the top
     func floatTitle() {
         textLabel.font = textLabel.font?.withSize(8)
         textLabelTop.constant = 7
         textLabelLeading.constant = 7
      }
      // By adding a little animation
      private func performAnimation(transform: CGAffineTransform) {
          UIView.animate(withDuration: 0.5, delay: 0, options: .curveEaseOut, animations: {
              self.textLabel.transform = transform
              self.view.layoutIfNeeded()
          }, completion: nil)
      }
}

It should be look like this