152 lines
3.6 KiB
Markdown
152 lines
3.6 KiB
Markdown
# OTPSwiftView
|
|
|
|
|
|
|
|
A fully customizable OTP view.
|
|
|
|
<p align="left">
|
|
<img src="Assets/preview.gif" width=300 height=533>
|
|
</p>
|
|
|
|
# Usage
|
|
```swift
|
|
class ViewController: UIViewController {
|
|
let otpView = CustomOTPSwiftView() // Custom OTP view
|
|
|
|
let config = OTPCodeConfig(codeSymbolsCount: 6, // Base configuration of OTP view
|
|
spacing: 6,
|
|
customSpacing: [2: 20])
|
|
|
|
override func viewDidLoad() {
|
|
super.viewDidLoad()
|
|
|
|
/*
|
|
Add your codeView and set layout
|
|
*/
|
|
|
|
/* Configure OTP view */
|
|
|
|
otpView.configure(with: config)
|
|
|
|
/* Bind events */
|
|
|
|
otpView.onTextEnter = { code in
|
|
// Get code from codeView
|
|
}
|
|
|
|
/* Update text */
|
|
|
|
otpView.code = "234435"
|
|
|
|
/* Update focus */
|
|
|
|
otpView.beginFirstResponder() // show keyboard
|
|
otpView.resignFirstResponder() // hide keyboard
|
|
}
|
|
}
|
|
```
|
|
|
|
# Customization
|
|
## Single OTP View
|
|
*OTPView* is a base class that describes a single OTP textfield.
|
|
To customize the appearance and layout, you must inherit from the OTPView.
|
|
*Don't forget to add UIGestureRecognizer to call closure `onTap?()`. Use UITapGestureRecognizer to avoid bugs.*
|
|
|
|
```swift
|
|
import OTPSwiftView
|
|
|
|
class CustomOTPView: OTPView {
|
|
override func addViews() {
|
|
super.addViews()
|
|
|
|
// Adding additional views to current view. The OTP textfield has already been added.
|
|
}
|
|
|
|
override func configureLayout() {
|
|
super.configureLayout()
|
|
|
|
// Confgiure layout of subviews
|
|
}
|
|
|
|
override func bindViews() {
|
|
super.bindViews()
|
|
|
|
// Binding to data or user actions
|
|
|
|
let gesture = UITapGestureRecognizer(target: self, action: #selector(onTapAction))
|
|
addGestureRecognizer(gesture)
|
|
}
|
|
|
|
private func onTapAction() {
|
|
onTap?()
|
|
}
|
|
|
|
override func configureAppearance() {
|
|
super.configureAppearance()
|
|
|
|
// Appearance configuration method
|
|
}
|
|
}
|
|
```
|
|
|
|
*If needed to set validation for input use `validationClosure: ValidationClosure<String>?`*. For example, only numbers validation:
|
|
|
|
```swift
|
|
import OTPSwiftView
|
|
|
|
class CustomOTPView: OTPView {
|
|
|
|
override func bindViews() {
|
|
super.bindViews()
|
|
|
|
codeTextField.validationClosure = { input in
|
|
input.allSatisfy { $0.isNumber }
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## OTPSwiftView
|
|
*OTPSwiftView* is a base class that is responsible for the layout of single OTP views.
|
|
As with OTPView, you should create an heir class to configure your full OTP view.
|
|
|
|
```swift
|
|
import OTPSwiftView
|
|
|
|
final class CustomOTPSwiftView: OTPSwiftView<CustomOTPView> {
|
|
override func addViews() {
|
|
super.addViews()
|
|
|
|
// Adding additional views to current code view. The single OTP views has already been added.
|
|
}
|
|
|
|
override func configureLayout() {
|
|
super.configureLayout()
|
|
|
|
// Confgiure layout of subviews
|
|
}
|
|
|
|
override func bindViews() {
|
|
super.bindViews()
|
|
|
|
// Binding to data or user actions
|
|
}
|
|
|
|
override func configureAppearance() {
|
|
super.configureAppearance()
|
|
|
|
// Appearance configuration method
|
|
}
|
|
|
|
override func configure(with config: OTPCodeConfig) {
|
|
super.configure(with: config)
|
|
|
|
// Configure you code view with configuration
|
|
}
|
|
}
|
|
```
|
|
|
|
# Installation via SPM
|
|
|
|
You can install this framework as a target of LeadKit.
|