Android 中带有分隔底线的自定义 EditText

Question

我需要使带有分隔底线的 EditText 如下图所示

我试过把EditText和四个ImageView放到RelativeLayout中

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

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:gravity="center">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:gravity="center"
                    android:orientation="horizontal">


                    <EditText
                        android:id="@+id/et_code"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@null"                                   
                        android:singleLine="true"
                        android:textColor="@color/black"
                        android:textSize="16dp" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:layout_height="1px"

                        android:alpha="0.3"
                        android:background="@color/black" />

                    <ImageView
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:layout_height="1px"
                        android:alpha="0.3"
                        android:background="@color/black" />

                    <ImageView
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:layout_height="1px"
                        android:alpha="0.3"
                        android:background="@color/black" />

                    <ImageView
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:layout_height="1px"
                        android:alpha="0.3"
                        android:background="@color/black" />

                </LinearLayout>

            </RelativeLayout>
        </RelativeLayout>

这是非常糟糕的解决方案，因为在小屏幕中数字开始移出。

Answer 1

使用this库。

正如其 GitHub 页面所说：

<com.github.glomadrian.codeinputlib.CodeInput
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:underline_color="#457ad1"
app:underline_selected_color="#9e1ace"
app:text_color="#b12eff"
app:hint_color="#77ce9d"
app:hint_text="Pin code"
app:codes="4"
/>

添加依赖项

compile 'com.github.glomadrian:CodeInput:1.1@aar'

Answer 2

为此，您需要在水平方向的线性布局中添加四个 edittext，每个宽度 = "0dp" 和 weight = "1"。像这样的

<LinearLayout
     android:layout_width="match_parent"
     android:layout_height = "wrap_content"
     android:orientation="horizontal"
>
   <Edittext 
     android:layout_width="0dp"
     android:layout_height = "wrap_content"
     android:layout_weight = "1"
     .... add other required attributes
   />
<Edittext 
     android:layout_width="0dp"
     android:layout_height = "wrap_content"
     android:layout_weight = "1"
     .... add other required attributes
   />
<Edittext 
     android:layout_width="0dp"
     android:layout_height = "wrap_content"
     android:layout_weight = "1"
     .... add other required attributes
   />
<Edittext 
     android:layout_width="0dp"
     android:layout_height = "wrap_content"
     android:layout_weight = "1"
     .... add other required attributes
   />
</LinearLayout>

这仅用于说明，您需要使用所需的样式和属性以自己的方式实现它。