使用 Swift 的浮点标签字段

浮点标签字段

平台
许可证
问题

概述

FloatLabelFields是 UX 模式的 Swift 实现,该模式被称为“浮动标签模式”。这种模式的初始Objective-C实现可以在Github上找到JVFloatLabeledTextField

由于移动设备的空间限制,通常仅依靠占位符作为标记字段的方法。
这带来了一个用户体验问题,因为一旦用户开始填写表单,就不存在标签。

此 UI 组件库(包括 a 和子类)旨在通过让占位符转换为浮动标签来改善用户体验,这些标签在填充文本后将鼠标悬停在字段上方。UITextFieldUITextView

这个概念归功于Matt D. Smith(@mds)和他的原始设计

Matt D. Smith的设计

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

Custom Class

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

Properties

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.

Final Result

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

Additional References

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

Questions?

GitHub

点击跳转