AnimatedTextInput 
iOS custom text input component used in the Jobandtalent app.
Installation
Use cocoapods to install this custom control in your project.
pod 'AnimatedTextInput', '~> 0.3.0'
Usage
Use the main class AnimatedTextInput. Create it either by code or dragging a new instance of UIView into your storyboard/nib file and setting its class in the identity inspector.
Types
Currently there are 6 different types, defined in the AnimatedTextInputType enum.
-
Text: basic text input, same behaviour as UITextField.
-
Password: secure text entry and
eyebutton for revealing its content. -
Numeric: numeric text input.
-
Selection: user interaction for the text input is disabled. A
tapActionis expected and called when the text input is pressed. Normally used to present a set of options and modify its state after one option is selected. -
Multiline: similar behaviour to UITextView with no scrolling. The
intrinsicContentSizeof the view will grow as the user types. If you need this behaviour and you use autolayout, pin either the bottom or the top, otherwise the view won't grow (like you would do with aUILabel). -
Generic: expects a configured
TextInput. Use this if you need a UITextField or UITextView with your custom behaviour. CheckTextInputandTextInputDelegateprotocols and create a class conforming to them.
To switch between types, you can simply use the type property assining one of the values available in the AnimatedTextInputType enum.
textInput.type = .numeric
Styles
Creating a new visual style is as easy as creating a new struct that conforms to the AnimatedTextInputStyle protocol.
For example:
struct CustomTextInputStyle: AnimatedTextInputStyle {
let activeColor = UIColor.orangeColor()
let inactiveColor = UIColor.grayColor().colorWithAlphaComponent(0.3)
let errorColor = UIColor.redColor()
let textInputFont = UIFont.systemFontOfSize(14)
let textInputFontColor = UIColor.blackColor()
let placeholderMinFontSize: CGFloat = 9
let counterLabelFont: UIFont? = UIFont.systemFontOfSize(9)
let leftMargin: CGFloat = 25
let topMargin: CGFloat = 20
let rightMargin: CGFloat = 0
let bottomMargin: CGFloat = 10
let yHintPositionOffset: CGFloat = 7
}
Then, use the style property to set it.
textInput.style = CustomTextInputStyle()
Other considerations
-
You can use
AnimatedTextInputas a replacement for eitherUITextFieldorUITextView. To set or retrieve the input text, use thetextproperty. -
This control provides an easy way of setting a counter label. Just call the function
showCharacterCounterLabel(with:)and give it a maximum number of characters. -
AnimatedTextInputhas its own delegate methods, very similar toUITextFieldDelegateandUITextViewDelegate.
Download and check the Example project for more examples.
One last question: Why create a TextInput abstraction and not use UITextField or UITextView instead?
From an API point of view, we only wanted to deal with one control. However, we needed some behaviours that were not supported by UITextField or UITextView. For instance, we wanted AnimatedTextInput to support multiline, but UITextField does not support it. We also wanted secure text entry for the password type, but UITextView does not support it. That's why we ended up creating TextInput abstraction.
FAQ
- How do I enable autocorrection (or any property available in
UITextFieldorUITextView)? https://github.com/jobandtalent/AnimatedTextInput/issues/67
1.1k Jan 5, 2023
25 Dec 13, 2022
125 Jan 13, 2022
939 Dec 21, 2022
941 Jan 5, 2023
261 Jun 29, 2022
795 Nov 18, 2022
5 Jan 26, 2022
68 May 27, 2022
446 Nov 24, 2022
44 May 16, 2022
1.2k Nov 11, 2022
140 Nov 23, 2022
312 Nov 13, 2022
89 Jan 2, 2023
434 Dec 22, 2022
7.2k Jan 2, 2023