UGUI實(shí)現(xiàn)4位驗(yàn)證碼輸入
原本在電腦上開發(fā)一個驗(yàn)證碼功能不是什么難題,4個InputField就搞定了,依次監(jiān)聽InputField的onValueChanged,當(dāng)value.length == 1時跳轉(zhuǎn)至下一個InputField,并ActiveField即可。
但是到了手機(jī)上,跳轉(zhuǎn)至下一個InputField時,手機(jī)鍵盤會收縮,然后再彈出,然而,手機(jī)上的鍵盤如果間隔過短,會出現(xiàn)收回后不再彈出的情況。即使設(shè)置了0.2秒的間隔,也會因?yàn)槭謾C(jī)鍵盤反復(fù)伸縮導(dǎo)致用戶輸入驗(yàn)證碼出現(xiàn)間斷感,極大降低了體驗(yàn)。
那么有沒有辦法實(shí)現(xiàn)這個功能呢?當(dāng)然有啦!
雖然說NGUI完全可以通過設(shè)置字間距來完成,但是UGUI的InputField并沒有這樣的屬性。因此,得通過一些黑科技來實(shí)現(xiàn)。
此外,其他大佬用代碼實(shí)現(xiàn)了UGUI的InputField的字間距設(shè)置,但是本篇主要是講述黑科技方法。
先看下這個預(yù)制體結(jié)構(gòu):
在這個InputField下添加了4個VCode(UnityEngine.UI.Text)組件,并在對應(yīng)的下方添加了一個Line(Image)的子物體,用來做下劃線。(每當(dāng)一位驗(yàn)證碼輸入完成后,跳轉(zhuǎn)至下一個Text組件顯示新的驗(yàn)證碼,切已輸入的驗(yàn)證碼的下劃線變成藍(lán)色)
是不是有思路了,沒錯,就是用4個Text組件來顯示驗(yàn)證碼,而InputField這是用來接收用戶輸入而已(不顯示輸入結(jié)果)。
這樣的情況下,不會因?yàn)樘D(zhuǎn)InputField導(dǎo)致手機(jī)鍵盤反復(fù)伸縮或間隔過小而導(dǎo)致手機(jī)鍵盤不再彈出等問題。
每當(dāng)用戶輸入的驗(yàn)證碼位數(shù)發(fā)生變化,則將對應(yīng)的位數(shù)賦給對應(yīng)的Text,這樣就做到了只使用1個InputField來輸入4位驗(yàn)證碼,而無需關(guān)心驗(yà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]; //外部選擇藍(lán)色與灰色,分別表示已輸入(Blue)和未輸入(Gray) public Color Blue; public Color Gray; private int m_lastVcodeLength = 0; void Start() { //外部設(shè)置VCodeInput等組件,或使用代碼獲取,這必須在初始化或之前設(shè)置完成 //UIUtility是自己實(shí)現(xiàn)的一個針對UI組件獲取與綁定的一個工具 VCodeInput = UIUtility.GetChildControl<InputField>("VCodeInput", transform); BindUIEvents(); } private void BindUIEvents() { //綁定VCodeInput的值變化,外部綁定和代碼綁定皆可,這里使用的是自己實(shí)現(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; //分割字符,默認(rèn)為空,如果是長度增加,則說明輸入了新的驗(yàn)證碼,將這個驗(yàn)證碼記錄下來 string character = string.Empty; //比較與上一次輸入的驗(yàn)證碼長度,缺省長度為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); } //移動光標(biāo)(實(shí)際上是操作用來顯示驗(yàn)證碼的Text) private void OnMoveCursor(bool next, int which, string character) { //將值賦給對應(yīng)的Text if (next) { VCodes[which].text = character; SetLineColor(which, Blue); } else { /*這里比較繞,如果是回退,則說明當(dāng)前的which其實(shí)是已經(jīng)退格后的位數(shù), * 比如說,原本是輸入了123,退格后則變成了12, * 那么which的值為value.length - 1 = 1; value.length為2 * 而我們需要將原本第三位(從0開始計數(shù),值為2)的Text設(shè)置為空 * 因此需要i + 1,而為了避免用戶全選并刪除所有驗(yàn)證碼的情況,需要遍歷 */ 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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- ASP.net 驗(yàn)證碼實(shí)現(xiàn)代碼(C#)
- asp.net(C#) 生成隨機(jī)驗(yàn)證碼的代碼
- Asp.net(C#)實(shí)現(xiàn)驗(yàn)證碼功能代碼
- c#實(shí)現(xiàn)識別圖片上的驗(yàn)證碼數(shù)字
- C#驗(yàn)證碼識別類完整實(shí)例
- C#實(shí)現(xiàn)的一款比較美觀的驗(yàn)證碼完整實(shí)例
- c# .net 生成圖片驗(yàn)證碼的代碼
- 使用C#的aforge類庫識別驗(yàn)證碼實(shí)例
- C#實(shí)現(xiàn)的簡單驗(yàn)證碼識別實(shí)例
- C#代碼實(shí)現(xiàn)短信驗(yàn)證碼接口示例
相關(guān)文章
C#利用Refit實(shí)現(xiàn)JWT自動續(xù)期詳解
Refit?是一個受到Square的Retrofit庫(Java)啟發(fā)的自動類型安全REST庫,這篇文章主要為大家介紹了C#如何利用Refit實(shí)現(xiàn)JWT自動續(xù)期,感興趣的可以了解下2023-08-08C#中WPF ListView綁定數(shù)據(jù)的實(shí)例詳解
這篇文章主要介紹了C#中WPF ListView綁定數(shù)據(jù)的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家,讓大家理解掌握這部分內(nèi)容,需要的朋友可以參考下2017-10-10C#實(shí)現(xiàn)給PDF文檔設(shè)置過期時間
我們可以給一些重要文檔或者臨時文件設(shè)置過期時間和過期信息提示來提醒讀者或管理者文檔的時效性,并及時對文檔進(jìn)行調(diào)整、更新等。下面本文將介紹如何通過C#來給PDF文檔設(shè)置過期時間的方法。需要的可以參考一下2022-01-01C#實(shí)現(xiàn)關(guān)閉子窗口而不釋放子窗口對象的方法
下面小編就為大家?guī)硪黄狢#實(shí)現(xiàn)關(guān)閉子窗口而不釋放子窗口對象的方法 。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01C#取得Web程序和非Web程序的根目錄的N種取法總結(jié)
C#取得Web程序和非Web程序的根目錄的N種取法,方便大家知道,有更好的方法,請說明2008-03-03C# 中const,readonly,static的使用小結(jié)
這篇文章主要介紹了C# 中使用const,readonly,static的示例,幫助大家更好的理解和使用c#,感興趣的朋友可以了解下2021-01-01