Convert Figma logo to code with AI

raulriera logoTextFieldEffects

Custom UITextFields effects inspired by Codrops, built using Swift

5,954
599
5,954
7
View on GitHub

Top Related Projects

Skyscanner's avatar

SkyFloatingLabelTextField

4,094

A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.

Quick Overview

TextFieldEffects is a Swift library that provides custom UITextField classes with various visual effects. It offers a collection of beautiful and customizable text fields for iOS applications, enhancing the user interface with animated and stylish input fields.

Pros

  • Easy to implement and customize
  • Provides a variety of visually appealing text field designs
  • Compatible with Swift and iOS projects
  • Actively maintained and updated

Cons

  • Limited to iOS platform only
  • May require additional styling to fit specific design requirements
  • Some effects might be resource-intensive on older devices
  • Learning curve for customizing advanced properties

Code Examples

  1. Creating a Hoshi-style text field:
let hoshiTextField = HoshiTextField(frame: CGRect(x: 20, y: 100, width: 300, height: 40))
hoshiTextField.placeholder = "Username"
hoshiTextField.placeholderColor = .gray
hoshiTextField.borderActiveColor = .blue
hoshiTextField.borderInactiveColor = .lightGray
view.addSubview(hoshiTextField)
  1. Implementing a Yoshiko-style text field:
let yoshikoTextField = YoshikoTextField(frame: CGRect(x: 20, y: 160, width: 300, height: 40))
yoshikoTextField.placeholder = "Password"
yoshikoTextField.placeholderColor = .darkGray
yoshikoTextField.activeBorderColor = .green
yoshikoTextField.inactiveBorderColor = .gray
view.addSubview(yoshikoTextField)
  1. Using a Jiro-style text field:
let jiroTextField = JiroTextField(frame: CGRect(x: 20, y: 220, width: 300, height: 40))
jiroTextField.placeholder = "Email"
jiroTextField.placeholderColor = .white
jiroTextField.borderColor = .orange
jiroTextField.backgroundColor = .lightGray
view.addSubview(jiroTextField)

Getting Started

  1. Add TextFieldEffects to your project using Swift Package Manager, CocoaPods, or Carthage.

  2. Import the library in your Swift file:

import TextFieldEffects
  1. Create and customize a text field:
let isaoTextField = IsaoTextField(frame: CGRect(x: 20, y: 100, width: 300, height: 40))
isaoTextField.placeholder = "Enter your name"
isaoTextField.activeColor = .blue
isaoTextField.inactiveColor = .gray
view.addSubview(isaoTextField)
  1. Implement UITextFieldDelegate methods if needed for additional functionality.

Competitor Comparisons

Skyscanner logo

SkyFloatingLabelTextField

4,094

A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.

Pros of SkyFloatingLabelTextField

  • More actively maintained with recent updates
  • Includes built-in error handling and validation
  • Offers more customization options for the floating label

Cons of SkyFloatingLabelTextField

  • Limited to a single text field style (floating label)
  • Requires more setup code for basic functionality
  • Less variety in animation effects

Code Comparison

SkyFloatingLabelTextField:

let textField = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 200, height: 45))
textField.placeholder = "Email"
textField.title = "Email"
textField.errorMessage = "Invalid email"

TextFieldEffects:

let textField = HoshiTextField(frame: CGRect(x: 10, y: 10, width: 200, height: 45))
textField.placeholder = "Email"
textField.borderActiveColor = .blue
textField.borderInactiveColor = .gray

SkyFloatingLabelTextField focuses on a single, highly customizable floating label style with built-in error handling. TextFieldEffects offers a variety of text field styles with simpler setup but less advanced features. Choose SkyFloatingLabelTextField for a polished floating label implementation, or TextFieldEffects for more diverse text field designs.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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