美文网首页Android开发Android之界面自定义控件
Android 自定义方形验证码输入框,仿滴滴、小篮单车

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

作者: 吃苹果的猫N | 来源:发表于2017-11-02 18:11 被阅读471次

效果图

screenshots.gif

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


WechatIMG78.jpg

思路

1 . 每一个输入框其实都是一个EditTextfor循环创建并插入到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,谢谢!


相关文章

网友评论

  • 娄裕霖:如何在监听中错误的时候吧四个框全部清空呢...
    吃苹果的猫N:添加这个方法就好,很早之前写的了,没来得及继续维护,后续有空会继续更新项目
    吃苹果的猫N:public void cleanEditText() {
    int count = getChildCount();
    EditText editText;
    for (int i = 0; i < count; i++) {
    editText = (EditText) getChildAt(i);
    editText.setText("");
    if (i == 0) {
    editText.setCursorVisible(true);
    editText.setFocusable(true);
    } else {
    editText.setCursorVisible(false);
    editText.requestFocus();
    }
    }
    }

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

本文链接:https://www.haomeiwen.com/subject/mnlapxtx.html