在iOS中开始在TextField中键入时,PlaceHolder会动画

Question

如何设置这种类型的动画UITextField？如今,许多应用都在使用它.

Answer 1

我找到了解决方案.您可以使用多个标签管理此类动画,并将这些标签隐藏到textFieldDidBeginEditing方法中.

如果你想要在你的问题中描述的动画相同,那么请尝试使用第三方存储库UITextField.

• JVFloatLabeledTextField
• UIFloatLabelTextField
• FloatLabelFields

如果您正在寻找UITextView相应的动画,请访问UIFloatLabelTextView存储库.

Answer 2

这个问题可以通过使用多个标签和文本字段来逻辑地解决，稍后我们可以根据需要添加动画。我想用三个图像来解释这个问题，即Img1、Img2和Img3。

\n\n

Img1 指向情节提要，我们在其中设计了界面。这里我们使用了三个标签，每个标签后面跟着 TextField 和 UIView（Textfield 下面的行）。

\n\n

Img2：当应用程序启动时或当我们按下底部的“注册”按钮时，它指向初始屏幕，这会重置屏幕。在此图像中，标签被隐藏，因为文本字段为空白且视图颜色为灰色。

\n\n

Img3：该图像反映了 Textfield 的编辑。当我们开始编辑文本字段（这里是第一个，即名称）时，标签显示，文本字段的大小减小，占位符更改并且视图颜色更改为黑色。

\n\n

我们还需要记住一件事，当我们停止编辑任何文本字段并且它仍然为空时，请将其属性设置为原始。

\n\n

我正在为这个问题添加代码，这是我在面试中被要求作为作业的。

\n\n

import UIKit\n\nclass FloatingLabelViewController: UIViewController, UITextFieldDelegate, UINavigationControllerDelegate {\n\n\n  //UITextFieldDelegate - protocol defines methods that you use to manage the editing and validation of text in a UITextField object. All of the methods of this protocol are optional.\n\n  //UINavigationControllerDelegate - Use a navigation controller delegate (a custom object that implements this protocol) to modify behavior when a view controller is pushed or popped from the navigation stack of a UINavigationController object.\n\n  @IBOutlet weak var NameLbl: UILabel!\n  @IBOutlet weak var EmailLbl: UILabel!\n  @IBOutlet weak var PasswordLbl: UILabel!\n\n  @IBOutlet weak var NameTxf: UITextField!\n  @IBOutlet weak var EmailTxf: UITextField!\n  @IBOutlet weak var PasswordTxf: UITextField!\n\n  @IBOutlet weak var SignUpBtn: UIButton!\n\n  @IBOutlet weak var NameView: UIView!\n  @IBOutlet weak var EmailView: UIView!\n  @IBOutlet weak var PasswordView: UIView!\n\n\n  override func viewDidLoad() {\n    super.viewDidLoad()\n\n\n    NameTxf.delegate = self\n    EmailTxf.delegate = self\n    PasswordTxf.delegate = self\n\n    self.property()\n\n    //black  is varaiable here\n    //setTitleColor - Sets the color of the title to use for the specified state\n    //var layer - The view\xe2\x80\x99s Core Animation layer used for rendering. this propert is never nil\n    //cg color - Quartz color refernce\n\n    SignUpBtn.backgroundColor = UIColor.black\n    SignUpBtn.setTitleColor(UIColor.white, for: .normal)\n    SignUpBtn.layer.borderWidth = 1\n    SignUpBtn.layer.borderColor = UIColor.black.cgColor\n\n    //Tap guesture recognizer to hide keyboard\n    let tap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(FloatingLabelViewController.dismissKeyboard))\n    view.addGestureRecognizer(tap)\n\n    // UITapGestureRecognizer - UITapGestureRecognizer is a concrete subclass of UIGestureRecognizer that looks for single or multiple taps. For the gesture to be recognized, the specified number of fingers must tap the view a specified number of times.\n\n\n  }\n\n  override func didReceiveMemoryWarning() {\n    super.didReceiveMemoryWarning()\n\n  }\n\n  //textFieldShouldReturn - Asks the delegate if the text field should process the pressing of the return button. The text field calls this method whenever the user taps the return button.  YES if the text field should implement its default behavior for the return button; otherwise, NO.\n\n  // endEditing - Causes the view (or one of its embedded text fields) to resign the first responder status.\n\n  func textFieldShouldReturn(_ textField: UITextField) -> Bool {\n    self.view.endEditing(true)\n    return false\n  }\n\n\n  func dismissKeyboard() {\n    //Causes the view (or one of its embedded text fields) to resign the first responder status.\n    view.endEditing(true)\n  }\n\n  //When user Starts Editing the textfield\n  // textFieldDidBeginEditing - Tells the delegate that editing began in the specified text field\n\n  func textFieldDidBeginEditing(_ textField: UITextField) {\n\n    if textField == self.NameTxf\n    {\n\n        self.NameTxf.font = UIFont.italicSystemFont(ofSize: 15)\n        self.NameLbl.isHidden = false\n        self.NameLbl.text = self.NameTxf.placeholder\n        self.NameTxf.placeholder = "First Last"\n        NameView.backgroundColor = UIColor.black.withAlphaComponent(0.5)\n\n\n    }\n\n    else if textField == self.EmailTxf\n    {\n        self.EmailTxf.font = UIFont.italicSystemFont(ofSize: 15)\n        self.EmailLbl.isHidden = false\n        self.EmailLbl.text = self.EmailTxf.placeholder\n        self.EmailTxf.placeholder = "abc@gmail.com"\n        EmailView.backgroundColor = UIColor.black.withAlphaComponent(0.5)\n\n\n    }\n\n    else if textField == self.PasswordTxf\n    {\n        self.PasswordTxf.font = UIFont.italicSystemFont(ofSize: 15)\n        self.PasswordLbl.isHidden = false\n        self.PasswordLbl.text = self.PasswordTxf.placeholder\n        self.PasswordTxf.placeholder = "........."\n        PasswordView.backgroundColor = UIColor.black.withAlphaComponent(0.5)\n\n\n    }\n\n\n  }\n\n\n  //When User End editing the textfield.\n\n  // textFieldDidEndEditing - Tells the delegate that editing stopped for the specified text field.\n\n  func textFieldDidEndEditing(_ textField: UITextField) {\n\n\n    //Checkes if textfield is empty or not after after user ends editing.\n    if textField == self.NameTxf\n    {\n        if self.NameTxf.text == ""\n        {\n        self.NameTxf.font = UIFont.italicSystemFont(ofSize: 25)\n        self.NameLbl.isHidden = true\n        self.NameTxf.placeholder = "Name"\n        NameView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5)\n\n\n\n\n    }\n\n\n    }\n\n\n    else if textField == self.EmailTxf\n    {\n        if self.EmailTxf.text == ""\n        {\n            self.EmailTxf.font = UIFont.italicSystemFont(ofSize: 25)\n            self.EmailLbl.isHidden = true\n            self.EmailTxf.placeholder = "Email"\n            EmailView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5)\n\n\n\n        }\n\n\n    }\n\n\n\n    else if textField == self.PasswordTxf\n    {\n        if self.PasswordTxf.text == ""\n        {\n            self.PasswordTxf.font = UIFont.italicSystemFont(ofSize: 25)\n            self.PasswordLbl.isHidden = true\n            self.PasswordTxf.placeholder = "Password"\n            PasswordView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5)\n\n\n        }\n\n\n    }\n\n\n  }\n\n  //Action on SingUp button Clicked.\n  @IBAction func signupClicked(_ sender: Any) {\n\n      self.property()\n      self.dismissKeyboard() //TO dismiss the Keyboard on the click of SIGNUP button.\n\n  }\n\n\n  //Function to set the property of Textfields, Views corresponding to TextFields and Labels.\n  func property(){\n\n    NameLbl.isHidden =  true\n    EmailLbl.isHidden = true\n    PasswordLbl.isHidden = true\n\n    NameTxf.text = ""\n    EmailTxf.text = ""\n    PasswordTxf.text = ""\n\n    NameTxf.placeholder = "Name"\n    EmailTxf.placeholder = "Email"\n    PasswordTxf.placeholder = "Password"\n\n\n    self.NameTxf.font = UIFont.italicSystemFont(ofSize: 25)\n    self.EmailTxf.font = UIFont.italicSystemFont(ofSize: 25)\n    self.PasswordTxf.font = UIFont.italicSystemFont(ofSize: 25)\n\n    EmailTxf.keyboardType = UIKeyboardType.emailAddress\n    PasswordTxf.isSecureTextEntry = true\n    NameTxf.autocorrectionType = .no\n    EmailTxf.autocorrectionType = .no\n\n    NameView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5)\n    EmailView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5)\n    PasswordView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5)   \n  }\n}\n

\n\n

\n\n

\n

Answer 3

对于Swift 4.0 和 4.2

检查此库中的浮动文本字段

https://github.com/hasnine/iOSUtilitiesSource

代码：

enum placeholderDirection: String {
    case placeholderUp = "up"
    case placeholderDown = "down"

}
public class IuFloatingTextFiledPlaceHolder: UITextField {
    var enableMaterialPlaceHolder : Bool = true
    var placeholderAttributes = NSDictionary()
    var lblPlaceHolder = UILabel()
    var defaultFont = UIFont()
    var difference: CGFloat = 22.0
    var directionMaterial = placeholderDirection.placeholderUp
    var isUnderLineAvailabe : Bool = true
    override init(frame: CGRect) {
        super.init(frame: frame)
        Initialize ()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        Initialize ()
    }
    func Initialize(){
        self.clipsToBounds = false
        self.addTarget(self, action: #selector(IuFloatingTextFiledPlaceHolder.textFieldDidChange), for: .editingChanged)
        self.EnableMaterialPlaceHolder(enableMaterialPlaceHolder: true)
        if isUnderLineAvailabe {
            let underLine = UIImageView()
            underLine.backgroundColor = UIColor.init(red: 197/255.0, green: 197/255.0, blue: 197/255.0, alpha: 0.8)
            //            underLine.frame = CGRectMake(0, self.frame.size.height-1, self.frame.size.width, 1)
            underLine.frame = CGRect(x: 0, y: self.frame.size.height-1, width : self.frame.size.width, height : 1)

            underLine.clipsToBounds = true
            self.addSubview(underLine)
        }
        defaultFont = self.font!

    }
    @IBInspectable var placeHolderColor: UIColor? = UIColor.lightGray {
        didSet {
            self.attributedPlaceholder = NSAttributedString(string: self.placeholder! as String ,
                                                            attributes:[NSAttributedString.Key.foregroundColor: placeHolderColor!])
        }
    }
    override public var placeholder:String?  {
        didSet {
            //  NSLog("placeholder = \(placeholder)")
        }
        willSet {
            let atts  = [NSAttributedString.Key.foregroundColor.rawValue: UIColor.lightGray, NSAttributedString.Key.font: UIFont.labelFontSize] as! [NSAttributedString.Key : Any]
            self.attributedPlaceholder = NSAttributedString(string: newValue!, attributes:atts)
            self.EnableMaterialPlaceHolder(enableMaterialPlaceHolder: self.enableMaterialPlaceHolder)
        }

    }
    override public var attributedText:NSAttributedString?  {
        didSet {
            //  NSLog("text = \(text)")
        }
        willSet {
            if (self.placeholder != nil) && (self.text != "")
            {
                let string = NSString(string : self.placeholder!)
                self.placeholderText(string)
            }

        }
    }
    @objc func textFieldDidChange(){
        if self.enableMaterialPlaceHolder {
            if (self.text == nil) || (self.text?.count)! > 0 {
                self.lblPlaceHolder.alpha = 1
                self.attributedPlaceholder = nil
                self.lblPlaceHolder.textColor = self.placeHolderColor
                self.lblPlaceHolder.frame.origin.x = 0 ////\\
                let fontSize = self.font!.pointSize;
                self.lblPlaceHolder.font = UIFont.init(name: (self.font?.fontName)!, size: fontSize-3)
            }
            UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 1, options: .curveEaseInOut, animations: {() -> Void in
                if (self.text == nil) || (self.text?.count)! <= 0 {
                    self.lblPlaceHolder.font = self.defaultFont
                    self.lblPlaceHolder.frame = CGRect(x: self.lblPlaceHolder.frame.origin.x+10, y : 0, width :self.frame.size.width, height : self.frame.size.height)
                }
                else {
                    if self.directionMaterial == placeholderDirection.placeholderUp {
                        self.lblPlaceHolder.frame = CGRect(x : self.lblPlaceHolder.frame.origin.x, y : -self.difference, width : self.frame.size.width, height : self.frame.size.height)
                    }else{
                        self.lblPlaceHolder.frame = CGRect(x : self.lblPlaceHolder.frame.origin.x, y : self.difference, width : self.frame.size.width, height : self.frame.size.height)
                    }

                }
            }, completion: {(finished: Bool) -> Void in
            })
        }
    }
    func EnableMaterialPlaceHolder(enableMaterialPlaceHolder: Bool){
        self.enableMaterialPlaceHolder = enableMaterialPlaceHolder
        self.lblPlaceHolder = UILabel()
        self.lblPlaceHolder.frame = CGRect(x: 0, y : 0, width : 0, height :self.frame.size.height)
        self.lblPlaceHolder.font = UIFont.systemFont(ofSize: 10)
        self.lblPlaceHolder.alpha = 0
        self.lblPlaceHolder.clipsToBounds = true
        self.addSubview(self.lblPlaceHolder)
        self.lblPlaceHolder.attributedText = self.attributedPlaceholder
        //self.lblPlaceHolder.sizeToFit()
    }
    func placeholderText(_ placeholder: NSString){
        let atts  = [NSAttributedString.Key.foregroundColor: UIColor.lightGray, NSAttributedString.Key.font: UIFont.labelFontSize] as [NSAttributedString.Key : Any]
        self.attributedPlaceholder = NSAttributedString(string: placeholder as String , attributes:atts)
        self.EnableMaterialPlaceHolder(enableMaterialPlaceHolder: self.enableMaterialPlaceHolder)
    }
    override public func becomeFirstResponder()->(Bool){
        let returnValue = super.becomeFirstResponder()
        return returnValue
    }
    override public func resignFirstResponder()->(Bool){
        let returnValue = super.resignFirstResponder()
        return returnValue
    }

    override public func layoutSubviews() {
        super.layoutSubviews()
    }
}