好久沒有發(fā)表文章了瓮钥，今天趁著產(chǎn)品還沒確定原型的時間給大家寫一個小Demo筋量。最近有一個需求，要求和滴滴打車的登錄功能是一樣的碉熄，看過需求之后發(fā)現(xiàn)這一版本的驗證碼輸入功能和以往的有些不同桨武。先給大家看一下滴滴的UI：
1493087259(1).png
一開始我考慮，用一個Edittext來自定義一個這個樣式的控件锈津。但經(jīng)過觀察我發(fā)現(xiàn)呀酸，這4個輸入框每一個都可以點擊，都可以單獨輸入和選擇輸入琼梆。經(jīng)過思考性誉，我最終決定用4個原生的Edittext來實現(xiàn)這個功能。剛開始想的時候茎杂，覺得應(yīng)該不太好控制這個4個Edittext错览，后來經(jīng)過反復(fù)的測試終于完成了這個功能，其實沒有你想的那么麻煩煌往。
好了話不多少這就給大家上代碼（布局文件的實現(xiàn)）：
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" />
功能的實現(xiàn)：
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();
}
}
}
好了倾哺，這樣這個小功能就實現(xiàn)了。希望可以幫助到用到這個功能的小伙伴們。注：想要Demo查看效果的小伙伴可以聯(lián)系我QQ:176622729
