VRCodeView

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.

Example

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

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.

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

Author

Vatsal Rustagi, [email protected]

License

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