OTP View In Xamarin iOS

 

Introduction

 

In this demonstration, I will explain how to create OTP View in Xamarin iOS without using third-party plugins.

 

 

Issue

 

First, I'm using a third-party plugin to achieve my required view, but there is some issue if we want to customize the view.

 

Solution

 

Prerequisites

• Visual Studio for Mac
• XCode ( Optional )
• Simulator or Physical Device

Step 1

 

Open Visual Studio for Mac >> New >> In the left plane select App under iOS >> in the center plane select Single View App >> click Next.

 

 

Step 2

 

Next, give your application name, device type, identifier, select target version and click OK.

 

 

Check the app name and solution name, then click Create.

 

 

Step 3

 

Now, open Storyboard in your interface builder by right clicking on Main.Storyboard >> In the context menu select Open with >> followed by XCode Interface Builder (because my favorite designer is XCode). After this, drag Horizontal Stack View from the Toolbox and place the Storyboard as per your requirement and set a perfect constraint to this view. Next, drag TextField from the Toolbox and place it inside the StackView and set the height and width of TextField. Create an outlet for this TextField to access from the code-behind.

 

Here, I set field names as fieldOne, fieldTwo, fieldThree, fieldFour.

 

 

Step 4

 

Next, open ViewController.cs file by going >> Solution Explorer >> double click ViewController.cs file. Implement the ViewController class in IUITextFieldDelegate interface and override the ShouldChangeCharacters method. Here, I did simple logic to change the focus of one field to another field. In case you need to validate input in runtime, you can write your validation code before the ResignResponder method.

 

 

Step 5

 

Let's run your application. You will get output like below.

 

 

The full source code is here.

 

Summary

1. We created StackView
2. StackView was placed inside TextField
3. We created an outlet for Textfield
4. We implemented IUXTextFieldDelegate to your View Controller and wrote some logic.