Custom UITextFields effects inspired by Codrops, built using Swift

Overview

TextFieldEffects Build Status

I fell in love with the text inputs effects in this article. As an exercise I decided to recreate as many of them as I can using Swift (some of them have a personal touch).

Currently it features the following effects from the article:

  • Kaede
  • Hoshi
  • Jiro
  • Isao
  • Minoru
  • Yoko
  • Madoka
  • Akira
  • Yoshiko

How they look

Kaede

Hoshi

Jiro

Isao

Minoru

Yoko

Madoka

Akira

Yoshiko

Installation

  • Looking for Swift 2.3 support? Check out the 1.2.0 tag.
  • Looking for Swift 2.1 support? Check out the 1.1.1 tag.
  • Looking for Swift 1.2 support? Check out the swift-1.2 branch.

Manual

The easiest way to install this framework is to drag and drop the TextFieldEffects/TextFieldEffects folder into your project. This also prevents the frameworks problem in iOS where the IBInspectable and IBDesignable are stripped out.

CocoaPods

Add the following to your Podfile:

use_frameworks!
pod 'TextFieldEffects'

Carthage

Add the following to your Cartfile:

github 'raulriera/TextFieldEffects'

How to use them

Every effect is properly documented in the source code, this is the best way to both understand and see what they do. There is also an example project included with all the effects and their settings.

Interface Builder

The library is a simple drop-in, as soon as you set your subclass to one of the effects and your module to TextFieldEffects you will be able to see all the IBDesignable settings in the storyboard.

Code

If you like to get your hands dirty, you can use them just like you would normally use any UITextField

let textField = KaedeTextField(frame: textFieldFrame)
textField.placeholderColor = .darkGrayColor()
textField.foregroundColor = .lightGrayColor()

view.addSubView(textField)

Is that simple.

Created by

Raul Riera, @raulriera

Comments
  • Hoshi set text programmatically after it's drawn

    Hoshi set text programmatically after it's drawn

    hello, Raul. The issue same with https://github.com/raulriera/TextFieldEffects/issues/13 still visible in my app. I using your library in Objective-C project, when I set text are emty string, the placeholder string do not move down.

    Objective-C
    _nameText = [[HoshiTextField alloc] initWithFrame:CGRectMake(xPos, yPos, WIDTH - 10, WIDTH0.1667)];
    [_nameText setBorderActiveColor:[UIColor LVL_colorWithHexString:@"ffc16a" andAlpha:1.0]];
    [_nameText setBorderInactiveColor:[UIColor LVL_colorWithHexString:@"d0d0d0" andAlpha:1.0]];
    [_nameText setPlaceholder:@" Name:"];
    [self.pageScroll addSubview:_nameText];
    yPos += WIDTH0.1667 + 5;
    
    _title = [[HoshiTextField alloc] initWithFrame:CGRectMake(xPos, yPos, WIDTH - 10, WIDTH*0.1667)];
    [_title setBorderActiveColor:[UIColor LVL_colorWithHexString:@"ffc16a" andAlpha:1.0]];
    [_title setBorderInactiveColor:[UIColor LVL_colorWithHexString:@"d0d0d0" andAlpha:1.0]];
    [_title setPlaceholder:@"  Title:"];
    [self.pageScroll addSubview:_title];
    yPos += WIDTH*0.1667 + 5;
    
    _comment = [[HoshiTextField alloc] initWithFrame:CGRectMake(xPos, yPos, WIDTH - 10, WIDTH*0.1667)];
    [_comment setBorderActiveColor:[UIColor LVL_colorWithHexString:@"ffc16a" andAlpha:1.0]];
    [_comment setBorderInactiveColor:[UIColor LVL_colorWithHexString:@"d0d0d0" andAlpha:1.0]];
    [_comment setPlaceholder:@"  Comment"];
    [self.pageScroll addSubview:_comment];
    yPos += WIDTH*0.1667 + 5;
    

    and when I call clear function like:

    [_nameText setText:@""];
    [_title setText:@""];
    [_comment setText:@""];
    [_nameText becomeFirstResponder];
    

    the placeholder do not move down.

    Thank & Regard, -- Luc.

    opened by vielucasluu 25
  • IB Designables Error

    IB Designables Error

    I am using xCode 8 with Swift 2.3 so I install TextFieldEffects using Cocoapods pod 'TextFieldEffects', '~> 1.2.0'

    The problem is that I get errors ever since I upgraded to xCode 8

    screen shot 2016-09-26 at 3 23 40 pm

    I believe it's because of the @IBDesignable notation for the TextFieldEffects as it is only throwing errors on views with these custom TextFields.

    question stale 
    opened by alanshih 21
  • Text partially hidden when increasing size with Interface Builder

    Text partially hidden when increasing size with Interface Builder

    Hello,

    The text is hidden under the border, when I increase the font size:

    screen shot 2016-04-27 at 19 11 36

    I'm using HoshiTextField.

    Am I missing something? Is It a known bug?

    Thanks, Ori.

    opened by oridahan6 18
  • The Kaede sliding text over shoots the constraints on the first tap then after that it returns to bounds.

    The Kaede sliding text over shoots the constraints on the first tap then after that it returns to bounds.

    Thanks for the great pod. It is so easy to use and works without any installation hassle. The best part is the way in which you payed out the custom class so that all the features are straight forward.

    My only issue is the Kaede sliding text over shoots the constraints on the first tap then after that it returns to bounds.

    Thanks again,

    John

    stale 
    opened by johnlietzke 15
  • Hoshi Placeholder wrongly placed when Textfield is firstResponder

    Hoshi Placeholder wrongly placed when Textfield is firstResponder

    When setting textField.becomeFirstResponder() inside viewDidLoad the placeholder is placed slightly to the left. Why does this happen and how can I fix it?

    Here is a screenshot for a better understanding:

    https://imgur.com/a/AsxMgtB

    opened by DieGlueckswurst 14
  • iOS 11 Yoshiko not showing text while editing?

    iOS 11 Yoshiko not showing text while editing?

    Was working all fine on 10.3, however on devices running iOS 11 Yoshiko textfield is not showing text while it is being edited, as soon as the textfield ends editing, whatever text is typed shows up correctly, please help thanks.

    opened by theappedia 13
  • Placeholder label text not changing

    Placeholder label text not changing

    Hello,

    issue : I want to change placeholder label text, As of now it's taking what i will set into the placeholder text in textfield, Label will displaying with same text with all capital text. I want to change first character is capital and other all are small. How i can change it.

    Thank you.

    stale 
    opened by tusharMistri 11
  • Place holder font is different than the standard font

    Place holder font is different than the standard font

    When I try to use any of the text fields, the placeholder font is not equal to the app standard one, but when I run the app on iOS 12, works fine, the problem is on iOS 13.

    opened by MrPereir4 11
  • Error Within Outlets - Akira Text Field

    Error Within Outlets - Akira Text Field

    Hi there!

    I'm receiving an error within my outlets for Akira Text Field. My other view controller works fine when connecting and using the framework. The class and module are connected also. Not sure why this is happening in one view controller but not the other.

    Thanks in advance.

    question 
    opened by deborahepadilla 11
  • Not working in ObjC project

    Not working in ObjC project

    Hi, My project is in Objective-C, I copied the TextFieldEffects folder in my project and deleted the TextFieldEffects.h file.

    I don't know what am I doing wrong but I'm getting this kind of errors (see image) in every function in every class. I already have another Swift Library successfully working in this project.

    I'm using Xcode 8 in macOS Sierra. screen shot 2016-10-12 at 18 37 03

    opened by jhuerta88 10
  • How do you call UITextField delegate methods from viewControllers?

    How do you call UITextField delegate methods from viewControllers?

    As I understand you are overriding textFieldDidBeginEditing and textFieldDidEndEditingmethods. This leads that we can't call those in viewController to do any additional work on textFields.

    Could be also that I just don't know enough what's happening.

    opened by pahnev 10
  • Update YoshikoTextField.swift

    Update YoshikoTextField.swift

    Fixed issue where text rect would overlap the textfield's bounds on the right side for Yoshiko TextField.

    Check the before and after when debugging the view hierarchy in Xcode: Before   After

    opened by hugo-pivaral 0
  • Issue with some Fonts

    Issue with some Fonts

    When we use some fonts like "Roboto", the placeholder uses "Times new roman" font instead.

    The problem is related to this code snippet

        private func placeholderFontFromFont(_ font: UIFont) -> UIFont! {
            let smallerFont = UIFont(name: font.fontName, size: font.pointSize * placeholderFontScale)
            return smallerFont
        }
    
    

    For "Roboto" Font, UIFont(name: font.fontName, size: font.pointSize) does not return the right expected Font.

    opened by ag-drivequant 0
  • Use of .fontName deprecated in Xcode 11

    Use of .fontName deprecated in Xcode 11

    I love this library ❤️ With Xcode 11 I started getting the following error:

    2020-06-06 20:30:23.609206-0700 Project1[95342:6267628] CoreText note: Client requested name ".SFUI-Regular", it will get TimesNewRomanPSMT rather than the intended font. All system UI font access should be through proper APIs such as CTFontCreateUIFontForLanguage() or +[UIFont systemFontOfSize:].
    2020-06-06 20:30:23.609401-0700 Project1[95342:6267628] CoreText note: Set a breakpoint on CTFontLogSystemFontNameRequest to debug.
    

    I researched the issue and it's the use of .fontName to instantiate a font that causes the error. This technique is used by the library to scale the placeholder font. The result is the placeholder always displays in TimesNewRoman. Boo.

    Linke to issue: https://stackoverflow.com/questions/58706570/how-can-i-find-the-source-of-this-font-related-coretext-warning-in-ios13.

    I'd love to see this fixed 🙂

    stale 
    opened by wfgilman 3
Releases(1.7.0)
Owner
Raul Riera
👋
Raul Riera
UILabel subclass to perform text effects

CharacterText uses NSLayoutManager to position CATextLayers for each glyph in your string. This gives you the power to create some neat text effect using all the attributes of CATextLayer.

null 333 Sep 15, 2022
A Swift framework for parsing, formatting and validating international phone numbers. Inspired by Google's libphonenumber.

PhoneNumberKit Swift 5.3 framework for parsing, formatting and validating international phone numbers. Inspired by Google's libphonenumber. Features F

Roy Marmelstein 4.7k Dec 29, 2022
Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.

FloatLabelFields Overview Installation Via Interface Builder Via Code Credits Additional References Questions Overview FloatLabelFields is the Swift i

Fahim Farook 1.2k Jan 4, 2023
DTTextField is a custom textfield with floating placeholder and error label

DTTextField Introduction DTTextField is a UITextField library with floating placeholder and error label. Floating placeholder inspired from JVFloatLab

Dhaval Thanki 310 Jan 5, 2023
A custom TextField with a switchable icon which shows or hides the password and enforce good password policies

PasswordTextField A custom TextField with a switchable icon which shows or hides the password and enforces good password policies, written in Swift. ⭐

Chris Jimenez 304 Dec 29, 2022
Custom emoji rendering library for iOS apps with support for GIF & still images

Custom emoji rendering library for iOS apps with support for GIF & still images - plug-in extension for UITextView - performance, cache ✅ - Made with ?? by @GetStream

Stream 244 Dec 11, 2022
Focus text field in SwiftUI dynamically and progress through form using iOS keyboard.

Focuser Focuser allows to focus SwiftUI text fields dynamically and implements ability move go through the form using Keyboard for iOS 13 and iOS 14.

Art Technologies 118 Dec 25, 2022
Autocomplete for a text field in SwiftUI using async/await

Autocomplete for a text field in SwiftUI using async/await

Dmytro Anokhin 13 Oct 21, 2022
Flutter plugin to display VGS card info using TextView or View

VGS Card Info Flutter plugin to display VGS Card info using TextView or View Installation Add the dependency in your pubspec.yaml vgscardinfo: git

Djamo Côte d'Ivoire 0 Mar 7, 2022
TextField with DropDown support using UIPickerView

IQDropDownTextField TextField with DropDown support using UIPickerView Installing Install using cocoapods. Add in your Podfile: pod 'IQDropDownTextFie

Mohd Iftekhar Qurashi 301 Jun 29, 2022
AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

Abdelrhman Kamal 79 Jan 3, 2023
An UITextField subclass to simplify country code's picking. Swift 5.0

Preview Installation NKVPhonePicker is available through CocoaPods. To install it, simply add the following line to your Podfile: pod 'NKVPhonePicker'

Nike Kov 140 Nov 23, 2022
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.

SkyFloatingLabelTextField SkyFloatingLabelTextField is a beautiful, flexible and customizable implementation of the space saving "Float Label Pattern"

Skyscanner 4k Jan 1, 2023
A Credit Amount and EMI User Interface build in Swift and SwiftUI

App Usage An iPhone application build in swift . Overview Supported on All iPhone Screen Sizes Dynamic Data following MVVM Design Pattern Used Transit

Mohammad Yasir 4 Apr 20, 2022
This is the demo repository for having floating TextField in swift UI

ed-floating-field-swiftui This is the demo repository for having floating TextField in swift UI The inputs fields should not be empty Validations for

Patrick 1 May 26, 2022
UITextField extension in Swift that adds shake animation

UITextField-Shake-Swift UITextField extension in Swift that adds shake animation Initially created by Andrea Mazzini (using Objective-C) on 08/02/14:

null 15 Jul 20, 2021
A UITextView subclass that adds support for multiline placeholder written in Swift.

KMPlaceholderTextView A UITextView subclass that adds support for multiline placeholder written in Swift. Usage You can set the value of the placehold

Zhouqi Mo 795 Nov 18, 2022
An UITextView in Swift. Support auto growing, placeholder and length limit.

GrowingTextView Requirements iOS 8.0 or above Installation CocoaPods GrowingTextView is available through CocoaPods. To install it, simply add the fol

Kenneth Tsang 941 Jan 5, 2023
A Float Input View with smooth animation and supporting icon and seperator written with Swift

RSFloatInputView Features Smooth animation using CoreText Support optional left icon Support optional seperator Configurable padding, size, fonts and

null 103 Nov 13, 2022