Material Components - Text Field - IOS - 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