FloatLabelFields

Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.

Code Quality Rank: L5

Programming language: Swift

License: MIT License

Tags: UI    

README

FloatLabelFields

• Overview
• Installation
  • Via Interface Builder
  • Via Code
• Credits
• Additional References
• Questions

Overview

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 UITextField and 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.

Credits for the concept to Matt D. Smith (@mds), and his original design:

Since the code is Swift-based, do note that this version of the component swill only work on iOS 7.x+.

Installation

You can install the FloatLabelField components two ways:

Via Interface Builder

Just add a UITextField or UITextView to your storyboard and then set the custom class for the control to either FloatLabelTextField or FloatLabelTextView.

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.

Via Code

Using FloatLabelFields via code works the same as you would do to set up a UITextField or 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)

Credits

• This project derives inspiration from jverdi's Objective-C JVFloatLabeledTextField project.

Additional References

How the Float Label Pattern Started - Matt D. Smith
Float Label Pattern - Brad Frost
Material Design - Floating Labels - Google

Questions?

• E-mail: fahimf (at) gmail (dot) com
• Web: http://rooksoft.sg/
• Twitter: http://twitter.com/FahimFarook