Android EditText圆形框输入

Question

我做了很多研究，但没有找到关于这个问题的任何东西。我也不再有一个起点来寻找哪些关键字。

我关心的是创建一个如图中所示的输入字段。用户应该可以在这里简单地输入一个数字代码。

应该有一个图书馆吗？

Answer 1

嗯，有一些库用于创建这种类型的EditText，比如OtpView和android-otpview-pinview，但我是通过使用一些EditText属性和addTextChangedListener（）手动完成的。

首先，使用android:inputtype=“number”和android:maxlength=“1”允许用户只键入数字。

示例：

1）XML文件：

      <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:gravity="center"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/otp1"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionNext"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp2"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionNext"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp3"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionNext"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp4"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp5"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp6"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />
        </LinearLayout>

2）添加addTextChangedListener（）以使所有edittext自动跳转到下一个edittext。

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

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (!s.toString().trim().isEmpty()) {
                otp2.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

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

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (!s.toString().trim().isEmpty()) {
                otp3.requestFocus();
            } else {
                otp1.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

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

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (!s.toString().trim().isEmpty()) {
                otp4.requestFocus();
            } else {
                otp2.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

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

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (!s.toString().trim().isEmpty()) {
                otp5.requestFocus();
            } else {
                otp3.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

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

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (!s.toString().trim().isEmpty()) {
                otp6.requestFocus();
            } else {
                otp4.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

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

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (!s.toString().trim().isEmpty()) {
                otp1.requestFocus();
            } else {
                otp5.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
}