Question

我想最终展示这个UI

enter image description here 我有这个xml：

    <LinearLayout
        android:id="@+id/inputBox"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@drawable/input_box_idle" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center" >

            <EditText
                android:id="@+id/verificationCodeEditText1"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <EditText
                android:id="@+id/verificationCodeEditText2"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <EditText
                android:id="@+id/verificationCodeEditText3"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <EditText
                android:id="@+id/verificationCodeEditText4"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <EditText
                android:id="@+id/verificationCodeEditText5"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <!--
                 <EditText
        android:id="@+id/verificationCodeEditText"
        style="@style/textOnBg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="-   -   -   -"
        android:textColor="#00bcfe"
        android:textSize="16dp"
        android:textStyle="italic" >
    </EditText>
            -->

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

给出了结果：

enter image description here

我试图将editText分成5个editText控件

但是如何让它们看起来像一个透明的单位？

如果我只使用一个editText - 我遇到一个问题，即用户可以覆盖空格。

<style name="textOnBg" parent="android:Widget.TextView">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:shadowColor">#d3ebf3</item>
    <item name="android:shadowDx">0</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
    <item name="android:textColor">#2f4a53</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">18sp</item>
</style>

Answer 1

使用以下EditText

 <EditText
    android:id="@+id/edittext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:padding="10dp"
    android:text="-" />

Answer 2

我建议以TextWatcher编程方式执行此操作，类似于此文本观察者所做的日期“掩码”在此处回答

https://stackoverflow.com/a/16889503/418505

这将允许您根据需要配置输入自定义的屏蔽/间距要求（更重要的是您想要的样式）

编辑问题：

TextWatcher mInputWatcher = new TextWatcher() {

    volatile boolean isInAfterTextChanged = false;

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

    @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }

    @Override public void afterTextChanged(Editable s) {
        if (!isInAfterTextChanged) {
            isInAfterTextChanged = true;

            String unformattedInput = s.toString();
            String sanitizedInString = unformattedInput.replaceAll("[^\\d]", "");
            StringBuilder sb = new StringBuilder();
            int inputLength = sanitizedInString.length();
            for(int i = 0; i < 4; i++) {
                if(i < inputLength) {
                    sb.append(sanitizedInString.charAt(i));
                } else {
                    //If we are at the current input length, that means
                    //we need to empty the space for the cursor
                    if(i == inputLength) {
                        sb.append(" "); 
                    } else {
                        //Otherwise continue the mask
                        sb.append("-");     
                    }

                }
                //Add a space to separate each input if we are not on the last inut 
                if(i < 3) {
                    sb.append(" ");       
                } 
            }
            String formattedInput = sb.toString();
            mEditTextView.setText(formattedInput);
            //Set the selecion to the next input field
            mEditTextView.setSelection(inputLength * 2);
            //Reset the inAfterTextChange field
            isInAfterTextChanged = false;
        }
    }
}

此回调将允许您挂钩用户输入并确保它们输入正确的输入，并根据需要设置当前输入的样式。

此实现的副作用是，您可以更简单地将用户输入作为单个EditText而不是单个框进行管理，除非您希望将每个输入视为单独的框。

在需要单独的盒子的情况下，我会创建一个视图的自定义子类，它会扩展一个LinearLayout，它有一个背景（你可以从android为编辑文本提供的默认资源中窃取），并且有一个可配置的方法来初始化您需要配置的N个盒子（使用自定义属性或从代码中）。如果您对实施有疑问，请告诉我，我可以提供符合您要求的类似示例。

如何在android中显示5个带空格的空白/数字？

2 个答案: