Android 多个输入框的自动跳转

在Android的项目开发过程中，经常会遇到输入手机验证码的需求，常见的处理方式是设置一个输入框，提醒用户输入获取到的验证码，如下图所示：

这种类型的验证码就是对EditText控件做简单的处理即可，还有一种交互效果是另外一种样式，如下图所示：

这一种交互方式是通过多个输入框来实现的，并且实现了 输入框的自动跳转等效果，本文主要介绍的就是这种效果的实现方式，首先我们先来看一下最终实现的效果：

接下来我们具体来实现这一效果：

布局文件的编写：

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    tools:context="com.cjxj.androiddemo.activity.InputActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp">

        <EditText
            android:id="@+id/input_et_text1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/activity_input_editbg_shape"
            android:gravity="center"
            android:inputType="number"
            android:lines="1"
            android:maxLength="1"
            android:textColor="#333"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/input_et_text2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="25dp"
            android:background="@drawable/activity_input_editbg_shape"
            android:gravity="center"
            android:inputType="number"
            android:lines="1"
            android:maxLength="1"
            android:textColor="#333"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/input_et_text3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="25dp"
            android:background="@drawable/activity_input_editbg_shape"
            android:gravity="center"
            android:inputType="number"
            android:lines="1"
            android:maxLength="1"
            android:textColor="#333"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/input_et_text4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="25dp"
            android:background="@drawable/activity_input_editbg_shape"
            android:gravity="center"
            android:inputType="number"
            android:lines="1"
            android:maxLength="1"
            android:textColor="#333"
            android:textSize="18sp" />

    </LinearLayout>


</RelativeLayout>

布局文件主要是实现了四个EditText输入框，通过inputType属性设置输入类型为数字类型，通过maxLength属性来设置输入框最大输入数量为1，通过上述代码即可实现我们演示中的布局效果。接下来就是处理这四个文本框的交互效果。

逻辑的处理

首先，我们通过演示的效果可以得出交互的逻辑：
1.输入框可以实现输入后自动跳转到下一个输入框
2.只有当前正在输入的输入框是可点击的，其他输入框皆不可点击，即始终只有一个输入框可点击和获取焦点
3.当用户点击键盘的删除键，文本框自动删除回退

public class InputActivity extends AppCompatActivity {
    private EditText et_text1, et_text2, et_text3, et_text4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_input);

        initView();
    }

    private void initView() {
        et_text1 = findViewById(R.id.input_et_text1);
        et_text2 = findViewById(R.id.input_et_text2);
        et_text3 = findViewById(R.id.input_et_text3);
        et_text4 = findViewById(R.id.input_et_text4);
        et_text2.setEnabled(false);
        et_text3.setEnabled(false);
        et_text4.setEnabled(false);

        et_text1.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    et_text2.setEnabled(true);
                    et_text1.clearFocus();
                    et_text2.requestFocus();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
                if (editable.length() > 0) {
                    et_text1.setEnabled(false);
                } else {
                    et_text1.setEnabled(true);
                    et_text2.setEnabled(false);
                }
            }
        });

        et_text2.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    et_text3.setEnabled(true);
                    et_text2.clearFocus();
                    et_text3.requestFocus();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
                if (editable.length() > 0) {
                    et_text2.setEnabled(false);
                } else {
                    et_text2.setEnabled(true);
                    et_text3.setEnabled(false);
                }
            }
        });

        et_text3.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    et_text4.setEnabled(true);
                    et_text3.clearFocus();
                    et_text4.requestFocus();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
                if (editable.length() > 0) {
                    et_text3.setEnabled(false);
                } else {
                    et_text3.setEnabled(true);
                    et_text4.setEnabled(false);
                }
            }
        });

        et_text4.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    Toast.makeText(InputActivity.this, "输入完成", Toast.LENGTH_SHORT).show();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
            }
        });

        et_text2.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View view, int i, KeyEvent keyEvent) {
                if (i == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN) {
                    if (et_text2.getText().length() <=0) {
                        et_text1.setEnabled(true);
                        et_text1.requestFocus();
                        et_text2.clearFocus();
                        et_text1.setText("");
                    }
                }
                return false;
            }
        });

        et_text3.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View view, int i, KeyEvent keyEvent) {
                if (i == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN) {
                    if (et_text3.getText().length() <=0) {
                        et_text2.setEnabled(true);
                        et_text2.requestFocus();
                        et_text3.clearFocus();
                        et_text2.setText("");
                    }
                }
                return false;
            }
        });

        et_text4.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View view, int i, KeyEvent keyEvent) {
                if (i == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN) {
                    if (et_text4.getText().length() <=0) {
                        et_text3.setEnabled(true);
                        et_text3.requestFocus();
                        et_text4.clearFocus();
                        et_text3.setText("");
                    }
                }
                return false;
            }
        });
    }
}

逻辑代码主要有两部分：
1.addTextChangedListener方法的处理：
当用户操作输入数据时，设置下一个输入框可点击并获取焦点，输入结束之后，设置当前输入框不可点击。
同时，当用户执行删除操作，文本框内容为空时，设置当前文本框可点击并获得焦点，下一个文本框不可点击。
2.setOnKeyListener监听方法的处理：
setOnKeyListener方法中的：
i == KeyEvent.KEYCODE_DEL 用于监听软键盘的删除键。
keyEvent.getAction() == KeyEvent.ACTION_DOWN 用于处理，点击触发的重复问题，因为点击删除按钮会触发Down和UP事件。
至此，基本的逻辑基本实现，如有问题，欢迎指正。