Material design floating placeholder in Swift 5
Requirements:
- Cocoapods (Cocoapods install steps)
- Xcode (Mac App Store)
- Swift
Preface
Material design in iOS. Since many developers have a single design for both platforms and Material UI is a viable and simple solution to standardize UI design, we are going to explore how to create one of the best looking elements Material UI design has for us, the floating placeholder text field.
Let’s begin coding
setup
To start we are going to need to import the Material library, this library has the benefit of being modular and as such you can import the specific element you want so as to not overstuff your application with code you will not use.
For this example we are going to import this pod:
(If you haven’t installed cocoapods yet refer to the requirements section)
# Inside in your Podfile after # Pods for {PROJECTNAME}
pod ‘MaterialComponents/TextFields’And install with:
$ pod installAfter installing remember to use the .xcworkspace file instead of the .xcodeproj file.
Project
We are going to create a new .swift file, to create a TextField object.
Why are we going to do that? you ask. Why not just import the text field class and use it?
Well the floating placeholder text field is not one of the TextField elements that come prepackaged in the library.
You need to assemble it (simple stuff don’t panic). Remember to check the completed code at the end if you get lost.
To start we will import the library:
Our text field object needs to handle two elements:
1.- The material text field class.
2.- The controller that will manage the class.
Every text field will need a controller to manage it, for this reason it is better to create this subclass to handle every instance of text field + controller.
To use both we will create a new subclass of UIView:
Now we will add the variables that will be used by the class:
The previous code tells the compiler that the declared variables will have an instantiation in the future (It will crash if it doesn’t). And that this UIView subclass can be used in a storyboard file. The “private” reserved word lets the IDE know that these variables cannot be accessed in another class or subclass.
The variables are the following:
- An MDCTextField (We will initialize and use this textfield in a function later) This is a Material Design Text Field that we will use in our text field controller.
- An MDCTextInputController (We will use the MDCTextInputControllerOutlined to have an outlined text field)
- A UIColor, for this color you can use any color, but to adapt it to the new user interface styles (Light & Dark) we created an new UIColor in the assets folder. (Not covered in this article)
- placeholderText is the String that the Placeholder view will have.
- setPlaceholderText is a computed variable that we can use in th storyboard to set the placeholder or wherever you instantiate the class.
Afterwards add the following code:
This code is comprised of 8 short steps:
1.- Initialize a new MDCTextField with it’s default initializer.
2.- We add a tag number to the view. This helps with avoiding to add the view again when layoutSubviews is called again (discussed below).
3.- Disable translatesAutoresizingMaskIntoConstraints to add layout with NSLayouts.
4.- Add the subview, to our UIView
5.- Set the placeholder to the placeholderText variable
6.- Set the UIView as a delegate. You should add a class extension at the end of your file as such:
(you can also add the protocol at the start but that makes for messier code)
7.- Set the color for the placeholder text (if you want)
8.- Set the layout for the InputView inside this view. All top, bottom, right, left anchors, so that the text field uses the maximum available space in your view.
Now we need the Material Design Components Text Input Controller (You can use the controller with the design you choose, for this example we’ll use the Outlined Controller), this handles the text field. Add this function:
Now let’s break down the previous code:
1.- Initialize the Controller.
2.- Setup the colors for the controller’s managed floating text field’s and active text field’s text.
Now to remove the keyboard when the return button is pressed:
Since we only have 1 delegated text field we can use this function to remove the keyboard when we’re done typing.
Now we need to call the functions from our layoutSubviews() functions:
Since the layoutSubviews() function is called every time we change the screen orientation, and when we bring the app to the foreground, we should add a check in our first function to see if the text field already exists inside our UIView. For this we add the following at the start of our setInputView() function:
The finished code:
It contains some elements to change the color of the text depending on your user interface style. (Light and Dark mode included in iOS 13). Granted you have a iOS 13 compatible Xcode and device. You also need a new color set with the dark & light style attributes .
