UGUI實現(xiàn)4位驗證碼輸入
原本在電腦上開發(fā)一個驗證碼功能不是什么難題,4個InputField就搞定了,依次監(jiān)聽InputField的onValueChanged,當value.length == 1時跳轉(zhuǎn)至下一個InputField,并ActiveField即可。

但是到了手機上,跳轉(zhuǎn)至下一個InputField時,手機鍵盤會收縮,然后再彈出,然而,手機上的鍵盤如果間隔過短,會出現(xiàn)收回后不再彈出的情況。即使設(shè)置了0.2秒的間隔,也會因為手機鍵盤反復伸縮導致用戶輸入驗證碼出現(xiàn)間斷感,極大降低了體驗。
那么有沒有辦法實現(xiàn)這個功能呢?當然有啦!
雖然說NGUI完全可以通過設(shè)置字間距來完成,但是UGUI的InputField并沒有這樣的屬性。因此,得通過一些黑科技來實現(xiàn)。
此外,其他大佬用代碼實現(xiàn)了UGUI的InputField的字間距設(shè)置,但是本篇主要是講述黑科技方法。
先看下這個預制體結(jié)構(gòu):

在這個InputField下添加了4個VCode(UnityEngine.UI.Text)組件,并在對應(yīng)的下方添加了一個Line(Image)的子物體,用來做下劃線。(每當一位驗證碼輸入完成后,跳轉(zhuǎn)至下一個Text組件顯示新的驗證碼,切已輸入的驗證碼的下劃線變成藍色)
是不是有思路了,沒錯,就是用4個Text組件來顯示驗證碼,而InputField這是用來接收用戶輸入而已(不顯示輸入結(jié)果)。
這樣的情況下,不會因為跳轉(zhuǎn)InputField導致手機鍵盤反復伸縮或間隔過小而導致手機鍵盤不再彈出等問題。
每當用戶輸入的驗證碼位數(shù)發(fā)生變化,則將對應(yīng)的位數(shù)賦給對應(yīng)的Text,這樣就做到了只使用1個InputField來輸入4位驗證碼,而無需關(guān)心驗證碼之間的間距長度了。
既然邏輯構(gòu)思好了,代碼就不難了。
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()
{
//外部設(shè)置VCodeInput等組件,或使用代碼獲取,這必須在初始化或之前設(shè)置完成
//UIUtility是自己實現(xiàn)的一個針對UI組件獲取與綁定的一個工具
VCodeInput = UIUtility.GetChildControl<InputField>("VCodeInput", transform);
BindUIEvents();
}
private void BindUIEvents()
{
//綁定VCodeInput的值變化,外部綁定和代碼綁定皆可,這里使用的是自己實現(xiàn)的一個UI工具
UIUtility.BindUIEvent(EventTypeEnum.InputFieldOnValueChanged,
OnVCodeValueChanged, VCodeInput.transform);
}
// 監(jiān)聽輸入的字符變化
private void OnVCodeValueChanged(string value)
{
//外部已經(jīng)設(shè)置好VCodeInput的長度限制,最多為4,但是為了避免意外情況,限制字符長度
if (value.Length < 0 || value.Length > 4)
{
return;
}
//判斷字符是邊長了還是變短了,用以決定Text的跳轉(zhuǎn)方向
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)
{
//將值賦給對應(yīng)的Text
if (next)
{
VCodes[which].text = character;
SetLineColor(which, Blue);
}
else
{
/*這里比較繞,如果是回退,則說明當前的which其實是已經(jīng)退格后的位數(shù),
* 比如說,原本是輸入了123,退格后則變成了12,
* 那么which的值為value.length - 1 = 1; value.length為2
* 而我們需要將原本第三位(從0開始計數(shù),值為2)的Text設(shè)置為空
* 因此需要i + 1,而為了避免用戶全選并刪除所有驗證碼的情況,需要遍歷
*/
for (int i = which; i < VERIFY_CODE_LENGTH - 1; ++i)
{
VCodes[i + 1].text = character;
SetLineColor(i + 1, Gray);
}
}
}
//設(shè)置相應(yīng)Text的Line的顏色
private void SetLineColor(int which, Color color)
{
VCodes[which].transform.GetChild(0).GetComponent<Image>().color = color;
}
}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
C#中一個方法返回多個值的實現(xiàn)方法小結(jié)
通常一個方法只能返回一個值,但是如果在某些時候,我們想要返回多個值,例如某個方法將一個浮點數(shù)分割成一個整數(shù)和一個小數(shù)返回,因此本文給大家介紹了C#中一個方法返回多個值的實現(xiàn)方法及示例代碼,需要的朋友可以參考下2024-05-05
C#基于JsonConvert解析Json數(shù)據(jù)的方法實例
最近初接觸C#語言,發(fā)現(xiàn)JSON解析這塊和JAVA差異過大,下面這篇文章主要給大家介紹了關(guān)于C#基于JsonConvert解析Json數(shù)據(jù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04

