Latest 0.2.0
Homepage https://github.com/VatsalRustagi/VRCodeView
License MIT
Platforms ios 10.0
Authors

Language
Version
License
Platform

VRCodeView is a light-weight, highly customizable and beautiful subclass of UIView that allows the user to enter verification code characters one textfield at a time, and move back and forth smoothly.

VRCodeView

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

VRCodeView

Compatibility

VRCodeView is compatible with Swift 4.1 & iOS 10+.

Installation

VRCodeView is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'VRCodeView'

Initialize with Storyboard

1) Drag a UIView on the storyboard.
2) Subclass from VRCodeView using the Identity Inspector
3) Use the Attributes Inspector to make changes and see it live on the storyboard.

VRCodeView

Initialize with Code

It’s as simple as initalizing a regular UIView!


var codeView: VRCodeView?

...

override func viewDidLoad() {
      super.viewDidLoad()

  let width: CGFloat = 200
  let codeViewFrame = CGRect(x: view.frame.midX - width/2,
                             y: 150,
                             width: width,
                             height: 65)

  codeView = VRCodeView(frame: codeViewFrame)
  codeView?.delegate = self

  // ... Other setup
}

Delegate Usage

There is only one delegate method:

public protocol VRCodeViewDelegate: AnyObject {
  func didCompleteCodeEntry(codeEntered: String)
}

This methods gets called as soon as all the fields are filled up. It contains the code that the user entered.
Note: Make sure to set the delegate in order to use this method!!

Usage

Textfield properties

codeView?.font = UIFont(name: "Avenir", size: 20)!
codeView?.spacing = 5
codeView?.numberOfFields = 3

Textfield border properties

codeView?.cornerRadius = 10
codeView?.thickBorderColor = UIColor.purple
codeView?.thinBorderColor = UIColor.purple
codeView?.thickBorderWidth = 2.5
codeView?.thinBorderWidth = 1.0

Keyboard properties

// Type . and see the available options!
codeView?.allowedCharacters = .decimalDigits
codeView?.autocorrectionType = .no
codeView?.spellCheckingType = .no
codeView?.keyboardType = .decimalPad
codeView?.returnKeyType = .go

Note: allowedCharacters property is of type CharacterSet therefore you can make your own custom character set and assign it to this property.

Shadow Workaround

codeView?.backgroundColor = nil
codeView?.layer.shadowColor = UIColor.black.cgColor
codeView?.layer.shadowOffset = CGSize(width: 0, height: 0)
codeView?.layer.shadowRadius = 10.0
codeView?.layer.shadowOpacity = 0.4

Other properties and methods

.code : Returns a string of entered characters.

@IBAction func showCurrentLetters(_ sender: UIButton) {
print(codeView?.code)
}

isUpperCased : When set to true the view will convert any character to corresponding uppercased character.

codeView?.isUpperCased = true

.hasText : Returns a boolean value indicating if the view has any characters.

guard codeView?.hasText else {
return 
}
// Do something

.clear() : Removes all entered characters.

@IBAction func clearButtonPressed(_ sender: UIButton) {
codeView?.clear()
}

Default values for each property

Property Default Value
allowedCharacters CharacterSet.decimalDigits
keyboardType .asciiCapable
returnKeyType .done
autocorrectionType .no
spellCheckingType .no
numberOfFields 0
cornerRadius 3.0
thinBorderWidth 1.0
thickBorderWidth 3.0
thinBorderColor .black
thickBorderColor .black
spacing 10
font UIFont.systemFont(ofSize: 16, weight: .semibold)
isUpperCased false

Author

Vatsal Rustagi, [email protected]

License

VRCodeView is available under the MIT license. See the LICENSE file for more info.

Latest podspec

{
    "name": "VRCodeView",
    "version": "0.2.0",
    "summary": "A light-weight customizable UIView to enter verification codes written in Swift.",
    "description": "VRCodeView is a light-weight, highly customizable and beautiful subclass of UIView that allows the user to enter verification code characters one textfield at a time, and move back and forth smoothly.",
    "homepage": "https://github.com/VatsalRustagi/VRCodeView",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Vatsal Rustagi": "[email protected]"
    },
    "source": {
        "git": "https://github.com/VatsalRustagi/VRCodeView.git",
        "tag": "0.2.0"
    },
    "platforms": {
        "ios": "10.0"
    },
    "source_files": "Classes/*",
    "swift_version": "4.1"
}

Pin It on Pinterest

Share This