PinInputView

PinInputView is an UIControl used to enter a pin code. The typical use case is two-factors authentication.

This component is really simple to use. You can easily customize the fonts and colors. It resizes automatically according to its configuration.

Features

• Custolizable font and color.
• As many digits as you need (from 1 to +∞).
• AutoLayout compatible (intrinsicContentSize updated according to the configuration).
• Interface-Builder compatible.
• Pure Swift 4.
• Open project: you have an issue or an idea ? Feel free to create an issue, or submit a PR :)

Integration

You can add PinInput to your UI using code or with Interface Builder.

Using code

This is as easy as:

• creating the PinInput object,
• adding it to your view,
• add some layout constraints (if you want),
• subscribe to target-action events to get noticed of value changes.

For example, in your viewDidLoad

 override func viewDidLoad() {
        super.viewDidLoad()

        self.pinInput = PinInput()
        self.view.addSubview(pinInput)

        // Just center the pinInput is its superView.
        // You can use any layout you want :)
        pinInput.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        pinInput.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        
        // Use target-action pattern to get noticed
        // of all value changes.
        pinInput.addTarget(self,
                           action: #selector(onPinValueChanged),
                           for: .valueChanged)
        // Or to know when the input is completed
        // (i.e. you have as many digits as you expect)
        pinInput.addTarget(self,
                           action: #selector(onInputCompleted),
                           for: .primaryActionTriggered)
        
    }
    @objc func onPinValueChanged() {
        print("Value changed to \(pinInput.textValue)")
    }
    @objc func onInputCompleted() {
        print("Input completed with \(pinInput.textValue)")
    }

Customisation

You can customise the number of digits, the font, and the text color. All these elements are dynamic: if you change one of them, the PinInput will relayout itself according to this new setup.

        pinInput.font = UIFont(name: "Baskerville-Bold", size: 72)!
        pinInput.textColor = .purple
        pinInput.length = 5

Get rid of target-action

If you don't want to use standard UIKit target-action pattern, you can use onValueChanged and onCompletion closures:

        pinInput.onValueChanged = {
            print("Value changed to \(self.pinInput.textValue)")
        }
        pinInput.onCompletion = {
            print("Input completed with \(self.pinInput.textValue)")
        }

Example

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

Requirements

• iOS 9.0 or above.
• Swift 4

Installation

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

pod 'PinInputView'

Author

Julien Quéré, @jlnquere, [email protected]

License

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