KAPinField

Lightweight pin code field library for iOS, written in Swift

Supports one time password autofill out of the box !

Example

Install

With Cocoapods pod 'KAPinField'

Usage

import KAPinField

class MyController : UIVIewController {
  ...
}

Storyboard

You can add an UITextField directly in your Storyboard scene and declare it as KAPinField. It will automagically become a pin field. You can then customize it from the inspector view to suit your needs.

Delegation

Don't forget to set the delegate likeso :

@IBOutlet var pinField: KAPinField!

override func viewDidLoad() {
        super.viewDidLoad()
        properties.delegate = self
        ...
}

One simple method will be called on your delegate

extension MyController : KAPinFieldDelegate {
  func pinField(_ field: KAPinField, didFinishWith code: String) {
    print("didFinishWith : \(code)")
  }
}

Properties

All the logic properties are available in the KAPinFieldProperties struct named properties.

Token can't be a whitespace due to Apple handling of trailing spaces. You can achieve the same effect using any token with tokenColor and tokenFocusColor set to .clear

Logic

pinField.updateProperties { properties in
  properties.token = "-" // Default to "•", can't be a whitespace !
  properties.numberOfCharacters = 5 // Default to 4
  properties.validCharacters = "0123456789+#?" // Default to only numbers, "0123456789"
  properties.text = "123" // You can set part or all of the text
  properties.animateFocus = true // Animate the currently focused token
  properties.isSecure = false // Secure pinField will hide actual input
  properties.secureToken = "*" // Token used to hide actual character input when using isSecure = true
  properties.isUppercased = false // You can set this to convert input to uppercased.
}

Styling

All the styling can be done via the KAPinFieldAppearance struct named appearance.

pinField.updateAppearence { appearance in
  appearance.font = .menloBold(40) // Default to appearance.MonospacedFont.menlo(40)
  appearance.kerning = 20 // Space between characters, default to 16
  appearance.textColor = UIColor.white.withAlphaComponent(1.0) // Default to nib color or black if initialized programmatically.
  appearance.tokenColor = UIColor.black.withAlphaComponent(0.3) // token color, default to text color
  appearance.tokenFocusColor = UIColor.black.withAlphaComponent(0.3)  // token focus color, default to token color
  appearance.backOffset = 8 // Backviews spacing between each other
  appearance.backColor = UIColor.clear
  appearance.backBorderWidth = 1
  appearance.backBorderColor = UIColor.white.withAlphaComponent(0.2)
  appearance.backCornerRadius = 4
  appearance.backFocusColor = UIColor.clear
  appearance.backBorderFocusColor = UIColor.white.withAlphaComponent(0.8)
  appearance.backActiveColor = UIColor.clear
  appearance.backBorderActiveColor = UIColor.white
  appearance.keyboardType = UIKeyboardType.numberPad // Specify keyboard type
}

Font

A monospaced font is highly recommended in order to avoid horizontal offsetting during typing. For this purpose, a handy helper is available to allow you to access native iOS monospaced fonts. To use it, just set appearance.font with a enum value from appearance.MonospacedFont. You can of course still use your own font by setting the default font property on KAPinField.

Animation

KAPinField also provide some eye-candy for failure and success.

Success

pinfield.animateSuccess(with: "👍") {
    print("Success")
}

Failure

pinfield.animateFailure() {
   print("Failure")
}