前言
驗(yàn)證碼輸入框是很多APP必不可少的組件，之前在重構(gòu)注冊登錄頁面的時(shí)候，重新設(shè)計(jì)了UI，所以不能再簡單的用EditText來做了，所以這篇文章將分享一下如何實(shí)現(xiàn)一個(gè)常見的驗(yàn)證碼輸入框。下面話不多說了，來一起看看詳細(xì)的介紹吧。
正文
先摟一眼效果吧
不要把注意力都放在頭頂?shù)哪且荒ňG上，重點(diǎn)在輸入框，可能大多數(shù)APP里都是采用6個(gè)方框的UI效果，我這里是按照我們設(shè)計(jì)的要求，用6根橫線來劃出6個(gè)數(shù)字的位置。一開始我想的是直接用6個(gè)TextView，然后傳遞焦點(diǎn)的做法，但是發(fā)現(xiàn)實(shí)現(xiàn)起來有一定的難度。又在網(wǎng)上查了一下，發(fā)現(xiàn)比較靠譜的辦法是用6個(gè)TextView加一個(gè)EditText來實(shí)現(xiàn)，也按照這個(gè)方法去實(shí)現(xiàn)了，但是后來在測試的時(shí)候就發(fā)現(xiàn)了問題：網(wǎng)上給出的實(shí)現(xiàn)方式需要監(jiān)聽軟鍵盤的刪除按鈕
editText.setOnKeyListener(new OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) { //TODO: return true; } return false; } });這是一個(gè)大家熟知的寫法，但是這個(gè)監(jiān)聽的方法其實(shí)并不靠譜（在安卓原生鍵盤上就監(jiān)聽不到），因?yàn)檫@個(gè)監(jiān)聽是否觸發(fā)，并沒有強(qiáng)制的要求，全看輸入法開發(fā)者的心情，這是官方文檔中的描述:
Key presses in software keyboards will generally NOT trigger this method, although some may elect to do so in some situations.
只能輸入，不能刪除，這可不行啊，用戶肯定會(huì)罵娘的，我可不想被拿去去祭天什么的...
于是乎只能想辦法在原有的基礎(chǔ)上做一些修改，來規(guī)避這個(gè)問題，最后采用的方案是：采用一個(gè)TextView的數(shù)組來維護(hù)6個(gè)TextView，然后藏一個(gè)透明的EditTextView在后面用于接收用戶輸入的內(nèi)容，再把輸入的內(nèi)容展示到6個(gè)TextView上就行了，UI什么的可以自己隨意設(shè)計(jì)。在實(shí)現(xiàn)的過程中，遇到的一個(gè)關(guān)鍵問題就是：當(dāng)輸入的內(nèi)容超過6位以后我該如何處理？一開始的方案是通過判斷當(dāng)前輸入的位數(shù)然后再做相應(yīng)的處理，網(wǎng)上的方案也是這么實(shí)現(xiàn)的，我后來一想，根本用不著這么麻煩，只需要一行屬性就能解決這個(gè)問題：
android/237877.html">android:maxLength="6"
只需要在EditText的屬性里限制它的最大長度，就不用再去代碼里做處理了，直接把EditTextView里的內(nèi)容完全照搬到TextView上就可以了。
最終的完整代碼如下：
public class VerifyCodeView extends RelativeLayout { private EditText editText; private TextView[] textViews; private static int MAX = 6; private String inputContent; public VerifyCodeView(Context context) { this(context, null); } public VerifyCodeView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public VerifyCodeView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); View.inflate(context, R.layout.view_verify_code, this); textViews = new TextView[MAX]; textViews[0] = (TextView) findViewById(R.id.item_code_iv0); textViews[1] = (TextView) findViewById(R.id.item_code_iv1); textViews[2] = (TextView) findViewById(R.id.item_code_iv2); textViews[3] = (TextView) findViewById(R.id.item_code_iv3); textViews[4] = (TextView) findViewById(R.id.item_code_iv4); textViews[5] = (TextView) findViewById(R.id.item_code_iv5); editText = (EditText) findViewById(R.id.item_edittext); editText.setCursorVisible(false);//隱藏光標(biāo) setEditTextListener(); } private void setEditTextListener() { editText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void afterTextChanged(Editable editable) { inputContent = editText.getText().toString(); if (inputCompleteListener != null) { if (inputContent.length() >= MAX) { inputCompleteListener.inputComplete(); } else { inputCompleteListener.invalidContent(); } } for (int i = 0; i < MAX; i++) { if (i < inputContent.length()) { textViews[i].setText(String.valueOf(inputContent.charAt(i))); } else { textViews[i].setText(""); } } } }); } private InputCompleteListener inputCompleteListener; public void setInputCompleteListener(InputCompleteListener inputCompleteListener) { this.inputCompleteListener = inputCompleteListener; } public interface InputCompleteListener { void inputComplete(); void invalidContent(); } public String getEditContent() { return inputContent; }}如果需要完整的demo，可以訪問我的github：https://github.com/jb274585381/VerifyCodeViewDemo，當(dāng)然大家也可以直接本地下載。
總結(jié)
有時(shí)候我們實(shí)現(xiàn)一個(gè)需求，不光要考慮最終的效果，還要考慮時(shí)間成本，能用最簡單的方法實(shí)現(xiàn)當(dāng)然是最好的，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
