材料组件 - 文本字段 - IOS

Question

我是swift编程的新手，我需要使用浮动占位符输入设计登录页面。我已经使用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 Cocoa Pod。它实现起来要容易得多，您甚至不必编写一行代码。您可以从故事板配置它。您可以从此处获取：https://github.com/Skyscanner/SkyFloatingLabelTextField

Answer 2

要获取动画，您可以创建var类的任何子类的MDCTextInputControllerBase（<-这些类根据MDCTextInputControllerFloatingPlaceholder协议进行确认<-此协议再次对{ {1}}协议）。在UIViewController中创建一个变量，然后通过MDCTextInputController进行初始化，并向您传递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. 类 /子类中任何一个的变量。 em>协议

足够多的谈话。看到一些代码：

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 {} 创建一个新的控制器

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。

结果 ：