使用 Swift 的浮点标签字段
浮点标签字段
概述
FloatLabelFields是 UX 模式的 Swift 实现，该模式被称为“浮动标签模式”。这种模式的初始Objective-C实现可以在Github上找到JVFloatLabeledTextField。
由于移动设备的空间限制，通常仅依靠占位符作为标记字段的方法。
这带来了一个用户体验问题，因为一旦用户开始填写表单，就不存在标签。
此 UI 组件库（包括 a 和子类）旨在通过让占位符转换为浮动标签来改善用户体验，这些标签在填充文本后将鼠标悬停在字段上方。UITextFieldUITextView
这个概念归功于Matt D. Smith（@mds）和他的原始设计：
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 components two ways:FloatLabelField
Via Interface Builder
Just add a or to your storyboard and then set the custom class for the control to either or .UITextFieldUITextViewFloatLabelTextFieldFloatLabelTextView
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 ) defines the actual title which will be used for your field.UITextView
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 via code works the same as you would do to set up a or instance. Simply create an instance of the class, set the necessary properties, and then add the field to your view.FloatLabelFieldsUITextFieldUITextView
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
