XML 中 EditText 的自定义设计

Question

我想在 android xml 中得到这个设计，不完全是，但接近它。 我对 Android 还是新手，所以请在您赞赏的答案中更加具体。

尝试使用自定义背景来更接近上面的设计，但无法将该标签保留在输入字段的顶部。

谢谢

Answer 1

您可以使用 Material Design 的

TextInputLayout

，这是 Google 推荐的 Android 设计指南。

您可以在此处阅读有关不同 TextInputLayout 设计的更多信息。

将材料设计依赖项添加到应用程序的应用程序级别模块。

implementation("com.google.android.material:material:1.9.0")

在

res/drawable

文件夹中为背景创建圆角边框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_blue_dark" />
    <corners android:radius="12dp" />
</shape>

创建一个

TextInputLayout

并应用圆形背景可绘制。将

hint

设置为要显示为标签的文本。最初它会显示为提示，但当您开始输入时，它会动画到顶部，并会像您想要的那样显示为标签。

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textField"
        android:layout_width="match_parent"
        app:boxBackgroundMode="none"
        android:paddingTop="16dp"
        android:textColorHint="@android:color/holo_blue_dark"
        app:hintTextColor="@android:color/holo_blue_dark"
        android:layout_centerInParent="true"
        android:layout_marginHorizontal="12dp"
        android:background="@drawable/round_border_bg"
        android:layout_height="wrap_content"
        android:hint="Email Address">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:paddingTop="8dp"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>

示例输出：

正常 - 文本显示为提示

当用户输入时 - 文本显示为标签