android - 如何使用单个 EditText 实现此布局

Question

如何使用单个 EditText 实现这种类型的编辑文本。

我在我的应用程序中使用此编辑文本验证 otp。

我可以用这样的 6 个编辑文本来完成这件事 my_layout.xml是否可以使用单个编辑文本来完成此操作。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:wheel="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="To complete the installation,\nplease enter the 6-digit\nverification code."
            android:id="@+id/textView4"
            android:textColor="@color/black"
            android:gravity="center" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLength="1"
            android:gravity="center" />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLength="1"
            android:gravity="center" />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLength="1"
            android:gravity="center" />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLength="1"
            android:layout_marginLeft="15dp"
            android:gravity="center" />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLength="1"
            android:gravity="center" />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLength="1"
            android:gravity="center" />
    </LinearLayout>

</LinearLayout>

Answer 1

为此，您必须实现 TextWacher 并一次删除一个，您的 EditText 如下所示

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/editText"
    android:singleLine="true"
    android:text="______"
    android:inputType = "textNoSuggestions"
    android:letterSpacing="0.4" -->Its the spacing of letter
    android:textSize="29sp" />

下面是实现

EditText editText;
String text;
boolean delete = false;

    text = editText.getText().toString();

    editText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            text = editText.getText().toString();
            if (count > after)
                delete = true;

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

            StringBuilder sb = new StringBuilder(s.toString());
            int replacePosition = editText.getSelectionEnd();

            if (s.length() != 6) { //where 6 is the character underline per text
                if (!delete) {
                    if (replacePosition < s.length())
                        sb.deleteCharAt(replacePosition);
                } else {
                    sb.insert(replacePosition, '_');
                }

                if (replacePosition < s.length() || delete) {
                        editText.setText(sb.toString());
                        editText.setSelection(replacePosition);
                } else {
                        editText.setText(text);
                        editText.setSelection(replacePosition - 1);
                }
            }
        }
        delete = false;
    }
    @Override
    public void afterTextChanged(Editable s) {
    }
});