Question

1]没有输入的4位输入框：

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

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

根据实施the custom widget检测到的用户输入，我看到可能的解决方案TextWatcher设置视图可见/已消失。但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的事件，以使视图可见/不可见。官方文档说并不总是有效的软键盘事件可能并不总是得到交付。

由于软输入法可以使用多种创造性的输入方式文字，无法保证软键盘上的任何按键都会生成一个关键事件：这由IME自行决定，并且在不鼓励发送此类事件的事实。

More details here.

注意：上面的屏幕截图取自BHIM application，用于印度货币交易。

Answer 1

请参阅此PinView Library，它几乎与您想要的一样。

它易于使用：

添加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类，并在用户输入

时进行更改

Answer 2

试试这个

        <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">


    <EditText
        android:id="@+id/edt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:background="@drawable/normal"
        android:hint=""
        android:maxLength="1" />

    <EditText
        android:id="@+id/edt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint=""
        android:layout_margin="5dp"
        android:background="@drawable/normal"
        android:layout_weight="1"
        android:maxLength="1" />

    <EditText
        android:id="@+id/edt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint=""
        android:layout_margin="5dp"
        android:background="@drawable/normal"
        android:layout_weight="1"
        android:maxLength="1" />

    <EditText
        android:id="@+id/edt4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint=""
        android:layout_margin="5dp"
        android:background="@drawable/normal"
        android:layout_weight="1"
        android:maxLength="1" />

</LinearLayout>

<强> @绘制/诺玛

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:height="1dp"
        android:gravity="bottom">
        <shape android:shape="rectangle">
            <solid android:color="#0011ff" />
        </shape>
    </item>

</layer-list>

<强> drawable.filled

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:height="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#00001eff" />
        </shape>
    </item>
</layer-list>

活动代码

    import android.os.Handler;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.InputType;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.widget.EditText;


public class MainActivity extends AppCompatActivity {

    EditText edt1, edt2, edt3, edt4;

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

        edt1 = findViewById(R.id.edt1);
        edt2 = findViewById(R.id.edt2);
        edt3 = findViewById(R.id.edt3);
        edt4 = findViewById(R.id.edt4);

        edt1.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 (TextUtils.isEmpty(edt1.getText().toString().trim())) {
                    edt1.setBackgroundResource(R.drawable.normal);
                    edt1.requestFocus();
                    edt1.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.black));
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            edt1.setInputType(InputType.TYPE_CLASS_TEXT );
                        }
                    },500);
                } else {
                    edt1.setBackgroundResource(R.drawable.filled);
                    edt1.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.red));

                    edt2.requestFocus();
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            edt1.setInputType(InputType.TYPE_CLASS_TEXT |
                                    InputType.TYPE_TEXT_VARIATION_PASSWORD);
                        }
                    },500);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });


        edt2.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 (TextUtils.isEmpty(edt2.getText().toString().trim())) {
                    edt2.setBackgroundResource(R.drawable.normal);
                    edt2.requestFocus();
                    edt2.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.black));
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            edt2.setInputType(InputType.TYPE_CLASS_TEXT );
                        }
                    },500);
                } else {
                    edt2.setBackgroundResource(R.drawable.filled);
                    edt3.requestFocus();
                    edt2.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.red));
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            edt2.setInputType(InputType.TYPE_CLASS_TEXT |
                                    InputType.TYPE_TEXT_VARIATION_PASSWORD);
                        }
                    },500);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });
        edt3.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 (TextUtils.isEmpty(edt3.getText().toString().trim())) {
                    edt3.setBackgroundResource(R.drawable.normal);
                    edt3.requestFocus();
                    edt3.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.black));
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            edt3.setInputType(InputType.TYPE_CLASS_TEXT );
                        }
                    },500);
                } else {
                    edt3.setBackgroundResource(R.drawable.filled);
                    edt3.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.red));
                    edt4.requestFocus();
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            edt3.setInputType(InputType.TYPE_CLASS_TEXT |
                                    InputType.TYPE_TEXT_VARIATION_PASSWORD);
                        }
                    },500);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });


        edt4.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 (TextUtils.isEmpty(edt4.getText().toString().trim())) {
                    edt4.setBackgroundResource(R.drawable.normal);
                    edt4.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.black));
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            edt4.setInputType(InputType.TYPE_CLASS_TEXT );
                        }
                    },500);
                } else {
                    edt4.setBackgroundResource(R.drawable.filled);
                    edt4.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.red));
                    edt4.clearFocus();
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            edt4.setInputType(InputType.TYPE_CLASS_TEXT |
                                    InputType.TYPE_TEXT_VARIATION_PASSWORD);
                        }
                    },500);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

    }

}

<强>输出

正常

编辑时

最终

Answer 3

将Edittext输入类型更改为textpassword，它将char显示为dot char。

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

3 个答案: