在 EditText 下方显示帮助文本以及提示

Question

我正在尝试在这些方面做一些事情：

我可以使用 android:hint="Email Address" 显示提示，但无法显示帮助文本 - 这将是您的电子邮件用户名

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="15"
            android:hint="Username"
            app:et_helper="Username is preferably your registered email"/>

    </android.support.design.widget.TextInputLayout>`

我得到的只有而没有用户名最好是你的注册邮箱 below edittext:

输出：

感谢任何指点。谢谢。

Answer 1

最好的方法是使用TextInputLayout。 Google 在新设计库中介绍了它。为了使用 TextInputLayout，您必须将以下内容添加到您的 build.gradle 依赖项中：

compile 'com.android.support:design:22.2.0'

然后在您的 xml 文件中使用它：

<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Enter your name"/>
</android.support.design.widget.TextInputLayout>

您可以通过将错误设置为真来设置文本。虽然它是用于显示错误，但它适合您使用。如果需要，您可以更改颜色和字体。

TextInputLayout til = (TextInputLayout)    findViewById(R.id.textInputLayout);
til.setErrorEnabled(true);
til.setError("You need to enter a name");

Answer 2

我也被问过类似的问题 here。如果你想在LinearLayout中保持两个EditText视图一起垂直关闭，我认为没有办法。我认为，一种方法是您可以将顶部 EditText 的 android:gravity 设置为 'bottom' 并将 'top' 设置为较低的 EditText。但是在RelativeLayout中，这应该很容易。

如果您想要显示提示文本（在 EdiText 之上），即使在用户键入时也可以使用 TextInputLayout。通常将提示设置为 EditText 不会以这种方式工作。通过触摸视图聚焦后，提示文本将消失。

Answer 3

那么你想要的是：

Helper Text

您可以使用这个库来实现：

https://github.com/rengwuxian/MaterialEditText

您可以设置 "helper text" 属性显示行下方的文本，设置 "hint" 显示行上方的文本。以下是所附图片的示例布局

<com.rengwuxian.materialedittext.MaterialEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"
        app:met_floatingLabel="normal"
        app:met_helperText="Must contain at least 8 characters"
        app:met_helperTextAlwaysShown="true"/>

Answer 4

TextInputLayout 不提供帮助文本。但是，下面的文章有一个工作示例。它使用从 TextInputLayout 扩展的 class，通过将 HelperText 作为另一个指示器添加到 class，与 ErrorText 一起工作。

https://medium.com/@elye.project/material-login-with-helper-text-232472400c15#.vm28p662v

Answer 5

借助设计支持库 28，在 TextInputLayout 中添加了一个内置的辅助文本功能。

 implementation 'com.android.support:design:28.0.0'

现在使用 xml 或以编程方式

启用错误

 textInputLayout.isHelperTextEnabled=true
 textInputLayout.error="Email can not be Empty!!!"

此外，提示和错误现在可以一起使用了！！！

示例

et.setOnFocusChangeListener { v, b ->
            if (b) {
                textInputLayout.helperText = "yourhelperText"

            } else {
                textInputLayout.helperText = null
                if(et.text.toString()==""){    // or any other validation
                    textInputLayout.error="Email can not be Empty!!!"
                }
            }

TextInputLayout | Android Developers

EDIT 不要忘记通过 xml 或以编程方式启用错误和 helperText。

Answer 6

您可以通过这种方式在 TextInputLayout（使用库 com.google.android.material:material:1.2.1）中简单地使用 app:helperText 属性：

<com.google.android.material.textfield.TextInputLayout
        ...
        android:hint="Email Address"
        app:helperText="This will be your email username">

        <com.google.android.material.textfield.TextInputEditText
            ... />

</com.google.android.material.textfield.TextInputLayout>

或以编程方式 (kotlin) 方式：

textInputLayout.helperText = "This will be your email username"

Answer 7

具有 TextInputLayout OutlinedBox 样式和 TextInputEditText 的完整 XML

       <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/til_customer_no"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:padding="3dp"
            app:helperTextEnabled="true"
            app:helperText="* Enter customer number that will be used">

            <!--android:maxLength="13"-->
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/et_customer_no"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Customer No"
                android:inputType="number" />

        </com.google.android.material.textfield.TextInputLayout>

在 EditText 下方显示帮助文本以及提示

Show Helper text below EditText along with the Hint

android

android-layout

android-edittext

androiddesignsupport

android-textinputlayout