android - 在用户输入单个字符后将 EditBox 输入转换为点？

Question

1]无输入的4位数字输入框:

2] 4位数字输入框输入:

随着用户继续输入 4 位数的 pin 输入框变成了点，如果用户想要删除最后一位按下后退按钮，用户输入将被删除，点再次转换为输入框。如果用户中间输入不正确，他不能通过触摸将点转换为输入框，他必须从右到左遍历删除。

我看到可能的解决方案有 the custom widget 并根据通过实现 TextWatcher 检测到的用户输入设置 View 可见/消失。但是Android平台中现有的EditText widget是否有任何样式配置，利用它我可以在XML中编写代码来获得上述UI更改？

到目前为止，对于手动更改，我已经做了以下更改(为一个输入框给出的代码已用于创建一组 4 个输入框):

单个输入框的 XML 布局:

<RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/pin_edit_box"
                    style="@style/pin_edittext_style"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:digits="0123456789"
                    android:focusable="true"
                    android:imeOptions="actionNext"
                    android:inputType="numberPassword" />

                <ImageView
                    android:id="@+id/pin_input_dot"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:minEms="3"
                    android:focusable="false"
                    android:layout_centerInParent="true"
                    android:enabled="false"
                    android:src="@drawable/ic_green_dot"
                    android:visibility="gone" />

            </RelativeLayout>

文本变化监听器:

pin_edit_box.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) {

            }

            @Override
            public void afterTextChanged(Editable editable) {
int length = editable.toString().length();
        if (length == 1) {
            pin_edit_box_this.setVisibility(View.INVISIBLE);
            pin_input_dot_this.setVisibility(View.VISIBLE);
                        pin_edit_box_next.requestFocus();
        } else if (length == 0) {
// This part doesn't work as EditText is invisible at this time 
// dot image view is visible
            pin_edit_box_this.setVisibility(View.VISIBLE);
            pin_input_dot_this.setVisibility(View.GONE);
                        pin_edit_box_this_previous.requestFocus();
        }
            }
        });

当试图从中检测返回或删除按钮事件时

boolean onKeyDown (int keyCode, 
                KeyEvent event) {
}

键盘事件 KeyEvent.KEYCODE_DEL 永远不会被检测到使 View 在按下后可见/不可见。官方文件说，软键盘事件并不总是有效。

As soft input methods can use multiple and inventive ways of inputting text, there is no guarantee that any key press on a soft keyboard will generate a key event: this is left to the IME's discretion, and in fact sending such events is discouraged.

More details here.

注意:以上截图来自印度货币交易的BHIM application。

Answer 1

查看此 PinView Library ，它几乎和你想要的一样。

它很容易使用:

添加依赖

dependencies {
   compile 'com.chaos.view:pinview:1.3.0'
}

创建 PinView 而不是 EditText

<com.chaos.view.PinView
    android:id="@+id/pinView"
    style="@style/PinWidget.PinView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Hint."
    android:inputType="text"
    android:padding="@dimen/common_padding"
    android:textColor="@color/text_colors"
    android:textSize="18sp"
    android:cursorVisible="true"
    app:cursorColor="@color/line_selected"
    app:cursorWidth="2dp"
    app:itemCount="5"
    app:itemHeight="48dp"
    app:itemRadius="4dp"
    app:itemSpacing="0dp"
    app:itemWidth="36dp"
    app:lineColor="@color/line_colors"
    app:lineWidth="2dp"
    app:viewType="rectangle" />

你应该看到这样的东西

其他解决方法是创建您自己的 EditText 类并在用户键入时更改它