UGUI實(shí)現(xiàn)4位驗(yàn)證碼輸入
原本在電腦上開(kāi)發(fā)一個(gè)驗(yàn)證碼功能不是什么難題,4個(gè)InputField就搞定了,依次監(jiān)聽(tīng)I(yíng)nputField的onValueChanged,當(dāng)value.length == 1時(shí)跳轉(zhuǎn)至下一個(gè)InputField,并ActiveField即可。
但是到了手機(jī)上,跳轉(zhuǎn)至下一個(gè)InputField時(shí),手機(jī)鍵盤(pán)會(huì)收縮,然后再?gòu)棾?,然而,手機(jī)上的鍵盤(pán)如果間隔過(guò)短,會(huì)出現(xiàn)收回后不再?gòu)棾龅那闆r。即使設(shè)置了0.2秒的間隔,也會(huì)因?yàn)槭謾C(jī)鍵盤(pán)反復(fù)伸縮導(dǎo)致用戶(hù)輸入驗(yàn)證碼出現(xiàn)間斷感,極大降低了體驗(yàn)。
那么有沒(méi)有辦法實(shí)現(xiàn)這個(gè)功能呢?當(dāng)然有啦!
雖然說(shuō)NGUI完全可以通過(guò)設(shè)置字間距來(lái)完成,但是UGUI的InputField并沒(méi)有這樣的屬性。因此,得通過(guò)一些黑科技來(lái)實(shí)現(xiàn)。
此外,其他大佬用代碼實(shí)現(xiàn)了UGUI的InputField的字間距設(shè)置,但是本篇主要是講述黑科技方法。
先看下這個(gè)預(yù)制體結(jié)構(gòu):
在這個(gè)InputField下添加了4個(gè)VCode(UnityEngine.UI.Text)組件,并在對(duì)應(yīng)的下方添加了一個(gè)Line(Image)的子物體,用來(lái)做下劃線。(每當(dāng)一位驗(yàn)證碼輸入完成后,跳轉(zhuǎn)至下一個(gè)Text組件顯示新的驗(yàn)證碼,切已輸入的驗(yàn)證碼的下劃線變成藍(lán)色)
是不是有思路了,沒(méi)錯(cuò),就是用4個(gè)Text組件來(lái)顯示驗(yàn)證碼,而InputField這是用來(lái)接收用戶(hù)輸入而已(不顯示輸入結(jié)果)。
這樣的情況下,不會(huì)因?yàn)樘D(zhuǎn)InputField導(dǎo)致手機(jī)鍵盤(pán)反復(fù)伸縮或間隔過(guò)小而導(dǎo)致手機(jī)鍵盤(pán)不再?gòu)棾龅葐?wèn)題。
每當(dāng)用戶(hù)輸入的驗(yàn)證碼位數(shù)發(fā)生變化,則將對(duì)應(yīng)的位數(shù)賦給對(duì)應(yīng)的Text,這樣就做到了只使用1個(gè)InputField來(lái)輸入4位驗(yàn)證碼,而無(wú)需關(guān)心驗(yàn)證碼之間的間距長(zhǎng)度了。
既然邏輯構(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)的一個(gè)針對(duì)UI組件獲取與綁定的一個(gè)工具 VCodeInput = UIUtility.GetChildControl<InputField>("VCodeInput", transform); BindUIEvents(); } private void BindUIEvents() { //綁定VCodeInput的值變化,外部綁定和代碼綁定皆可,這里使用的是自己實(shí)現(xiàn)的一個(gè)UI工具 UIUtility.BindUIEvent(EventTypeEnum.InputFieldOnValueChanged, OnVCodeValueChanged, VCodeInput.transform); } // 監(jiān)聽(tīng)輸入的字符變化 private void OnVCodeValueChanged(string value) { //外部已經(jīng)設(shè)置好VCodeInput的長(zhǎng)度限制,最多為4,但是為了避免意外情況,限制字符長(zhǎng)度 if (value.Length < 0 || value.Length > 4) { return; } //判斷字符是邊長(zhǎng)了還是變短了,用以決定Text的跳轉(zhuǎn)方向 bool next = false; //分割字符,默認(rèn)為空,如果是長(zhǎng)度增加,則說(shuō)明輸入了新的驗(yàn)證碼,將這個(gè)驗(yàn)證碼記錄下來(lái) string character = string.Empty; //比較與上一次輸入的驗(yàn)證碼長(zhǎng)度,缺省長(zhǎng)度為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); } //移動(dòng)光標(biāo)(實(shí)際上是操作用來(lái)顯示驗(yàn)證碼的Text) private void OnMoveCursor(bool next, int which, string character) { //將值賦給對(duì)應(yīng)的Text if (next) { VCodes[which].text = character; SetLineColor(which, Blue); } else { /*這里比較繞,如果是回退,則說(shuō)明當(dāng)前的which其實(shí)是已經(jīng)退格后的位數(shù), * 比如說(shuō),原本是輸入了123,退格后則變成了12, * 那么which的值為value.length - 1 = 1; value.length為2 * 而我們需要將原本第三位(從0開(kāi)始計(jì)數(shù),值為2)的Text設(shè)置為空 * 因此需要i + 1,而為了避免用戶(hù)全選并刪除所有驗(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; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:用Linq從一個(gè)集合選取幾列得到一個(gè)新的集合(可改列名)
欄 目:C#教程
本文標(biāo)題:UGUI實(shí)現(xiàn)4位驗(yàn)證碼輸入
本文地址:http://mengdiqiu.com.cn/a1/C_jiaocheng/4583.html
您可能感興趣的文章
- 01-10C#實(shí)現(xiàn)txt定位指定行完整實(shí)例
- 01-10WinForm實(shí)現(xiàn)仿視頻播放器左下角滾動(dòng)新聞效果的方法
- 01-10C#實(shí)現(xiàn)清空回收站的方法
- 01-10C#實(shí)現(xiàn)讀取注冊(cè)表監(jiān)控當(dāng)前操作系統(tǒng)已安裝軟件變化的方法
- 01-10C#實(shí)現(xiàn)多線程下載文件的方法
- 01-10C#實(shí)現(xiàn)Winform中打開(kāi)網(wǎng)頁(yè)頁(yè)面的方法
- 01-10C#實(shí)現(xiàn)遠(yuǎn)程關(guān)閉計(jì)算機(jī)或重啟計(jì)算機(jī)的方法
- 01-10C#自定義簽名章實(shí)現(xiàn)方法
- 01-10C#文件斷點(diǎn)續(xù)傳實(shí)現(xiàn)方法
- 01-10winform實(shí)現(xiàn)創(chuàng)建最前端窗體的方法


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-10C#通過(guò)反射獲取當(dāng)前工程中所有窗體并
- 01-10關(guān)于ASP網(wǎng)頁(yè)無(wú)法打開(kāi)的解決方案
- 01-10WinForm限制窗體不能移到屏幕外的方法
- 01-10WinForm繪制圓角的方法
- 01-10C#實(shí)現(xiàn)txt定位指定行完整實(shí)例
- 01-10WinForm實(shí)現(xiàn)仿視頻播放器左下角滾動(dòng)新
- 01-10C#停止線程的方法
- 01-10C#實(shí)現(xiàn)清空回收站的方法
- 01-10C#通過(guò)重寫(xiě)Panel改變邊框顏色與寬度的
- 01-10C#實(shí)現(xiàn)讀取注冊(cè)表監(jiān)控當(dāng)前操作系統(tǒng)已
隨機(jī)閱讀
- 04-02jquery與jsp,用jquery
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-11Mac OSX 打開(kāi)原生自帶讀寫(xiě)NTFS功能(圖文
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-10delphi制作wav文件的方法
- 01-10C#中split用法實(shí)例總結(jié)