Skip to content
Passcode input view
Swift Ruby
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example
WWPasscodeInput
.DS_Store
.gitignore
.travis.yml
LICENSE
README.md
WWPasscodeInput.podspec
_Pods.xcodeproj

README.md

WWPasscodeInput

CI Status Version License Platform

screenshot example

Features

  • Set the length of input required
  • Set the size of input indicators
  • Set colours for background and borders of input indicators for idle and completed states
  • Set the border size of input indicators
  • Set custom font and text color for input previews
  • Check the input and completion of input via WWPasscodeInputDelegate

Example

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

Requirements

  • iOS 9.3+
  • Xcode 10.0+
  • Swift 4.2+

Installation

CocoaPods

To integrate WWPasscodeInput into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'WWPasscodeInput'

Manually

Download and add WWPasscodeInput.swift to your project.

Usage

Quick Start

Example using autolayout constraints.

import WWPasscodeInput

class MyViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let passcodeField = WWPasscodeInput()
        view.addSubview(passcodeField)
        
        passcodeField.translatesAutoresizingMaskIntoConstraints = false
        
        let horizontalConstraint = NSLayoutConstraint(item: passcodeField, attribute: NSLayoutConstraint.Attribute.centerX, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerX, multiplier: 1, constant: 0)
        let verticalConstraint = NSLayoutConstraint(item: passcodeField, attribute: NSLayoutConstraint.Attribute.centerY, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerY, multiplier: 1, constant: 0)
        view.addConstraints([horizontalConstraint, verticalConstraint])
    }

}

WWPasscodeInputDelegate

Handle input changes through the WWPasscodeInputDelegate by setting your instance delegate and implementing the passcodeInputDidChangeInput method as labelled below.

protocol WWPasscodeInputDelegate {
    func passcodeInputDidChangeInput(passcodeInput:WWPasscodeInput, completed:Bool, value:String?)
}

Customisation

WWPasscodeInput contains the ability to customise a number of properties detailed below.

Customise the font of the text that appears by using the font property. The label itself will centralise on the marker it represents.

The textColor of the label can be updated as required.

Set the character count of the WWPasscodeInput via the passcodeLimit property.

Adjust the size of the markers via the markerRadius property. It is also possible to update the border of the marker via markerBorderWidth.

To adjust the colour values of the markers in WWPasscodeInput you can update markerColour, markerOutlineColour, completedMarkerColour and completedMarkerOutlineColour where the completed prefix is used to identify the state of the marker once it's input has been completed.

Author

Nicholas Wood - thewhitewood.com / @thewhitewood

License

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

You can’t perform that action at this time.