好久没有发表文章了，今天趁着产品还没确定原型的时间给大家写一个小Demo。最近有一个需求，要求和滴滴打车的登录功能是一样的，看过需求之后发现这一版本的验证码输入功能和以往的有些不同。先给大家看一下滴滴的UI：
1493087259(1).png
一开始我考虑，用一个Edittext来自定义一个这个样式的控件。但经过观察我发现，这4个输入框每一个都可以点击，都可以单独输入和选择输入。经过思考，我最终决定用4个原生的Edittext来实现这个功能。刚开始想的时候，觉得应该不太好控制这个4个Edittext，后来经过反复的测试终于完成了这个功能，其实没有你想的那么麻烦。
好了话不多少这就给大家上代码（布局文件的实现）：
1493087805(1).png
<EditText
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" />
<EditText
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" />
<EditText
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" />
<EditText
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
