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

Question

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

2]带输入的4位数输入框:

当用户继续输入4位数时,输入框变为点,如果用户想要删除最后一位数,则按下后退按钮,用户输入会被点删除,再次转换为输入框.如果用户中间输入不正确,则无法通过触摸将点转换为输入框,他必须从右到左遍历删除.

我看到可能的解决方案,根据通过实现TextWatcher检测到的用户输入,自定义窗口小部件的设置视图可见/消失.但Android平台中现有的EditText小部件是否有任何样式配置,我可以使用哪些代码在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按下后,永远不会检测到键盘事件以使视图可见/不可见.官方文档说并不总是有效的软键盘事件可能并不总是得到交付.

由于软输入方法可以使用多种创造性的输入文本方式,因此无法保证软键盘上的任何按键都会产生关键事件:这由IME自行决定,实际上不鼓励发送此类事件.

更多细节在这里.

注意:上面的截图来自BHIM应用程序,用于印度货币交易.

Answer 1

看到此PinView库，它几乎和您想要的一样。

易于使用：

添加 dependencies

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

而不是EditText创建一个PinView

<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类并在用户键入时进行更改