Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

UITextField subclass with floating labels - inspired by Matt D. Smith's design:http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users

License

NotificationsYou must be signed in to change notification settings

jverdi/JVFloatLabeledTextField

Repository files navigation

Build StatusCarthage compatiblePod VersionPod PlatformPod LicenseCocoaPods

JVFloatLabeledTextField is the first implementation of a UX pattern that has come to be known the"Float Label Pattern".

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 aUITextField andUITextView 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 hisoriginal design:

Matt D. Smith's Design

The component is officially supported for iOS 9 and greater.

Getting started via CocoaPods

sudo gem install cocoapods

Create aPodfile in your project directory:

pod init

Add the following to yourPodfile project's target:

pod 'JVFloatLabeledTextField'

Then run CocoaPods withpod install.

Finally, includeJVFloatLabeledTextField.h andJVFloatLabeledTextView.h in your project.

Getting started via Carthage

brew updatebrew install carthage

Create aCartfile in your project directory that contains:

github "jverdi/JVFloatLabeledTextField"

Then run carthage withcarthage update and addJVFloatLabeledText.framework to your project from theCarthage/Build/iOS directory.

Finally, includeJVFloatLabeledText.h in your project:

#import <JVFloatLabeledText/JVFloatLabeledText.h>

Getting started via SPM (Xcode 11+)

ClickFile ->Swift Packages ->Add Package Dependency, enterJVFloatLabeledText repo's URL.

After select the package, you can choose the dependency type (tagged version, branch or commit). Then Xcode will setup all the stuff for you.

If you're a framework author and use JVFloatLabeledTextField as a dependency, update yourPackage.swift file:

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

Additional References

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

Ports and Alternate Implementations

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 plugin - 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

Added a port? Let me know -@jverdi

About

UITextField subclass with floating labels - inspired by Matt D. Smith's design:http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages


[8]ページ先頭

©2009-2025 Movatter.jp