Text fields allow users to input text into your app. They are a direct connection to your users' thoughts and intentions via on-screen, or physical, keyboard. The Material Design Text Fields take the familiar element to a new level by adding useful animations, character counts, helper text, error states, and styles.
To add this component to your Xcode project using CocoaPods, add the following to your Podfile:
pod 'MaterialComponents/TextFields'
Then run the following command:
pod install
Text Fields provides both a single-line version based on UITextField and a multi-line version backed by UITextView as well as objects that customize the text fields' behavior and appearance called ‘Text Input Controllers’.
The actual components (MDCTextField & MDCMultilineTextField) are ‘dumb’: they do not have styles, animations, or advanced features. They are designed to be controlled from the outside, via very liberal public API, with a text input controller.
One text input controller is included (MDCTextInputControllerDefault) manipulates the exposed elements of the text field to make placeholders float.
There is also a text input controller for full width forms (MDCTextInputControllerFullWidth). Like MDCTextInputControllerDefault, it also handles errors and character counting.
Customize the included text input controllers via their parameters or create your own to express your app's brand identity thru typography, color, and animation: if the placeholder should move, add constraints or change the frame. If the trailing label should display validation information, change the text and color it.
This pattern is not a delegation or data source-like relationship but rather a controller-to-view relationship: the text field does not require nor expect to be served data or instruction but is instead malleable and easily influenced by outside interference.
This is a single line text input. It‘s subclassed from UITextField and supports all the features you’d expect from a UITextField:
as well as new features:
This is a multiline line text input. It's subclassed from UIView with an embedded UITextView. It supports all the features of the single line text field and UITextView plus:
This class holds all the ‘magic’ logic necessary to make the naturally ‘dumb’ text field and text view behave with:
Similar to the default text input controller but optimized for full width forms like emails.
A text field that conforms to MDCTextInput can be added to a view hierarchy the same way UITextField and UIView are. 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.
NOTE: Expect to interact with both the text field (for the traditional API) and the controller (for changes affecting the presentation and state).
Before using Text Fields, you'll need to import it:
import MaterialComponents.MaterialTextFields
#import "MaterialTextFields.h"
let textFieldFloating = MDCTextField() scrollView.addSubview(textFieldFloating) textFieldFloating.placeholder = "Full Name" textFieldFloating.delegate = self textFieldControllerFloating = MDCTextInputControllerDefault(input: textFieldFloating) // Hold on as a property
MDCTextField *textFieldFloating = [[MDCTextField alloc] init]; [self.scrollView addSubview:textFieldFloating]; textFieldFloating.placeholder = @"Full Name"; textFieldFloating.delegate = self; self.textFieldControllerFloating = [[MDCTextInputControllerDefault alloc] initWithTextInput:textFieldFloating];
// First the text field component is setup just like a UITextField let textFieldDefaultCharMax = MDCTextField() scrollView.addSubview(textFieldDefaultCharMax) textFieldDefaultCharMax.placeholder = "Enter up to 50 characters" textFieldDefaultCharMax.delegate = self // Second the controller is created to manage the text field textFieldControllerDefaultCharMax = MDCTextInputControllerDefault(input: textFieldDefaultCharMax) // Hold on as a property textFieldControllerDefaultCharMax.characterCountMax = 50 textFieldControllerDefaultCharMax.isFloatingEnabled = false
// First the text field component is setup just like a UITextField MDCTextField *textFieldDefaultCharMax = [[MDCTextField alloc] init]; [self.scrollView addSubview:textFieldDefaultCharMax]; textFieldDefaultCharMax.placeholder = @"Enter up to 50 characters"; textFieldDefaultCharMax.delegate = self; // Second the controller is created to manage the text field self.textFieldControllerDefaultCharMax = [[MDCTextInputControllerDefault alloc] initWithTextInput: textFieldDefaultCharMax]; self.textFieldControllerDefaultCharMax.characterCountMax = 50; self.textFieldControllerDefaultCharMax.floatingEnabled = NO;
let textFieldFloating = MDCMultilineTextField() scrollView.addSubview(textFieldFloating) textFieldFloating.placeholder = "Full Name" textFieldFloating.delegate = self textFieldControllerFloating = MDCTextInputControllerDefault(input: textFieldFloating) // Hold on as a property
MDCMultilineTextField *textFieldFloating = [[MDCMultilineTextField alloc] init]; [self.scrollView addSubview:textFieldFloating]; textFieldFloating.placeholder = @"Full Name"; textFieldFloating.delegate = self; self.textFieldControllerFloating = [[MDCTextInputControllerDefault alloc] initWithTextInput:textFieldFloating];
// First the text field component is setup just like a UITextField let textFieldDefaultCharMax = MDCMultilineTextField() scrollView.addSubview(textFieldDefaultCharMax) textFieldDefaultCharMax.placeholder = "Enter up to 50 characters" textFieldDefaultCharMax.delegate = self // Second the controller is created to manage the text field textFieldControllerDefaultCharMax = MDCTextInputControllerDefault(input: textFieldDefaultCharMax) // Hold on as a property textFieldControllerDefaultCharMax.characterCountMax = 50 textFieldControllerDefaultCharMax.isFloatingEnabled = false
// First the text field component is setup just like a UITextField MDCMultilineTextField *textFieldDefaultCharMax = [[MDCMultilineTextField alloc] init]; [self.scrollView addSubview:textFieldDefaultCharMax]; textFieldDefaultCharMax.placeholder = @"Enter up to 50 characters"; textFieldDefaultCharMax.delegate = self; // Second the controller is created to manage the text field self.textFieldControllerDefaultCharMax = [[MDCTextInputControllerDefault alloc] initWithTextInput: textFieldDefaultCharMax]; self.textFieldControllerDefaultCharMax.characterCountMax = 50; self.textFieldControllerDefaultCharMax.floatingEnabled = NO;