材料组件 - 文本字段 - IOS

Question

我是快速编程的新手,我需要设计具有浮动占位符输入的登录页面.我已经使用POD安装了MDCTextInput.

增加了进口

import MaterialComponents.MaterialTextFields

并在viewDidLoad()下面添加了代码,

companyID.placeholder = "Company ID"
companyID.placeholderLabel.highlightedTextColor = UIColor.white
companyID.placeholderLabel.textColor = UIColor.white
companyID.underline?.color = UIColor.white
companyID.delegate = self

我已按照IOS中的材料组件中给出的步骤进行操作

我不清楚这条线,

To achieve the animations and presentations defined by the guidelines (floating placeholders, character counts), a controller that conforms to protocol MDCTextInputController must be initialized to manage the text field.

我没有得到浮动占位符动画,如何在swift4中执行此操作？请有人给我一个想法.

Material iOS Github链接是: material-components-ios

Answer 1

使用SkyFloatingLabelTextField可可豆荚。实施起来容易得多，您甚至不必编写任何代码。您可以从情节提要中对其进行配置。您可以从这里获取：https : //github.com/Skyscanner/SkyFloatingLabelTextField

Answer 2

带有浮动标签的 UITextField：

当您单击“文本字段”时，占位符将通过浮动标签动画到上方。

创建一个空的 Swift 类名称 FloatingLabeledTextField 并将所有代码粘贴到该类中。

用法： 从对象库中拖拽UITextField。在 Xcode 中选择 TextField，转到 Identity Inspector 将类分配给 FloatingLabeledTextField。就是这样。

import UIKit

class FloatingLabeledTextField: UITextField {

  var floatingLabel: UILabel!
  var placeHolderText: String?

  var floatingLabelColor: UIColor = UIColor.blue {
    didSet {
        self.floatingLabel.textColor = floatingLabelColor
    }

   var floatingLabelFont: UIFont = UIFont.systemFont(ofSize: 15) {

      didSet {
        self.floatingLabel.font = floatingLabelFont
      }
   }

   var floatingLabelHeight: CGFloat = 30

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

   required init?(coder aDecoder: NSCoder) {

    super.init(coder: aDecoder)

    let flotingLabelFrame = CGRect(x: 0, y: 0, width: frame.width, height: 0)

    floatingLabel = UILabel(frame: flotingLabelFrame)
    floatingLabel.textColor = floatingLabelColor
    floatingLabel.font = floatingLabelFont
    floatingLabel.text = self.placeholder

    self.addSubview(floatingLabel)
    placeHolderText = placeholder

    NotificationCenter.default.addObserver(self, selector: #selector(textFieldDidBeginEditing), name: UITextField.textDidBeginEditingNotification, object: self)

     NotificationCenter.default.addObserver(self, selector: #selector(textFieldDidEndEditing), name: UITextField.textDidEndEditingNotification, object: self)


}

@objc func textFieldDidBeginEditing(_ textField: UITextField) {

    if self.text == "" {
        UIView.animate(withDuration: 0.3) {
            self.floatingLabel.frame = CGRect(x: 0, y: -self.floatingLabelHeight, width: self.frame.width, height: self.floatingLabelHeight)
        }
        self.placeholder = ""
    }
}

@objc func textFieldDidEndEditing(_ textField: UITextField) {

    if self.text == "" {
        UIView.animate(withDuration: 0.1) {
           self.floatingLabel.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: 0)
        }
        self.placeholder = placeHolderText
    }
}

deinit {

    NotificationCenter.default.removeObserver(self)

  }
}

将 Textfield 拖到 ViewController 的视图中，并将类分配给 Identity Inspector 中的 FloatingLabeledTextField。

结果：