Material 组件 - 文本字段 - 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

我已按照 Material 组件中给出的步骤进行操作 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 中执行此操作？请任何人给我一个想法。

MaterialiOSGithubLink是： material-components-ios

Answer 1

使用 SkyFloatingLabelTextField Cocoa Pod。实现起来要容易得多，您甚至不必编写一行代码。您可以从情节提要中配置它。您可以从这里获取：https://github.com/Skyscanner/SkyFloatingLabelTextField

Answer 2

要获得动画，您可以创建 MDCTextInputControllerBaseclass 的任何子 class 的 var（<- 这些 class 确认MDCTextInputControllerFloatingPlaceholder 协议 <- 此协议再次确认 MDCTextInputController 协议）。在 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 class / subclass 确认 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 Class 名称 FloatingLabeledTextField 并将所有代码粘贴到其中 class。

用法： 从对象库中拖动 UITextField。 Select Xcode 中的 TextField 转到 Identity Inspector 将 class 分配给 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 并将 class 分配给 Identity Inspector 中的 FloatingLabeledTextField。

结果:

Material 组件 - 文本字段 - IOS

Material Components - Text Field - IOS

ios

material-design

swift3