Android：仿滴滴登录输入验证码，支付输入密码对话框的实现

好久没有发表文章了，今天趁着产品还没确定原型的时间给大家写一个小Demo。最近有一个需求，要求和滴滴打车的登录功能是一样的，看过需求之后发现这一版本的验证码输入功能和以往的有些不同。先给大家看一下滴滴的UI：

1493087259(1).png

一开始我考虑，用一个Edittext来自定义一个这个样式的控件。但经过观察我发现，这4个输入框每一个都可以点击，都可以单独输入和选择输入。经过思考，我最终决定用4个原生的Edittext来实现这个功能。刚开始想的时候，觉得应该不太好控制这个4个Edittext，后来经过反复的测试终于完成了这个功能，其实没有你想的那么麻烦。

好了话不多少这就给大家上代码（布局文件的实现）：

1493087805(1).png

功能的实现：

private EditText ed1;
private EditText ed2;
private EditText ed3;
private EditText ed4;
int index = 1;
private EditText[] mArray;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
    initListener();
}


private void initView() {
    ed1 = (EditText) findViewById(R.id.ed1);
    ed2 = (EditText) findViewById(R.id.ed2);
    ed3 = (EditText) findViewById(R.id.ed3);
    ed4 = (EditText) findViewById(R.id.ed4);
}

private void initListener() {
    mArray = new EditText[]{ed1, ed2, ed3, ed4};
    for (int i = 0; i < mArray.length; i++) {
        final int j = i;
        mArray[j].addTextChangedListener(new TextWatcher() {
            private CharSequence temp;

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                temp = s;
            }

            @Override
            public void afterTextChanged(Editable s) {

                if (temp.length() == 1 && j >= 0 && j < mArray.length - 1) {
                    mArray[j + 1].setFocusable(true);
                    mArray[j + 1].setFocusableInTouchMode(true);
                    mArray[j + 1].requestFocus();
                }

                if (temp.length() == 0) {
                    if (j >= 1) {
                        mArray[j - 1].setFocusable(true);
                        mArray[j - 1].setFocusableInTouchMode(true);
                        mArray[j - 1].requestFocus();
                    }
                }
                checkNumber();
            }
        });
    }

}

public void checkNumber() {

    if (!TextUtils.isEmpty(ed1.getText().toString().trim()) && !TextUtils.isEmpty(ed2.getText().toString().trim()) && !TextUtils.isEmpty(ed3.getText().toString().trim()) && !TextUtils.isEmpty(ed4.getText().toString().trim())) {
        Toast.makeText(this, ed1.getText().toString().trim() + ed2.getText().toString().trim() + ed3.getText().toString().trim() + ed4.getText().toString().trim(), Toast.LENGTH_SHORT).show();
        index++;
        if (index % 2 == 0) {
            for (EditText editText : mArray) {
                editText.setText("");
            }
            ed1.setFocusable(true);
            ed1.setFocusableInTouchMode(true);
            ed1.requestFocus();
        }
    }

}

好了，这样这个小功能就实现了。希望可以帮助到用到这个功能的小伙伴们。注：想要Demo查看效果的小伙伴可以联系我QQ:176622729