JVFloatLabeledTextField

Build Status Carthage compatible Pod Version Pod Platform Pod License CocoaPods

JVFloatLabeledTextField“浮动标签模式” 的首个 UX 模式实现。

由于移动设备上的空间限制,通常仅依赖占位符来标记字段。 这带来了一个 UX 问题,即一旦用户开始填写表单,就不会显示任何标签。

此 UI 组件库包含 UITextFieldUITextView 子类,旨在通过在字段填充文本后将占位符转换为悬浮在字段上方的浮动标签,从而改善用户体验。

此概念归功于 Matt D. Smith (@mds) 及其原始设计

Matt D. Smith's Design

此组件正式支持 iOS 9 及更高版本。

通过 CocoaPods 入门

sudo gem install cocoapods

在您的项目目录中创建一个 Podfile

pod init

将以下内容添加到您的 Podfile 项目的目标中

pod 'JVFloatLabeledTextField'

然后使用 pod install 运行 CocoaPods。

最后,在您的项目中包含 JVFloatLabeledTextField.hJVFloatLabeledTextView.h

通过 Carthage 入门

brew update
brew install carthage

在您的项目目录中创建一个包含以下内容的 Cartfile

github "jverdi/JVFloatLabeledTextField"

然后使用 carthage update 运行 Carthage,并将 JVFloatLabeledText.frameworkCarthage/Build/iOS 目录添加到您的项目。

最后,在您的项目中包含 JVFloatLabeledText.h

#import <JVFloatLabeledText/JVFloatLabeledText.h>

通过 SPM (Xcode 11+) 入门

点击 File -> Swift Packages -> Add Package Dependency,输入 JVFloatLabeledText 仓库的 URL

选择软件包后,您可以选择依赖类型(带标签的版本、分支或提交)。 然后 Xcode 将为您设置所有内容。

如果您是框架作者并使用 JVFloatLabeledTextField 作为依赖项,请更新您的 Package.swift 文件

let package = Package(
    dependencies: [
        .package(url: "https://github.com/jverdi/JVFloatLabeledTextField", from: "1.2.2")
    ],
)

其他参考资料

浮动标签模式的起源 - Matt D. Smith
浮动标签模式 - Brad Frost
Material Design - 浮动标签 - Google

移植和替代实现

Android - Henrik Sandström
Android - Kaushik Gopal
Android - Kevin Johnson
Xamarin.iOS - Greg Shackles
Xamarin.Android - Johan du Toit
CSS Jonathan Snook
JQuery / Zepto.js - Achmad Mahardi
JQuery - Mike Mitchell
AngularJS - Dave Ackerman
Bootstrap 插件 - Matt Powell
JavaFX - Andy Till
Swift - Dirk Fabisch
Swift - Fahim Farook
Swift - Neeraj Kumar
Swift - Jimmy Jose
Swift - Skyscanner (Daniel Langh, Gergely Orosz, Raimon Lapuente)
ObjC - Arthur Ariel Sabintsev
ObjC - Rob Phillips
4D - Maurice Inzirillo
Appcelerator Titanium - The Smiths
B4i - Erel Uziel

添加了一个端口? 告诉我 - @jverdi