出错时不要更改 TextInputLayout 背景答案

【问题标题】：Do not change TextInputLayout background on error出错时不要更改 TextInputLayout 背景
【发布时间】：2016-12-05 13:21:06
【问题描述】：

我想要一个背景为“正常”的 EditText，但带有 TextInputEditText 的错误处理（错误消息出现在底部，而不是“！”drawable 出现）。

我得到了这样的东西：

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setError="@{viewModel.error}">

    <android.support.design.widget.TextInputEditText

        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:background="@drawable/simple_edit_text_background"
        android:ellipsize="end"
        android:inputType="textMultiLine|textNoSuggestions"
        android:text="@={viewModel.value}"

        style="@style/MyEditTextStyle" />

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

但似乎当我在 TextInputLayout 上设置错误时，它会将背景可绘制对象（在普通 TextInputEditText 中为下划线）更改为错误 TextView 的颜色。

这就是我的 EditText 的样子：

我们可以在TextInputLayout的代码中看到如下方法：

private void updateEditTextBackground() {
    if (mEditText == null) {
        return;
    }

    Drawable editTextBackground = mEditText.getBackground();
    if (editTextBackground == null) {
        return;
    }

    ensureBackgroundDrawableStateWorkaround();

    if (android.support.v7.widget.DrawableUtils.canSafelyMutateDrawable(editTextBackground)) {
        editTextBackground = editTextBackground.mutate();
    }

    if (mErrorShown && mErrorView != null) {
        // Set a color filter of the error color
        editTextBackground.setColorFilter(
                AppCompatDrawableManager.getPorterDuffColorFilter(
                        mErrorView.getCurrentTextColor(), PorterDuff.Mode.SRC_IN));
    } else if (mCounterOverflowed && mCounterView != null) {
        // Set a color filter of the counter color
        editTextBackground.setColorFilter(
                AppCompatDrawableManager.getPorterDuffColorFilter(
                        mCounterView.getCurrentTextColor(), PorterDuff.Mode.SRC_IN));
    } else {
        // Else reset the color filter and refresh the drawable state so that the
        // normal tint is used
        DrawableCompat.clearColorFilter(editTextBackground);
        mEditText.refreshDrawableState();
    }
}

更新背景颜色的代码块在这里：

if (mErrorShown && mErrorView != null) {
    // Set a color filter of the error color
    editTextBackground.setColorFilter(
            AppCompatDrawableManager.getPorterDuffColorFilter(
                    mErrorView.getCurrentTextColor(), PorterDuff.Mode.SRC_IN));
}

因为这个方法是私有的，所以我不能覆盖它，因为我仍然希望我的错误 TextView 的颜色为红色，所以到目前为止我看不到任何解决方案。有什么想法吗？

一种解决方案可能会在 setError 被调用之后将背景颜色重置为其默认值，但是他们的任何回调都使用像 onError 这样的方法，一旦错误设置为 TextView/EditText 就会被触发?

【问题讨论】：

标签： android android-textinputlayout

【解决方案1】：

我自己通过重写 TextInputLayout 来解决这个问题：

public class NoChangingBackgroundTextInputLayout extends TextInputLayout {
    public NoChangingBackgroundTextInputLayout(Context context) {
        super(context);
    }

    public NoChangingBackgroundTextInputLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NoChangingBackgroundTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setError(@Nullable CharSequence error) {
        ColorFilter defaultColorFilter = getBackgroundDefaultColorFilter();
        super.setError(error);
        //Reset EditText's background color to default.
        updateBackgroundColorFilter(defaultColorFilter);
    }

    @Override
    protected void drawableStateChanged() {
        ColorFilter defaultColorFilter = getBackgroundDefaultColorFilter();
        super.drawableStateChanged();
        //Reset EditText's background color to default.
        updateBackgroundColorFilter(defaultColorFilter);
    }

    private void updateBackgroundColorFilter(ColorFilter colorFilter) {
        if(getEditText() != null && getEditText().getBackground() != null)
            getEditText().getBackground().setColorFilter(colorFilter);
    }

    @Nullable
    private ColorFilter getBackgroundDefaultColorFilter() {
        ColorFilter defaultColorFilter = null;
        if(getEditText() != null && getEditText().getBackground() != null)
            defaultColorFilter = DrawableCompat.getColorFilter(getEditText().getBackground());
        return defaultColorFilter;
    }
}

正如我们所看到的，它在调用 setError 后将 EditText 的背景重置为其默认颜色，但也在方法 drawableStateChanged() 中，因为红色过滤器在失去/获得焦点时设置了 EditText 错误也是。

我不相信这是最好的解决方案，但如果我没有得到更好的解决方案，我会同时将其标记为已解决。

【讨论】：

不错的解决方案。又一次我们需要使用 hack 来克服 Android 的糟糕设计。
@Storix 是压倒一切的！
@Shubham 不，我不是在谈论覆盖。我指的是setError 和drawableStateChanged 方法。看，我们需要在两个不同的地方重新设置颜色。如果TextInputLayout 只是有一个选项来配置错误状态的颜色，我们就不需要引入这个开销和样板代码。
我昨天遇到了同样的问题。这帮助我解决了红色背景问题。谢谢
我遇到了同样的问题，但在我的情况下，如果出现错误，我想要红色错误。怎么做？

【解决方案2】：

我有同样的问题；在搜索并点击并运行后，我发现了解决这个问题的简单方法-

试试这个最简单的方法 -

               <android.support.design.widget.TextInputLayout
                    android:id="@+id/til_description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    app:errorText="@{feedbackViewModel.descError}"
                    >

                    <EditText
                        style="@style/TextInputLayoutEditText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@drawable/desc_field_selector"
                        **android:paddingTop="10dp"**
                        **android:paddingBottom="7dp"**
                        android:gravity="top|left"
                        android:hint="@string/description"
                        android:inputType="textMultiLine"
                        android:lines="4"
                        android:onTextChanged="@{(text, start, before, count) -> feedbackViewModel.onDescriptionTextChanged(text)}"
                        android:scrollHorizontally="false"
                        android:scrollbarStyle="insideInset"
                        android:scrollbars="vertical"
                        android:text="@={feedbackViewModel.description}"/>

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

还有 android:background="@drawable/desc_field_selector" -

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/rectangle_blue_border_background"
          android:state_pressed="true"/>
    <item android:drawable="@drawable/rectangle_blue_border_background"
          android:state_enabled="true"
          android:state_focused="true"
          android:state_window_focused="true"/>
    <item android:drawable="@drawable/rectangle_black_border_background"/>
</selector>

现在原始形状 (@drawable/rectangle_black_border_background) 将像 -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    **<item android:state_focused="false" android:top="5dp">**
        <shape>
            **<solid android:color="@android:color/transparent"/>**
            <stroke android:width="1dp" android:color="@android:color/secondary_text_light"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

原来的形状（@drawable/rectangle_blue_border_background）会像 -

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    **<item android:state_focused="true" android:top="5dp">**
        <shape>
            **<solid android:color="@android:color/transparent"/>**
            <stroke android:width="@dimen/one_dip" android:color="@color/colorAccent"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

注意-**行太重要了-

paddingTop="10dp" 和 android:paddingBottom="7dp" -> 会将浮动标签从边框形状向上移动到足够的位置，否则看起来会不太好。李>
android:top="5dp" - 对于移动浮动标签以调整形状非常重要。
solid android:color="@android:color/transparent" - 这个纯色是透明的，所以当错误发生时你只会看到一个透明的颜色。看看 -

**注意 - ** 根据需要从项目和纯色中更改您的填充值和顶部值（您也可以删除纯色线）。

就是这样 :-) 快乐编码 +1

【讨论】：

【解决方案3】：

如果你的edittext 视图有自定义背景，那么在你的drawable 文件夹中创建一个并将它的属性颜色设置为透明。作为参考，这里是名称为： shape_input_layout_edittext.xml 的形状

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="200dp"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#e2e2e2"></stroke>
    <solid android:color="#00000000"></solid>
    <corners android:radius="2dp"></corners>


</shape>

现在，在您的布局 xml 文件中，像这样使用它：

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/inputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:hintEnabled="false">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/edtText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"                    
  android:background="@drawable/shape_input_layout_edittext" ..../>
</com.google.android.material.textfield.TextInputLayout>

就是这样，现在每当出现错误时，edittext 的背景将没有颜色。快乐编码！

【讨论】：

我一直在努力寻找解决方案。但是谢谢，这个解决方案非常简单，而且效果很好。

【解决方案4】：

用https://stackoverflow.com/a/40379564/2914140 和https://stackoverflow.com/a/44744941/2914140 安排接受的解决方案，我又写了一个类。当 EditText 具有特殊背景 (background_1) 时，它会在出错时更改为 background_2。当错误消失时，它再次返回到 background_1。不执行红色填充。

public class YourTextInputLayout extends TextInputLayout {

    private Drawable drawable1; // Normal background.
    private Drawable drawable2; // Error background.

    public YourTextInputLayout(Context context) {
        super(context);
    }

    public YourTextInputLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public YourTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();

        replaceBackground();
    }

    @Override
    public void setError(@Nullable final CharSequence error) {
        super.setError(error);

        replaceBackground();
    }

    public void setDrawable1(Drawable drawable) {
        this.drawable1 = drawable;
    }

    public void setDrawable2(Drawable drawable) {
        this.drawable2 = drawable;
    }

    private void replaceBackground() {
        EditText editText = getEditText();
        if (editText != null) {
            editText.setBackground(isErrorEnabled() ? drawable2 : drawable1);
            Drawable drawable = editText.getBackground();
            if (drawable != null) {
                drawable.clearColorFilter();
            }
        }
    }
}

在 onCreate() / onCreateView() 初始化后的活动/片段调用中：

YourTextInputLayout inputLayout = ...;
inputLayout.setDrawable1(ContextCompat.getDrawable(getContext(), R.drawable.background_1));
inputLayout.setDrawable2(ContextCompat.getDrawable(getContext(), R.drawable.background_2));

在你的 XML 布局中调用它：

<com.example.package.YourTextInputLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <EditText
        ...

【讨论】：

【解决方案5】：

我建议的更简单的解决方案是创建一个可绘制资源文件 (@drawable/rectangular_border) :-

<?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="@color/colorAccent"        />    
        <corners
            android:radius="10dp"
            />
        <solid
            android:color="@android:color/transparent"
            />
    
    </shape>

并且在您的 XML 文件中，将 TextInputEditText 的背景替换为以下资源文件，即 -

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setError="@{viewModel.error}">

    <android.support.design.widget.TextInputEditText

        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:background="@drawable/rectangular_border"
        android:ellipsize="end"
        android:inputType="textMultiLine|textNoSuggestions"
        android:text="@={viewModel.value}"

        style="@style/MyEditTextStyle" />

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

这样你的背景颜色不会完全改变，只有错误或计数器溢出的边框。希望这个解决方案能解决您的问题:)。

【讨论】：