设计Android EditText以显示Google所述的错误消息


151

我需要一个EditText看起来像这样的onError:

在此处输入图片说明

调用onError看起来像这样:

在此处输入图片说明

注意:该应用程序在SDK 19(4.4.2)上运行

最小SDK为1

是否有类似于setError的方法会自动执行此操作,还是我必须为其编写代码?

谢谢


1
您不太可能仅用EditText。您更有可能需要包装EditText或添加其他东西。见github.com/rengwuxian/MaterialEditText
CommonsWare 2015年

Answers:


330

由于Google在TextInputLayout中将引入,因此无需使用第三方库design-support-library

下面是一个基本示例:

布局

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

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

注意:通过设置app:errorEnabled="true"为的属性,TextInputLayout一旦显示错误,它的大小就不会改变-因此它基本上会阻塞空间。

为了显示下面的错误EditText,你只需要调用#setErrorTextInputLayout(不上孩子EditText):

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

结果

图片显示带有错误消息的编辑文本

要隐藏错误并重置色彩,只需致电til.setError(null)


注意

为了使用,TextInputLayout您必须在build.gradle依赖项中添加以下内容:

dependencies {
    compile 'com.android.support:design:25.1.0'
}

设置自定义颜色

默认情况下,的EditText行将为红色。如果需要显示其他颜色,则可以在调用后立即使用以下代码setError

editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);

要清除它,只需调用clearColorFilter函数,如下所示:

editText.getBackground().clearColorFilter();

3
是的!而已 !您如何使线变成红色?
kmn 2015年

3
@kmn将线变成红色并不是开箱即用的,因此您需要自己完成。看到我的编辑。在提示方面:这是不可能的。
reVerse

5
@Alessio我只是想说它在扩展AppCompatActivity时应该起作用。不过:从appcompat-v23开始,一旦您将调用textInputLayout.setError("Error messsage")的颜色EditText变为红色,就不再需要设置colorFilter了。要重置它,只需调用即可textInputLayout.setError(null)
reVerse

3
editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);最新的支持库不再需要
Antoine Bolvy

13
只是想说明一下,因为它的细节太小了-我在而EditText不是上调用setError遇到了这个问题TextInputLayout。我看到了这个答案,但仍然想不出要更改的内容。很容易错过的事情。
h_k

8

呼叫myTextInputLayout.setError()而不是myEditText.setError()

这些容器和容器在设置错误方面具有双重功能。您需要的功能是容器的功能。但是您可能需要最低版本的23。


7

EditText应该包裹在TextInputLayout

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

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/etEmail"
        android:hint="Email"
        android:layout_marginTop="10dp"
        />

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

要获得所需的错误消息,请将error设置为 TextInputLayout

TextInputLayout tilEmail = (TextInputLayout) findViewById(R.id.tilEmail);
if (error){
    tilEmail.setError("Invalid email id");    
}

您应该添加设计支持库依赖性。在gradle依赖项中添加此行

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

4

reVerse的回答很好,但是没有指出如何删除浮动错误工具提示之类的东西

您需要edittext.setError(null)将其删除。
而且,正如有人指出的那样,您不需要TextInputLayout.setErrorEnabled(true)

布局

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

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter something" />
</android.support.design.widget.TextInputLayout>

TextInputLayout til = (TextInputLayout) editText.getParent();
til.setError("Your input is not valid...");
editText.setError(null);


0

如果仍然有人在使用答案中提到的使用Google的设计库时仍然遇到错误,请使用@h_k的注释,即-

与其在TextInputLayout上调用setError不如在EditText本身使用setError


0
private EditText edt_firstName;
private String firstName;

edt_firstName = findViewById(R.id.edt_firstName);

private void validateData() {
 firstName = edt_firstName.getText().toString().trim();
 if (!firstName.isEmpty(){
//here api call for ....
}else{
if (firstName.isEmpty()) {
                edt_firstName.setError("Please Enter First Name");
                edt_firstName.requestFocus();
            } 
}
}

在回答一个旧问题时,如果您包含一些上下文来解释您的答案如何帮助您的答案,那么对于其他StackOverflow用户来说,它的作用将大得多,尤其是对于已经接受了答案的问题。请参阅:如何写一个好的答案
David Buck
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.