材质组件 - 文本字段 - 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 中的 Material components 中给出的步骤进行操作

这条线我不太清楚，

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 Cocoa Pod。它更容易实现，您甚至不必编写一行代码。您可以从情节提要中对其进行配置。你可以从这里得到它：https://github.com/Skyscanner/SkyFloatingLabelTextField

Answer 2

要获得动画，您可以创建MDCTextInputControllerBaseclass 的任何子类的var（MDCTextInputControllerFloatingPlaceholder 协议MDCTextInputControllerprotocol）。在 UIViewController 中创建一个 var，然后使用 textInput 将 MDCTextField 传递给您。

为什么？

But 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.

这意味着您需要初始化任何MDCTextInputControllerBase 类 / 子类的变量，它与MDCTextInputController 协议

说得够多了。查看一些代码：

final class SomeVC: UIViewController {

           /* This is a subclass of MDCTextInputControllerBase */
    var textFieldControllerFloating = MDCTextInputControllerUnderline()

    /* For multiple textField */
    var arrayOftextFieldControllerFloating = [MDCTextInputControllerUnderline]()

    override func viewDidLoad() {
      let textFieldFloating = MDCTextField()
      self.view.addSubview(textFieldFloating)

      textFieldFloating.placeholder = "Full Name"
      textFieldFloating.delegate = self

      textFieldControllerFloating = MDCTextInputControllerUnderline(textInput: textFieldFloating) // This will animate the textfield's place holder

    /* If you have multiple textField */
      arrayOftextFieldControllerFloating.append(MDCTextInputControllerUnderline(textInput: textFieldFloating1)) 
      arrayOftextFieldControllerFloating.append(MDCTextInputControllerUnderline(textInput: textFieldFloating2))
      arrayOftextFieldControllerFloating.append(MDCTextInputControllerUnderline(textInput: textFieldFloating3))
     // Must have a MDCTextField / MDCMultilineTextField as textInput
    }
}
extension SomeVC: UITextFieldDelegate {}

注意：您需要为每个MDCTextField 或MDCMultilineTextField 创建一个新控制器

Answer 3

带有浮动标签的UITextField：

当您单击 TextField 占位符时，将使用浮动标签进行动画处理。

创建一个空的 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)

  }
}

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

结果：