自定义view仿支付宝密码输入框

效果图

随便讲讲实现，首先，这个的难点是自定义view如何获取用户的输入。

现在能找到的仿支付宝的这个密码输入框，其他网友主要是直接继承edittext来解决输入问题，或者用viewgroup来包裹edittext等，没有直接继承view来解决问题的，我在简单的查看edittext源码和搜索stack overflow后，提供了这种直接继承view，自己监听输入的实现方式。大部分的需求都可以通过google直接或间接的解决，stack overflow上的大神还是很多的，解决问题也很深入。

首先，自定义view需要重写以下方法：

@Override
public boolean onCheckIsTextEditor() {
    return true;
}      

@Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
    outAttrs.inputType= InputType.TYPE_CLASS_NUMBER;
    outAttrs.imeOptions=EditorInfo.IME_ACTION_DONE;
    return new MyInputConnection(this,false);
}      

重写这两个方法，获取到输入连接，通过继承baseinputconnection写一个自己的处理类。

class MyInputConnection extends BaseInputConnection{

        public MyInputConnection(View targetView, boolean fullEditor) {
            super(targetView, fullEditor);
        }

        @Override
        public boolean commitText(CharSequence text, int newCursorPosition) {
            sb.append(text);
            Log.i("txt",sb.toString());
            return true;
        }

        @Override
        public boolean deleteSurroundingText(int beforeLength, int afterLength) {
            Log.i("deleteSurroundingText",beforeLength+"---"+afterLength);
            if (beforeLength==1 && afterLength==0){
                return super.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL))
                        && super.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_DEL));
            }
            return super.deleteSurroundingText(beforeLength, afterLength);
        }
    }
           

commitText所获取到的是一些文本内容，例如输入法输入的单词，短语等等，我们这里只需要数字，这个方法可以直接返回ture，什么也不做。

deleteSurroundingText 是个重点方法，因为我们无法监听到软键盘的del事件，必须在这里自己发送一个del事件给view处理。

this.setOnKeyListener(new OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if (event.getAction()==KeyEvent.ACTION_DOWN){
                    if (keyCode>= KeyEvent.KEYCODE_0 && keyCode<= KeyEvent.KEYCODE_9){
                        Log.i("input","number="+(keyCode-7));
                    }
                    if (keyCode==KeyEvent.KEYCODE_DEL){//only hard keyboard
                        Log.i("input","del");
                    }
                    if (keyCode==KeyEvent.KEYCODE_ENTER){
                        Log.i("input","enter");
                    }
                    Log.i("keycode","code=>"+keyCode);
                    return true;
                }
                return false;
            }
        });
           

然后，我们就可以监听keyEvent 了，剩下的就onDraw就可以了。

上面的代码只是示例，并不能直接用哦。下面是github地址，代码和demo都在里面，有帮助的话请给个star。

https://github.com/huage2580/PswInputViewDemo