### Run Pod Install Source: https://github.com/datt1994/dpotpview/blob/master/README.md Command to install dependencies defined in the Podfile. ```bash $ pod install ``` -------------------------------- ### Install Carthage Source: https://github.com/datt1994/dpotpview/blob/master/README.md Commands to update Homebrew and install Carthage. ```bash $ brew update $ brew install carthage ``` -------------------------------- ### Install DPOTPView with Carthage Source: https://context7.com/datt1994/dpotpview/llms.txt Use Carthage to manage the DPOTPView dependency. Add the repository to your Cartfile, run 'carthage update', and link the framework. For IBDesignable support, create a subclass. ```bash # Cartfile github "Datt1994/DPOTPView" # Build the framework $ carthage update # Note: For IBDesignable support with Carthage, create a subclass: # @IBDesignable class OTPView: DPOTPView {} ``` -------------------------------- ### Install CocoaPods Source: https://github.com/datt1994/dpotpview/blob/master/README.md Command to install the CocoaPods dependency manager. ```bash $ gem install cocoapods ``` -------------------------------- ### Install DPOTPView with CocoaPods Source: https://context7.com/datt1994/dpotpview/llms.txt Add DPOTPView to your iOS project by including it in your Podfile and running 'pod install'. Ensure your platform is set to iOS 8.0 or higher and use frameworks. ```ruby # Podfile source 'https://github.com/CocoaPods/Specs.git' platform :ios, '8.0' target 'YourApp' do use_frameworks! pod 'DPOTPView' end ``` ```bash # Install dependencies $ pod install ``` -------------------------------- ### Install DPOTPView with Swift Package Manager Source: https://context7.com/datt1994/dpotpview/llms.txt Integrate DPOTPView into your Xcode project by adding it as a package dependency using its GitHub repository URL and specifying a version. ```swift // Package.swift or File > Swift Packages > Add Package Dependency dependencies: [ .package(url: "https://github.com/Datt1994/DPOTPView.git", from: "1.5.0") ] ``` -------------------------------- ### Complete OTP Verification UI and Logic Source: https://context7.com/datt1994/dpotpview/llms.txt This Swift code implements a full OTP verification screen using DPOTPView. It handles UI setup, input validation, API call simulation, and displays success or error messages. Ensure DPOTPView is correctly integrated into your project. ```swift import UIKit class OTPVerificationViewController: UIViewController { private var otpView: DPOTPView! private var submitButton: UIButton! private var resendButton: UIButton! // Not used in this example but declared private var activityIndicator: UIActivityIndicatorView! override func viewDidLoad() { super.viewDidLoad() setupUI() } private func setupUI() { view.backgroundColor = .systemBackground // Configure OTP View otpView = DPOTPView(frame: CGRect(x: 40, y: 200, width: view.frame.width - 80, height: 60)) otpView.count = 6 otpView.spacing = 12 otpView.fontTextField = UIFont.monospacedDigitSystemFont(ofSize: 24, weight: .semibold) otpView.textColorTextField = .label otpView.backGroundColorTextField = .systemGray6 otpView.backGroundColorFilledTextField = .systemGray5 otpView.cornerRadiusTextField = 10 otpView.borderColorTextField = .systemGray4 otpView.borderWidthTextField = 1 otpView.selectedBorderColorTextField = .systemBlue otpView.selectedBorderWidthTextField = 2 otpView.dismissOnLastEntry = false otpView.dpOTPViewDelegate = self view.addSubview(otpView) // Submit Button submitButton = UIButton(type: .system) submitButton.frame = CGRect(x: 40, y: 300, width: view.frame.width - 80, height: 50) submitButton.setTitle("Verify", for: .normal) submitButton.backgroundColor = .systemBlue submitButton.setTitleColor(.white, for: .normal) submitButton.layer.cornerRadius = 10 submitButton.addTarget(self, action: #selector(submitTapped), for: .touchUpInside) submitButton.isEnabled = false submitButton.alpha = 0.5 view.addSubview(submitButton) // Activity Indicator activityIndicator = UIActivityIndicatorView(style: .medium) activityIndicator.center = CGPoint(x: view.center.x, y: 370) activityIndicator.hidesWhenStopped = true view.addSubview(activityIndicator) } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) _ = otpView.becomeFirstResponder() } @objc private func submitTapped() { guard otpView.validate(), let code = otpView.text else { showAlert(title: "Error", message: "Please enter complete verification code") return } verifyOTP(code) } private func verifyOTP(_ code: String) { setLoading(true) // Simulate API call DispatchQueue.main.asyncAfter(deadline: .now() + 2) { [weak self] in self?.setLoading(false) if code == "123456" { // Demo: correct code self?.showAlert(title: "Success", message: "Verification complete!") } else { self?.showAlert(title: "Invalid Code", message: "Please try again") self?.otpView.text = "" _ = self?.otpView.becomeFirstResponder() } } } private func setLoading(_ loading: Bool) { submitButton.isEnabled = !loading if loading { activityIndicator.startAnimating() } else { activityIndicator.stopAnimating() } } private func showAlert(title: String, message: String) { let alert = UIAlertController(title: title, message: message, preferredStyle: .alert) alert.addAction(UIAlertAction(title: "OK", style: .default)) present(alert, animated: true) } } extension OTPVerificationViewController: DPOTPViewDelegate { func dpOTPViewAddText(_ text: String, at position: Int) { let isComplete = text.count == 6 submitButton.isEnabled = isComplete submitButton.alpha = isComplete ? 1.0 : 0.5 } func dpOTPViewRemoveText(_ text: String, at position: Int) { submitButton.isEnabled = false submitButton.alpha = 0.5 } func dpOTPViewChangePositionAt(_ position: Int) {} func dpOTPViewBecomeFirstResponder() {} func dpOTPViewResignFirstResponder() {} } ``` -------------------------------- ### Initialize DPOTPView Programmatically Source: https://github.com/datt1994/dpotpview/blob/master/README.md Configure and add an OTP view instance to the view hierarchy. ```swift let txtOTPView = DPOTPView(frame: CGRect(x: (self.view.frame.width - 250)/2, y: txtDPOTPView.frame.origin.y + 50, width: 250, height: 60)) txtOTPView.count = 5 txtOTPView.spacing = 10 txtOTPView.fontTextField = UIFont(name: "HelveticaNeue-Bold", size: CGFloat(25.0))! txtOTPView.dismissOnLastEntry = true txtOTPView.borderColorTextField = .black txtOTPView.selectedBorderColorTextField = .blue txtOTPView.borderWidthTextField = 2 txtOTPView.backGroundColorTextField = .lightGray txtOTPView.cornerRadiusTextField = 8 txtOTPView.isCursorHidden = true //txtOTPView.isSecureTextEntry = true //txtOTPView.isBottomLineTextField = true //txtOTPView.isCircleTextField = true view.addSubview(txtOTPView) ``` -------------------------------- ### Configure Podfile Source: https://github.com/datt1994/dpotpview/blob/master/README.md Specify the DPOTPView dependency in your project's Podfile. ```ruby source 'https://github.com/CocoaPods/Specs.git' platform :ios, '8.0' target 'TargetName' do use_frameworks! pod 'DPOTPView' end ``` -------------------------------- ### Using DPOTPView with Interface Builder Source: https://context7.com/datt1994/dpotpview/llms.txt Configure the view visually in Storyboard or XIB files and supplement with code for properties not available in the Attributes Inspector. ```swift // 1. Add UIView to Storyboard // 2. Set Custom Class to "DPOTPView" in Identity Inspector // 3. Configure properties in Attributes Inspector: // - Count: 6 // - Spacing: 10 // - Text Color TextField: (pick color) // - Border Color TextField: (pick color) // - Is Circle Text Field: ON/OFF // - Is Bottom Line Text Field: ON/OFF // - Is Secure Text Entry: ON/OFF // 4. Create IBOutlet and configure additional properties in code class StoryboardOTPController: UIViewController { @IBOutlet weak var otpView: DPOTPView! override func viewDidLoad() { super.viewDidLoad() // Additional configuration not available in IB otpView.dpOTPViewDelegate = self otpView.keyboardType = .numberPad // Dynamic count change (works at runtime) otpView.count = 6 } } extension StoryboardOTPController: DPOTPViewDelegate { func dpOTPViewAddText(_ text: String, at position: Int) { // Handle text entry } func dpOTPViewRemoveText(_ text: String, at position: Int) { // Handle deletion } func dpOTPViewChangePositionAt(_ position: Int) {} func dpOTPViewBecomeFirstResponder() {} func dpOTPViewResignFirstResponder() {} } ``` -------------------------------- ### Implement Delegate Methods Source: https://github.com/datt1994/dpotpview/blob/master/README.md Handle text changes and focus events using the DPOTPViewDelegate protocol. ```swift extension ViewController : DPOTPViewDelegate { func dpOTPViewAddText(_ text: String, at position: Int) { print("addText:- " + text + " at:- \(position)" ) } func dpOTPViewRemoveText(_ text: String, at position: Int) { print("removeText:- " + text + " at:- \(position)" ) } func dpOTPViewChangePositionAt(_ position: Int) { print("at:-\(position)") } func dpOTPViewBecomeFirstResponder() { } func dpOTPViewResignFirstResponder() { } } ``` -------------------------------- ### Create IBDesignable Subclass Source: https://github.com/datt1994/dpotpview/blob/master/README.md Workaround for using DPOTPView in Interface Builder with Carthage. ```swift @IBDesignable class OTPView : DPOTPView {} ``` -------------------------------- ### Implementing DPOTPViewDelegate Source: https://context7.com/datt1994/dpotpview/llms.txt Use this delegate to handle text entry, deletion, cursor movement, and keyboard focus events. Ensure the delegate is assigned to the view instance. ```swift class VerificationViewController: UIViewController { @IBOutlet weak var otpView: DPOTPView! @IBOutlet weak var statusLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() otpView.dpOTPViewDelegate = self otpView.count = 6 otpView.dismissOnLastEntry = false // Handle completion in delegate } } extension VerificationViewController: DPOTPViewDelegate { // Called when text is added to a field func dpOTPViewAddText(_ text: String, at position: Int) { print("OTP updated: \(text), position: \(position)") statusLabel.text = "Entered \(text.count) of 6 digits" // Auto-submit when all fields filled if text.count == 6 { verifyCode(text) } } // Called when text is removed (backspace) func dpOTPViewRemoveText(_ text: String, at position: Int) { print("Text removed at position: \(position), remaining: \(text)") statusLabel.text = "Entered \(text.count) of 6 digits" } // Called when cursor position changes between fields func dpOTPViewChangePositionAt(_ position: Int) { print("Now editing field at position: \(position)") } // Called when OTP view becomes first responder (keyboard shows) func dpOTPViewBecomeFirstResponder() { print("Keyboard appeared") statusLabel.text = "Enter verification code" } // Called when OTP view resigns first responder (keyboard hides) func dpOTPViewResignFirstResponder() { print("Keyboard dismissed") } private func verifyCode(_ code: String) { statusLabel.text = "Verifying..." // API verification call } } ``` -------------------------------- ### Create DPOTPView Programmatically Source: https://context7.com/datt1994/dpotpview/llms.txt Instantiate and configure a DPOTPView instance programmatically within a ViewController. Set the number of fields, spacing, and various appearance properties like fonts, colors, corner radius, and border styles. Behavior options such as dismissing the keyboard on the last entry and hiding the cursor are also configurable. ```swift import UIKit class ViewController: UIViewController { var otpView: DPOTPView! override func viewDidLoad() { super.viewDidLoad() // Create OTP view with frame otpView = DPOTPView(frame: CGRect(x: 50, y: 200, width: 280, height: 60)) // Configure number of fields otpView.count = 6 otpView.spacing = 10 // Configure appearance otpView.fontTextField = UIFont(name: "HelveticaNeue-Bold", size: 25.0)! otpView.textColorTextField = .black otpView.backGroundColorTextField = .lightGray otpView.cornerRadiusTextField = 8 // Configure borders otpView.borderColorTextField = .gray otpView.borderWidthTextField = 2 otpView.selectedBorderColorTextField = .blue otpView.selectedBorderWidthTextField = 3 // Behavior options otpView.dismissOnLastEntry = true otpView.isCursorHidden = true view.addSubview(otpView) } } ``` -------------------------------- ### Configure Cartfile Source: https://github.com/datt1994/dpotpview/blob/master/README.md Specify the DPOTPView dependency in your project's Cartfile. ```ogdl github "Datt1994/DPOTPView" ``` -------------------------------- ### Interact with DPOTPView Source: https://github.com/datt1994/dpotpview/blob/master/README.md Methods for setting, retrieving, and validating OTP text. ```swift txtDPOTPView.text = "1234" // set text print(txtDPOTPView.text ?? "") // get text txtDPOTPView.validate() // validate all text entry _ = txtDPOTPView.becomeFirstResponder() ``` -------------------------------- ### Control Keyboard and First Responder Behavior Source: https://context7.com/datt1994/dpotpview/llms.txt Manage keyboard display and focus using `becomeFirstResponder()` and `resignFirstResponder()`. Configure keyboard type and add custom input accessory views. ```swift class OTPEntryController: UIViewController { @IBOutlet weak var otpView: DPOTPView! override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) // Automatically show keyboard when view appears _ = otpView.becomeFirstResponder() } // Dismiss keyboard @IBAction func dismissKeyboard() { _ = otpView.resignFirstResponder() } // Configure keyboard type func configureKeyboard() { otpView.keyboardType = .numberPad // Default is asciiCapableNumberPad otpView.isDarkKeyboard = true } // Add custom input accessory view (toolbar) func addKeyboardToolbar() { let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50)) toolbar.barStyle = .default toolbar.items = [ UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(cancelTapped)), UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil), UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(doneTapped)) ] toolbar.sizeToFit() otpView.inputAccessoryViewForAll = toolbar } @objc func cancelTapped() { otpView.text = "" _ = otpView.resignFirstResponder() } @objc func doneTapped() { if otpView.validate() { _ = otpView.resignFirstResponder() submitOTP() } } func submitOTP() { // Submit logic } } ``` -------------------------------- ### Configure Secure Text Entry for Passcode Input Source: https://context7.com/datt1994/dpotpview/llms.txt Enable secure entry with `isSecureTextEntry` to mask input with dots. Optionally hide the cursor and use a dark keyboard. ```swift let passcodeView = DPOTPView(frame: CGRect(x: 50, y: 150, width: 250, height: 60)) passcodeView.count = 4 passcodeView.spacing = 20 // Enable secure entry (shows dots instead of numbers) passcodeView.isSecureTextEntry = true // Hide cursor for cleaner look passcodeView.isCursorHidden = true // Use dark keyboard passcodeView.isDarkKeyboard = true // Auto-dismiss keyboard after last digit passcodeView.dismissOnLastEntry = true // Style for passcode appearance passcodeView.isCircleTextField = true passcodeView.backGroundColorTextField = .systemGray6 passcodeView.backGroundColorFilledTextField = .systemBlue // Filled circles turn blue passcodeView.borderColorTextField = .clear view.addSubview(passcodeView) ``` -------------------------------- ### Configure Circular and Bottom Line OTP Fields Source: https://context7.com/datt1994/dpotpview/llms.txt Use `isCircleTextField` for circular fields or `isBottomLineTextField` for minimalist bottom-line styles. Customize colors and borders for each. ```swift let circleOTPView = DPOTPView(frame: CGRect(x: 50, y: 100, width: 280, height: 60)) circleOTPView.count = 4 circleOTPView.spacing = 15 circleOTPView.isCircleTextField = true // Fields become circular circleOTPView.backGroundColorTextField = .systemGray5 circleOTPView.borderColorTextField = .systemGray3 circleOTPView.borderWidthTextField = 2 circleOTPView.selectedBorderColorTextField = .systemBlue view.addSubview(circleOTPView) // Bottom line style (minimalist) let lineOTPView = DPOTPView(frame: CGRect(x: 50, y: 200, width: 280, height: 60)) lineOTPView.count = 6 lineOTPView.spacing = 8 lineOTPView.isBottomLineTextField = true // Only show bottom border lineOTPView.borderColorTextField = .gray lineOTPView.borderWidthTextField = 2 lineOTPView.selectedBorderColorTextField = .blue lineOTPView.selectedBorderWidthTextField = 3 lineOTPView.backGroundColorTextField = .clear view.addSubview(lineOTPView) ``` -------------------------------- ### Configure DPOTPView Text Field Appearance Source: https://context7.com/datt1994/dpotpview/llms.txt Customize the visual styling of individual OTP text fields within DPOTPView. This includes text properties, background colors, border styles, shadow effects, and cursor tint color. The background can be a solid color, a filled color that changes upon text entry, or an image. ```swift // Basic text styling otpView.textColorTextField = UIColor.darkGray otpView.fontTextField = UIFont.systemFont(ofSize: 30, weight: .medium) otpView.placeholderTextColor = UIColor.lightGray otpView.placeholder = "----" // One char per field // Background configuration otpView.backGroundColorTextField = UIColor.white otpView.backGroundColorFilledTextField = UIColor(white: 0.95, alpha: 1.0) // Changes when text entered otpView.backGroundImageTextField = UIImage(named: "otp_field_bg") // Optional background image // Border styling otpView.borderColorTextField = UIColor.gray otpView.borderWidthTextField = 1.5 otpView.selectedBorderColorTextField = UIColor.systemBlue otpView.selectedBorderWidthTextField = 2.0 otpView.cornerRadiusTextField = 10 // Shadow effects otpView.shadowColorTextField = UIColor.black otpView.shadowRadiusTextField = 4.0 otpView.shadowOpacityTextField = 0.2 otpView.shadowOffsetSizeTextField = CGSize(width: 0, height: 2) // Cursor/tint color otpView.tintColorTextField = UIColor.systemBlue ``` -------------------------------- ### Manage OTP Text Values and Validation Source: https://context7.com/datt1994/dpotpview/llms.txt Set OTP values programmatically using the `text` property and validate input with the `validate()` method. This is useful for pre-filling OTPs or verifying user input. ```swift class OTPViewController: UIViewController { @IBOutlet weak var otpView: DPOTPView! override func viewDidLoad() { super.viewDidLoad() otpView.count = 6 } // Pre-fill OTP (e.g., from SMS auto-fill) func prefillOTP(_ code: String) { otpView.text = code // Sets "123456" across all fields } // Get current OTP value func getCurrentOTP() -> String { return otpView.text ?? "" // Returns combined text like "123456" } // Validate all fields are filled with numbers func validateOTP() -> Bool { return otpView.validate() // Returns true if all fields have valid numbers } @IBAction func submitTapped(_ sender: UIButton) { if otpView.validate() { let otp = otpView.text ?? "" print("Submitting OTP: \(otp)") verifyOTP(otp) } else { showError("Please enter complete OTP") } } func verifyOTP(_ code: String) { // API call to verify OTP } func showError(_ message: String) { // Show error alert } } ``` -------------------------------- ### Configuring Text Edge Insets Source: https://context7.com/datt1994/dpotpview/llms.txt Adjust the padding of text within the OTP fields for both editing and non-editing states using UIEdgeInsets. ```swift let otpView = DPOTPView(frame: CGRect(x: 50, y: 200, width: 280, height: 70)) otpView.count = 4 otpView.spacing = 15 otpView.fontTextField = UIFont.systemFont(ofSize: 30, weight: .bold) // Adjust text position when not editing otpView.textEdgeInsets = UIEdgeInsets(top: 0, left: -1, bottom: 0, right: 0) // Adjust text position while editing otpView.editingTextEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) view.addSubview(otpView) ``` -------------------------------- ### Dynamic Field Count Update Source: https://context7.com/datt1994/dpotpview/llms.txt Modify the number of OTP fields at runtime. Clearing the text property is recommended when changing the count. ```swift class DynamicOTPViewController: UIViewController { @IBOutlet weak var otpView: DPOTPView! @IBOutlet weak var segmentControl: UISegmentedControl! override func viewDidLoad() { super.viewDidLoad() otpView.count = 4 // Initial count } @IBAction func segmentChanged(_ sender: UISegmentedControl) { // Dynamically change field count switch sender.selectedSegmentIndex { case 0: otpView.count = 4 // 4-digit OTP case 1: otpView.count = 6 // 6-digit OTP case 2: otpView.count = 8 // 8-digit OTP default: break } // Clear existing text when count changes otpView.text = "" // Automatically becomes first responder if it was before _ = otpView.becomeFirstResponder() } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.