前言
驗證碼輸入框是很多APP必不可少的組件，之前在重構(gòu)注冊登錄頁面的時候怀伦，重新設(shè)計了UI脆烟，所以不能再簡單的用EditText來做了，所以這篇文章將分享一下如何實現(xiàn)一個常見的驗證碼輸入框房待。
正文
先摟一眼效果吧
不要把注意力都放在頭頂?shù)哪且荒ňG上邢羔，重點在輸入框，可能大多數(shù)APP里都是采用6個方框的UI效果桑孩，我這里是按照我們設(shè)計的要求拜鹤，用6根橫線來劃出6個數(shù)字的位置。一開始我想的是直接用6個TextView流椒，然后傳遞焦點的做法敏簿，但是發(fā)現(xiàn)實現(xiàn)起來有一定的難度。又在網(wǎng)上查了一下镣隶，發(fā)現(xiàn)比較靠譜的辦法是用6個TextView加一個EditText來實現(xiàn)极谊，也按照這個方法去實現(xiàn)了，但是后來在測試的時候就發(fā)現(xiàn)了問題：網(wǎng)上給出的實現(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;
}
});
這是一個大家熟知的寫法安岂，但是這個監(jiān)聽的方法其實并不靠譜（在安卓原生鍵盤上就監(jiān)聽不到）轻猖，因為這個監(jiān)聽是否觸發(fā)，并沒有強制的要求域那，全看輸入法開發(fā)者的心情咙边，這是官方文檔中的描述:
Key presses in software keyboards will generally NOT trigger this method, although some may elect to do so in some situations.
只能輸入，不能刪除次员，這可不行啊败许，用戶肯定會罵娘的，我可不想被拿去去祭天什么的...
于是乎只能想辦法在原有的基礎(chǔ)上做一些修改淑蔚，來規(guī)避這個問題市殷，最后采用的方案是：采用一個TextView的數(shù)組來維護6個TextView，然后藏一個透明的EditTextView在后面用于接收用戶輸入的內(nèi)容刹衫，再把輸入的內(nèi)容展示到6個TextView上就行了醋寝，UI什么的可以自己隨意設(shè)計。在實現(xiàn)的過程中带迟，遇到的一個關(guān)鍵問題就是：當輸入的內(nèi)容超過6位以后我該如何處理音羞？一開始的方案是通過判斷當前輸入的位數(shù)然后再做相應(yīng)的處理，網(wǎng)上的方案也是這么實現(xiàn)的仓犬，我后來一想嗅绰，根本用不著這么麻煩，只需要一行屬性就能解決這個問題：
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.tv_0);
textViews[1] = (TextView) findViewById(R.id.tv_1);
textViews[2] = (TextView) findViewById(R.id.tv_2);
textViews[3] = (TextView) findViewById(R.id.tv_3);
textViews[4] = (TextView) findViewById(R.id.tv_4);
textViews[5] = (TextView) findViewById(R.id.tv_5);
editText = (EditText) findViewById(R.id.edit_text_view);
editText.setCursorVisible(false);//隱藏光標
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;
}
}
2017.10.4-Bugfix
經(jīng)過thisfeng的提醒，發(fā)現(xiàn)存在幾個問題：
1.雙擊和長按會選中EditText的內(nèi)容民镜，出現(xiàn)復(fù)制粘貼等選項
2.光標位置會隨著點擊而改變啡专，輸入數(shù)字可能會插入到中間的位置
于是做了相應(yīng)的修改：
//屏蔽長按事件
android:longClickable="false"
使用自定義EditText：
public class MyEditText extends AppCompatEditText {
private long lastTime = 0;
public MyEditText(Context context) {
super(context);
}
public MyEditText(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onSelectionChanged(int selStart, int selEnd) {
super.onSelectionChanged(selStart, selEnd);
//把光標位置固定在最末
this.setSelection(this.getText().length());
}
@Override
public boolean onTouchEvent(MotionEvent event) {
//屏蔽雙擊事件
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
long currentTime = System.currentTimeMillis();
if (currentTime - lastTime < 500) {
lastTime = currentTime;
return true;
} else {
lastTime = currentTime;
}
break;
}
return super.onTouchEvent(event);
}
}
如果需要完整的demo，可以訪問我的github：https://github.com/jb274585381/VerifyCodeViewDemo
結(jié)語
有時候我們實現(xiàn)一個需求制圈，不光要考慮最終的效果，還要考慮時間成本畔况，能用最簡單的方法實現(xiàn)當然是最好的鲸鹦，省下的時間拿來打把昆特牌也是不錯的。而且寫的代碼越少跷跪，出錯的幾率越低嘛馋嗜，是不是~ 好了今天就分享到這里，我要去熬我的西米露了吵瞻。如有錯誤葛菇，歡迎大家指正。
