Custom inputView in iOS

Published in

Swift India

3 min readSep 19, 2018

For OTP or PIN kind of inputs(★★★★★★)

Hello All👋👋👋! Hope you are doing well!.. in this tutorial I’m going to show you how to create a customised inputview component which can be used in any iOS projects to take OTP or PIN kind of inputs. As usually this is an IBDesignable & IBInspectable class, which I named as ‘LKPINView’.

Let’s get started…

create a class with IBDesignable and add two IBInspectable properties to use for configuration of this control. Along with that, confirm the class to both UIControl and UIKeyInput types as well.

2. Next, implement (define) the UIKeyInput Protocol required methods as of the following.

hasText: Bool returns whether it contains text or not.
pinString: String is a custom property which stores the user input, and can be used to get the value on receiving action after editingDidEnd event.
insertText(_ : String)

Upon inserting a text, i.e entering a key(digit), we take that value and assign to the PINView type by increasing the tag value. once all the pinViews are assigned or completed, we send an action notification as well getting the actual pin value that user has entered.

deleteBackward() : By decreasing the tag, and then getting the PINView type, we delete the key value in that and assign an empty string value instead.
clear() : we perform deleteBackward method to delete all the values.

3. Next,

Override the keyboardtype computed property by setting the getter with numberPad.
define the nextTag property with the value 1
define a lazy property for the pinStack. it will be used to layout the pinViews uniformly without much work.
override the canBecomeFirstResponder Bool property with returning true.
Next add the initialisers for this class and override prepareForInterfaceBuilder() methods to render the control on IB.

Next, Add a helper methods, one for adding the sub-views to the control and the other one for layout the pins in the pinStack.

→ in setupViews method,

it is being called multiple times to reset the appearance of the control. so every time first we need to remove the existing pinViews first right before adding the actual number of pins to the stack again.

as well we need to remove and add the width constraints of the pinStack to make it to render perfectly.

We define the PINView by using a PINView type, that we defined in the control. This class(type) is responsible to the PINView appearance and also stores the User Input. It renders depends on the text, it contains. if it contains text, it will be filled up with yellow background colour else with white colour. same applies for the border colour as well. You can customise it more as you wish.

→ PINView :

Just go through the class, it is so easy and self explanatory as well. All it does is make the type as rounded and also stores the input key and as well changes the appearance on the input value.

→ Now let’s check how it works: