FloatLabelFields is the Swift implementation of a UX pattern that has come to be known as the “Float Label Pattern”. The initial Objective-C implementation of this pattern can be found on Github as JVFloatLabeledTextField.
Due to space constraints on mobile devices, it is common to rely solely on placeholders as a means to label fields.
This presents a UX problem, in that, once the user begins to fill out a form, no labels are present.
This UI component library, which includes both a
UITextView subclass, aims to improve the user experience by having placeholders transition into floating labels that hover above the fields after they are populated with text.
Since the code is Swift-based, do note that this version of the component swill only work on iOS 7.x+.
You can install the
FloatLabelField components two ways:
Via Interface Builder
Just add a
UITextView to your storyboard and then set the custom class for the control to either
Note: Sometimes, you might have to set the Module explicitly instead of letting Xcode set it implicitly too before it works.
Next, switch to the Attributes Inspector tab and set the necessary attributes to configure your text field or text view. The Placeholder attribute (or Hint in the case of a
UITextView) defines the actual title which will be used for your field.
The other values such as Hint Y Padding, Title Y Padding, Title Text Colour etc. define how the title will look.
If everything is set up correctly, you’ll see the title display on Interface Builder after you’ve configured the field.
FloatLabelFields via code works the same as you would do to set up a
UITextView instance. Simply create an instance of the class, set the necessary properties, and then add the field to your view.
let fld = FloatLabelTextField(frame:vwHolder.bounds) fld.placeholder = "Comments" vwHolder.addSubview(fld)
- E-mail: fahimf (at) gmail (dot) com
- Web: http://rooksoft.sg/
- Twitter: http://twitter.com/FahimFarook