Customizable UIStackView that consists of custom UITextFields for OTP or Security code with AutoFill support.
- Supported build target - iOS 10.0+ (Xcode 10.3+)
To install OTPStackView, simply add the following line to your Podfile:
pod 'OTPStackView',
:git => 'https://github.com/intan1907/OTPStackView.git',
:tag => '1.0.2'
If you prefer not to use Cocoapods, you can integrate OTPStackView into your project manually.
- First, import the library.
import OTPStackView
- Create the
OTPStackView
, specify yournumberOfFields
value.let otpView = OTPStackView(numberOfFields: 6, delegate: self) view.addSubview(otpView)
- Then setup the
OTPDelegate
method. ParameterisValid
determines whether the OTP fields are filled.extension ViewController: OTPDelegate { func didChangeValidity(isValid: Bool) { // ... } }
- To get the OTP string, use
getOTP()
method.let otpString = otpView.getOTP()
Before going to how to customize the OTPStackView
, you have to know that OTPStackView
is a subclass of UIStackView
that contains a number of OTPTextField
s which is the UITextField
subclass. Therefore, attributes that you can customize in OTPStackView are in general UIStackView's attributes. Other than that, you can customize the number of textFields from numberOfFields
attribute.
OTPStackView(
numberOfFields: Int = 4,
textFieldPreferences: OTPTextField.Preferences = OTPTextField.Preferences(),
spacing: CGFloat = 8,
delegate: OTPDelegate?
)
In order to customize OTPTextField
appearance and behavior, you can play with the Preferences
structure which encapsulates all the customizable properties of the OTPTextField
. These preferences have been split into two structures:
Drawing
- encapsulates customizable properties specifying howOTPTextField
will be drawn on screen.TextInputTraits
- encapsultes customizable properties specifying features for keyboard input toOTPTextField
.
Drawing Attribute |
Description |
---|---|
backgroundColor |
The background color of OTPTextField (default UIColor.white ). |
textColor |
The text color of OTPTextField (default UIColor.black ). |
cornerRadius |
The corner radius of OTPTextField (default 8). |
width |
The width of OTPTextField (default nil ). The height of OTPTextField is equal to OTPStackView 's height. But you can customize the width otherwise it's also equal to OTPStackView 's height. |
inactiveBorderWidth |
The border width of OTPTextField when it's in the normal state (default 1). |
inactiveBorderColor |
The border color of OTPTextField when it's in the normal state (default UIColor.lightGray ). |
activeBorderWidth |
The border width of OTPTextField when it's in the editing state (default 2). |
activeBorderColor |
The border color of OTPTextField when it's in the editing state (default UIColor.cyan ). |
TextInputTraits Attribute |
Description |
---|---|
font |
The font of OTPTextField (default UIFont.systemFont(ofSize: 16) ). |
textAlignment |
The technique for aligning the OTPTextField 's text (default NSTextAlignment.center ). |
adjustsFontSizeToFitWidth |
A Boolean value that determines whether the OTPTextField reduces the text’s font size to fit the title string into the OTPTextField ’s bounding rectangle (default false ). |
keyboardType |
The type of keyboard to display as OTPTextField 's input view (default UIKeyboardType.numberPad ). |
autocorrectionType |
The autocorrection style for OTPTextField (default UITextAutocorrectionType.yes ). |