您的位置:首页 > 移动开发 > Android开发

Android 自定义方形验证码输入框,仿滴滴、小篮单车

2017-11-02 18:20 671 查看

效果图



GIF图不是很清晰,下面是截图



思路

1 . 每一个输入框其实都是一个
EditText
for
循环创建并插入到
LinearLayout
中。

private void initView() {
for (int i = 0; i < mEtNumber; i++) {
EditText editText = new EditText(mContext);
initEditText(editText, i); //editText初始化
addView(editText);
if (i == 0) { //设置第一个editText获取焦点
editText.setFocusable(true);
}
}
}


2 . 给每个
editText
设置
TextWatcher
监听,检测到被输入一个字符后,就把焦点移交给下一个
editText


@Override
public void afterTextChanged(Editable s) {
if (s.length() != 0) {
focus();
}
}


private void focus() {
int count = getChildCount();
EditText editText;
//利用for循环找出还最前面那个还没被输入字符的EditText,并把焦点移交给它。
for (int i = 0; i < count; i++) {
editText = (EditText) getChildAt(i);
if (editText.getText().length() < 1) {
editText.setCursorVisible(true);
editText.requestFocus();
return;
} else {
editText.setCursorVisible(false);
}
}
//如果最后一个输入框有字符,则返回结果
EditText lastEditText = (EditText) getChildAt(mEtNumber - 1);
if (lastEditText.getText().length() > 0) {
getResult();
}
}


3 . 同理,给每一个
editText
设置
View.OnKeyListener
监听,用于检测删除键。

@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_DEL) {
backFocus();
}
return false;
}


private void backFocus() {
//博主手机不好,经常点一次却触发两次`onKey`事件,就设置了一个防止多点击,间隔100毫秒。
long startTime = System.currentTimeMillis();
EditText editText;
//循环检测有字符的`editText`,把其置空,并获取焦点。
for (int i = mEtNumber - 1; i >= 0; i--) {
editText = (EditText) getChildAt(i);
if (editText.getText().length() >= 1 && startTime - endTime > 100) {
editText.setText("");
editText.setCursorVisible(true);
editText.requestFocus();
endTime = startTime;
return;
}
}
}


4 .要让
editText
依次获取焦点,防止出现第一个
editText
还没输入就能输入第二个
editText
的情况。

同理,需要
View.OnFocusChangeListener
监听。

//获取焦点后随即`focus()`方法,进行焦点移交。
@Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
focus();
}
}


源码及用法详见GitHub。

Android开发 自定义方形验证码输入框

如果对您有帮助的话,还请给个收藏或者star,谢谢!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息