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 archive my required view, but there is some issue 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 >> center plane select Single View App >> click Next.

Step 2:

             Next, give your Application Name, Device type, Identifier, select target Version and click OK.

Followed by check the app name and solution name, then click Create.

Step 3:

                  Now, open Storyboard in your interface builder using the right click of Main.Storyboard >> In the context menu select Open with  >> followed by XCode Interface Builder because my favorite designer is Xcode.

              Afterward, Drag Horizontal Stack View from Toolbox and place Storyboard as per your requirement and set perfect Constraint to this view. Next, drag TextField from Toolbox and place inside the StackView and set height and width of TextField. Create an outlet for this TextField to access from code-behind. Here, I set field names are fieldOne, fieldTwo, fieldThree, fieldFour.

Stack View

OTP View Xamarin iOS

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 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.

using Foundation;
using System;
using UIKit;

namespace OTPSample
{
    public partial class ViewController : UIViewController, IUITextFieldDelegate
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.

            fieldOne.Delegate = this;
            fieldTwo.Delegate = this;
            fieldThree.Delegate = this;
            fieldFour.Delegate = this;

            fieldOne.BackgroundColor = UIColor.Clear;
            fieldTwo.BackgroundColor = UIColor.Clear;
            fieldThree.BackgroundColor = UIColor.Clear;
            fieldFour.BackgroundColor = UIColor.Clear;
        }

        [Export("textField:shouldChangeCharactersInRange:replacementString:")]
        public bool ShouldChangeCharacters(UITextField textField, NSRange range, string replacementString)
        {
            // Increment Responder change
            if (textField.Text?.Length < 1 && replacementString.Length > 0)
            {
                if (textField == fieldOne)
                    fieldTwo.BecomeFirstResponder();
                else if (textField == fieldTwo)
                    fieldThree.BecomeFirstResponder();
                else if (textField == fieldThree)
                    fieldFour.BecomeFirstResponder();
                else if (textField == fieldFour)
                    fieldFour.ResignFirstResponder();

                textField.Text = replacementString;
                return false;
            }
            //Decrement Responder change
            else if (textField.Text?.Length >= 1 && replacementString.Length == 0)
            {
                if (textField == fieldTwo)
                    fieldOne.BecomeFirstResponder();
                else if (textField == fieldThree)
                    fieldTwo.BecomeFirstResponder();
                else if (textField == fieldFour)
                    fieldThree.BecomeFirstResponder();
                else if (textField == fieldOne)
                    fieldOne.BecomeFirstResponder();

                textField.Text = "";
                return false;
            }
            else if (textField.Text?.Length >= 1)
            {
                textField.Text = replacementString;
                return false;
            }
            return true;
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

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 inside placed TextField
3. Create an outlet for Textfield
4. Implement IUXTextFieldDelegate to your View Controller and write some logic

Share, your comment below.