Material Components - Text Field - IOS

Question

I'm newbie to swift programming, i need to design the login page with floating placeholder input. I have installed the MDCTextInput using POD.

added import

import MaterialComponents.MaterialTextFields

and in viewDidLoad() below code added,

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

i have followed the steps given in Material components in IOS

I am not clear about this line,

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.

I am not getting floating placeholder animation, how to do this in swift4 ? please anybody provide me an idea .

The Material iOS Github Link is: material-components-ios

Answer 1

Use SkyFloatingLabelTextField Cocoa Pod. It's much easier to implement, You don't even have to write a single line of code. You can configure it from the storyboard. You can get it from here: https://github.com/Skyscanner/SkyFloatingLabelTextField

Answer 2

UITextField with floating label:

When you click on the TextField Placeholder will animate to upside with a Floating Label.

Create a Empty Swift Class Name FloatingLabeledTextField and Paste all code in that class.

Usage: Drag UITextField from Object library. Select TextField in Xcode go to Identity Inspector assign class to FloatingLabeledTextField. Thats it.

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)

  }
}

Drag Textfield in ViewController's view and Assign class to FloatingLabeledTextField in Identity Inspector.

Result:

Answer 3

To get the animation, you can create a var of any subclass of MDCTextInputControllerBaseclass ( <- these class confirms to the MDCTextInputControllerFloatingPlaceholder protocol <- This protocol again confirms to the MDCTextInputControllerprotocol). Create a var inside UIViewController and then init with textInput passing you MDCTextField.

WHY?

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.

This means you need to initialise a variable of any of the MDCTextInputControllerBase class / subclass which confirms to the MDCTextInputController protocol

Enough talk. See some code:

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 {}

Note: You need to create a new controller for every MDCTextField or MDCMultilineTextField