Latest 0.1.0
Homepage https://github.com/jlnquere/PinInputView
License MIT
Platforms ios 9.0
Dependencies PureLayout
Frameworks UIKit
Authors

CI Status
Version
License
Platform

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.

Demo

Features

  • [x] Custolizable font and color.
  • [x] As many digits as you need (from 1 to +∞).
  • [x] AutoLayout compatible (intrinsicContentSize updated according to the configuration).
  • [x] Interface-Builder compatible.
  • [x] Pure Swift 4.
  • [x] 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

Result

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.

Latest podspec

{
    "name": "PinInputView",
    "version": "0.1.0",
    "summary": "PinInputView is a simple UIControl to enter pin codes",
    "description": "PinInputView is an `UIControl` used to enter a pin code. The typical use case is two-factors authentication. nnThis component is really simple to use. You can easily customize the fonts and colors. It resizes automatically according to its configuration.n### Featuresn- Custolizable font and color.n- As many digits as you need (from 1 to +u221e).n- AutoLayout compatible (`intrinsicContentSize` updated according to the configuration).n- Interface-Builder compatible.n- Pure Swift 4.n- Open project: you have an issue or an idea ? Feel free to [create an issue](https://github.com/jlnquere/PinInputView/issues/new), or submit a PR :)",
    "homepage": "https://github.com/jlnquere/PinInputView",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Julien Quu00e9ru00e9": "[email protected]"
    },
    "source": {
        "git": "https://github.com/jlnquere/PinInputView.git",
        "tag": "0.1.0"
    },
    "social_media_url": "https://twitter.com/jlnquere",
    "platforms": {
        "ios": "9.0"
    },
    "source_files": "PinInputView/Classes/**/*",
    "frameworks": "UIKit",
    "dependencies": {
        "PureLayout": []
    },
    "swift_version": "4.0"
}

Pin It on Pinterest

Share This