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

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

1493087259(1).png

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

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

1493087805(1).png

android:id="@+id/ed1"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_gravity="center"

android:layout_marginLeft="20dp"

android:background="#fff"

android:gravity="center"

android:inputType="number"

android:maxLength="1"

android:numeric="integer" />

android:id="@+id/ed2"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_gravity="center"

android:layout_marginLeft="20dp"

android:background="#fff"

android:gravity="center"

android:inputType="number"

android:maxLength="1"

android:numeric="integer" />

android:id="@+id/ed3"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_gravity="center"

android:layout_marginLeft="20dp"

android:background="#fff"

android:gravity="center"

android:inputType="number"

android:maxLength="1"

android:numeric="integer" />

android:id="@+id/ed4"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_gravity="center"

android:layout_marginLeft="20dp"

android:background="#fff"

android:gravity="center"

android:inputType="number"

android:maxLength="1"

android:numeric="integer" />

功能的实现：

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