▤ AEOTPTextField
If you like AEOTPTextField, give it a ★ at the top right of this page.
Overview
AEOTPTextField is a simple and easy text field control written in Swift.
- It can be implemented in storyboard without a single line of code.
- Highly customizable without needing to write tons of custom code.
- Support both portrait and landscape views.
Check out the example project to see it in action!
Preview Samples
Default |
---|
With Border | Without Border | Clear Background |
---|---|---|
Requirements
- Xcode 11.
- Swift 5.
- iOS 10 or higher.
Installation
CocoaPods
CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:
$ gem install cocoapods
To integrate AEOTPTextField into your Xcode project using CocoaPods, specify it in your Podfile
:
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!
pod 'AEOTPTextField'
Then, run the following command:
$ pod install
Carthage
The integration of AEOTPTextField using Carthage will be available soon.
Swift Package Manager
The integration of AEOTPTextField using Swift Package Manager will be available soon.
Usage
Code-less Storyboard Implementation
-
Add UITextField to your ViewController. Set the
Custom Class
of the UITextField to beAEOTPTextField
in the Identity Inspector. Set theModule
toAEOTPTextField
(ignore this step if you've manually added AEOTPTextField to your project). -
Take an oultlet from the
UITextField
to yourViewController
.
Code Implementation
First:
import AEOTPTextField
Setup the otpDelegate and configure the AEOTPTextField
below viewDidLoad()
, do something like this:
override func viewDidLoad() {
super.viewDidLoad()
otpTextField.otpDelegate = self
otpTextField.configure()
}
To configure the AEOTPTextField
with a custom slots count, do something like this:
override func viewDidLoad() {
super.viewDidLoad()
otpTextField.otpDelegate = self
otpTextField.configure(with: 4)
}
Then, Setup the AEOTPTextFieldDelegate
method. Add this extension to your ViewController
, do something like this:
extension ViewController: AEOTPTextFieldDelegate {
func didUserFinishEnter(the code: String) {
print(code)
}
}
You have done.
Customization
AEOTPTextField AEOTPTextField
supports the following:
// The default character placed in the text field slots
public var otpDefaultCharacter = ""
// The default background color of the text field slots before entering a character
public var otpBackgroundColor: UIColor = UIColor(red: 0.949, green: 0.949, blue: 0.949, alpha: 1)
// The default background color of the text field slots after entering a character
public var otpFilledBackgroundColor: UIColor = UIColor(red: 0.949, green: 0.949, blue: 0.949, alpha: 1)
// The default corner raduis of the text field slots
public var otpCornerRaduis: CGFloat = 10
// The default border color of the text field slots before entering a character
public var otpDefaultBorderColor: UIColor = .clear
// The border color of the text field slots after entering a character
public var otpFilledBorderColor: UIColor = .darkGray
// The default border width of the text field slots before entering a character
public var otpDefaultBorderWidth: CGFloat = 0
// The border width of the text field slots after entering a character
public var otpFilledBorderWidth: CGFloat = 1
// The default text color of the text
public var otpTextColor: UIColor = .black
// The default font size of the text
public var otpFontSize: CGFloat = 14
// The default font of the text
public var otpFont: UIFont = UIFont.systemFont(ofSize: 14)
Example of Customization
override func viewDidLoad() {
super.viewDidLoad()
otpTextField.otpDelegate = self
otpTextField.otpFontSize = 16
otpTextField.otpTextColor = .systemRed
otpTextField.otpCornerRaduis = 5
otpTextField.otpFilledBorderColor = .blue
otpTextField.configure(with: 4)
}
}
References
Contributed
This is an open source project, so feel free to contribute.
License
AEOTPTextField is available under the MIT license.
Author
Abdelrhman Eliwa, made this with