UGUI实现4位验证码输入

原本在电脑上开发一个验证码功能不是什么难题,4个InputField就搞定了,依次监听InputField的onValueChanged,当value.length == 1时跳转至下一个InputField,并ActiveField即可。

但是到了手机上,跳转至下一个InputField时,手机键盘会收缩,然后再弹出,然而,手机上的键盘如果间隔过短,会出现收回后不再弹出的情况。即使设置了0.2秒的间隔,也会因为手机键盘反复伸缩导致用户输入验证码出现间断感,极大降低了体验。

那么有没有办法实现这个功能呢?当然有啦!

虽然说NGUI完全可以通过设置字间距来完成,但是UGUI的InputField并没有这样的属性。因此,得通过一些黑科技来实现。

此外,其他大佬用代码实现了UGUI的InputField的字间距设置,但是本篇主要是讲述黑科技方法。

先看下这个预制体结构:

在这个InputField下添加了4个VCode(UnityEngine.UI.Text)组件,并在对应的下方添加了一个Line(Image)的子物体,用来做下划线。(每当一位验证码输入完成后,跳转至下一个Text组件显示新的验证码,切已输入的验证码的下划线变成蓝色)

是不是有思路了,没错,就是用4个Text组件来显示验证码,而InputField这是用来接收用户输入而已(不显示输入结果)。

这样的情况下,不会因为跳转InputField导致手机键盘反复伸缩或间隔过小而导致手机键盘不再弹出等问题。

每当用户输入的验证码位数发生变化,则将对应的位数赋给对应的Text,这样就做到了只使用1个InputField来输入4位验证码,而无需关心验证码之间的间距长度了。

既然逻辑构思好了,代码就不难了。

using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class VerifyCodePanel : ILoginChild
{

  public const int VERIFY_CODE_LENGTH = 4;

  public InputField VCodeInput;
  public Text[] VCodes = new Text[VERIFY_CODE_LENGTH];

  //外部选择蓝色与灰色,分别表示已输入(Blue)和未输入(Gray)
  public Color Blue;
  public Color Gray;

  private int m_lastVcodeLength = 0;

  void Start()
  {
    //外部设置VCodeInput等组件,或使用代码获取,这必须在初始化或之前设置完成
    //UIUtility是自己实现的一个针对UI组件获取与绑定的一个工具
    VCodeInput = UIUtility.GetChildControl<InputField>("VCodeInput", transform);
    BindUIEvents();
  }

  private void BindUIEvents()
  {
    //绑定VCodeInput的值变化,外部绑定和代码绑定皆可,这里使用的是自己实现的一个UI工具
    UIUtility.BindUIEvent(EventTypeEnum.InputFieldOnValueChanged,
      OnVCodeValueChanged, VCodeInput.transform);
  }

  // 监听输入的字符变化
  private void OnVCodeValueChanged(string value)
  {
    //外部已经设置好VCodeInput的长度限制,最多为4,但是为了避免意外情况,限制字符长度
    if (value.Length < 0 || value.Length > 4)
    {
      return;
    }
    //判断字符是边长了还是变短了,用以决定Text的跳转方向
    bool next = false;
    //分割字符,默认为空,如果是长度增加,则说明输入了新的验证码,将这个验证码记录下来
    string character = string.Empty;
    //比较与上一次输入的验证码长度,缺省长度为0
    if(value.Length > m_lastVcodeLength)
    {
      next = true;
      character = value[value.Length - 1].ToString();
    }
    m_lastVcodeLength = value.Length;
    int which = value.Length - 1;
    OnMoveCursor(next, which, character);
  }

  //移动光标(实际上是操作用来显示验证码的Text)
  private void OnMoveCursor(bool next, int which, string character)
  {
    //将值赋给对应的Text
    if (next)
    {
      VCodes[which].text = character;
      SetLineColor(which, Blue);
    }
    else
    {
      /*这里比较绕,如果是回退,则说明当前的which其实是已经退格后的位数,
      * 比如说,原本是输入了123,退格后则变成了12,
      * 那么which的值为value.length - 1 = 1; value.length为2
      * 而我们需要将原本第三位(从0开始计数,值为2)的Text设置为空
      * 因此需要i + 1,而为了避免用户全选并删除所有验证码的情况,需要遍历
      */
      for (int i = which; i < VERIFY_CODE_LENGTH - 1; ++i)
      {
        VCodes[i + 1].text = character;
        SetLineColor(i + 1, Gray);
      }
    }
  }

  //设置相应Text的Line的颜色
  private void SetLineColor(int which, Color color)
  {
    VCodes[which].transform.GetChild(0).GetComponent<Image>().color = color;
  }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ASP.net 验证码实现代码(C#)

    public class ValidateCode : System.Web.UI.Page {   private void Page_Load(object sender, System.EventArgs e)   {    this.CreateCheckCodeImage(GenerateCheckCode());   }   #region Web 窗体设计器生成的代码   override protected void OnInit(EventArgs e)   {    //  

  • C#验证码识别类完整实例

    本文实例讲述了C#验证码识别类.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Drawing; using System.Drawing.Imaging; using System.Runtime.InteropServices; namespace 验证码处理 { class VerifyCode {

  • 使用C#的aforge类库识别验证码实例

    时间过得真快啊,转眼今年就要过去了,大半年都没有写博客了,要说时间嘛,花在泡妹子和搞英语去了,哈哈...前几天老大问我 怎么这么长时间都没写博客了,好吧,继续坚持,继续分享我的心得体会. 这个系列我们玩玩aforge.net,套用官方都话就是一个专门为开发者和研究者基于C#框架设计的,这个框架提供了不同的类库和关于类库的 资源,还有很多应用程序例子,包括计算机视觉与人工智能,图像处理,神经网络,遗传算法,机器学习,机器人等领域,这个系列研究的重点 就是瞎几把搞下AForge.Imaging这个命

  • Asp.net(C#)实现验证码功能代码

    新建一个专门用来创建验证码图片的页面ValidateCode.aspx 它的后台cs文件代码如下: PageLoad 复制代码 代码如下: private void Page_Load(object sender, System.EventArgs e) { string checkCode = CreateRandomCode(4); Session["CheckCode"] = checkCode; CreateImage(checkCode); } 其中CreateRandomC

  • asp.net(C#) 生成随机验证码的代码

    常用的生成验证码程序 ,图片效果如下:    源程序如下: 复制代码 代码如下: using System;  using System.IO;  using System.Drawing;  using System.Drawing.Imaging;  using System.Text;  using System.Collections;  using System.Web;  using System.Web.UI;  using System.Web.UI.WebControls; 

  • C#代码实现短信验证码接口示例

    本文实例为大家分享了C#实现短信验证码接口示例,供大家参考,具体内容如下 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Net.Security; using System.Security.Cryptography.X509Certificates; using System.Net; using System.IO; using System

  • c# .net 生成图片验证码的代码

    说明:  .net 万岁...  .net framework 的类库真是太强了, 用 GDI+ 可以干N多N多事情.   广告时间:  shawl.qiu C# CMS 系统 预计40天后开始编码, 现在逐步设计中, 免得到时求职说什么什么作品...唉.  PS: 今天求职真是惨不忍睹, 谁要招网页相关的请联系 13435580019, 邱先生.   什么地方俺都去, 工资只要能过活就行,  但是食宿问题得解决.  shawl.qiu  2007-02-01  http://blog.csdn

  • C#实现的一款比较美观的验证码完整实例

    本文实例讲述了C#实现的一款比较美观的验证码.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; using System.IO; using System.Drawing.Imaging; public partial class

  • c#实现识别图片上的验证码数字

    public void imgdo(Bitmap img) { //去色 Bitmap btp = img; Color c = new Color(); int rr, gg, bb; for (int i = 0; i < btp.Width; i++) { for (int j = 0; j < btp.Height; j++) { //取图片当前的像素点 c = btp.GetPixel(i, j); rr = c.R; gg = c.G; bb = c.B; //改变颜色 if (r

  • C#实现的简单验证码识别实例

    最近做一个小玩意需要识别验证码,之前从来没有接触过识别验证码这块,这可难倒了我.所以,在网上搜索如何识别验证码,许多前辈写的博文教会了我.怕以后又忘记了,故此写篇随笔记录. 我要识别的验证码是一种非常简单,如图: 识别步骤: 1.图片灰度化(把彩色的验证码图片转换成灰色的图片).图片二值化 复制代码 代码如下: for (int i = 0; i < bmp.Width; i++)             {                 for (int j = 0; j < bmp.He

随机推荐