Android:在错误状态的TextInputLayout中更改浮动标签(提示)的颜色

时间:2016-08-25 11:24:40

标签: android xml material-design

我希望TextInputLayouts的浮动标签在出现错误时改变颜色(例如红色)。我可以更改错误文本的颜色,但它对浮动标签的外观没有影响(与某些其他线程声称的人不同)。我无法使用选择器作为提示颜色来解决这个问题,因为似乎没有为错误定义状态。有没有人知道如何做到这一点,而不必手动编程错误事件的变化/创建一个新的java类(使用EditText作为父类)?

以下是我定义的样式:

<style name="EditTextFloatingLabel" parent="@android:style/TextAppearance">
    <item name="android:textSize">@dimen/textsize_caption_small</item>
    <item name="android:layout_marginBottom">8dp</item>
    <item name="android:textColor">@color/input_text_color</item>
</style>

<style name="EditTextErrorText" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/error_color</item>
</style>

<style name="EditTextLayout">
    <item name="android:textColorHint">@color/placeholder_color</item>
    <item name="android:background">@drawable/input_field_background</item>
    <item name="android:paddingBottom">@dimen/default_margin_bottom</item>
    <item name="android:paddingStart">@dimen/default_margin_left</item>
    <item name="android:paddingEnd">@dimen/default_margin_right</item>
</style>

<style name="EditTextTheme">
    <item name="android:imeOptions">actionDone</item>
    <item name="android:maxLines">1</item>
    <item name="colorControlNormal">@color/primary_line_color</item>
    <item name="colorControlActivated">@color/nordea_blue</item>
    <item name="android:colorControlHighlight">@color/error_color</item>
    <item name="android:textColorPrimary">@color/input_field_text</item>
    <item name="android:textSize">@dimen/textsize_caption</item>
    <item name="android:textColorHint">@color/placeholder_color</item>

</style>

<style name="EditText">
    <item name="android:theme">@style/EditTextTheme</item>
    <item name="android:textCursorDrawable">@drawable/cursor_blue</item>
    <item name="android:paddingTop">@dimen/default_padding_top</item>
    <item name="android:paddingStart">@dimen/payment_text_input_padding</item>
</style>

用法:

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_field_error_wrapper_light"
            style="@style/EditTextLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/testlogin_text_input_end_padding"
            android:layout_marginStart="@dimen/testlogin_text_input_start_padding"
            android:paddingTop="@dimen/default_padding_top"
            app:hintTextAppearance="@style/EditTextFloatingLabel"
            app:errorTextAppearance="@style/EditTextErrorText"
            app:errorEnabled="true">

            <EditText
                android:id="@+id/input_field_light_error"
                style="@style/EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="#Input Field Disabled Light"
                android:imeOptions="actionDone"
                />
        </android.support.design.widget.TextInputLayout>

这就是我所看到的:

enter image description here

2 个答案:

答案 0 :(得分:3)

当我需要在布局处于错误状态时执行其他一些操作时,我决定采用创建自定义错误状态的解决方案和可以进入此状态的自定义TextInputLayout。

代码:

在res / values / attrs.xml中定义新的错误状态:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    ...

    <!-- custom states -->
    <declare-styleable name="ErrorState">
        <attr name="state_error" format="boolean" />
    </declare-styleable>
</resources>

ErrorStateTextInputLayout类:

public class ErrorStateTextInputLayout extends TextInputLayout {
    private boolean hasError = false;
    private static final int[] ERROR_STATE = new int[]{R.attr.state_error};

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

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

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

    @Override
    protected int[] onCreateDrawableState(int extraSpace) {
        int[] state = super.onCreateDrawableState(extraSpace + 1);
        if (hasError) {
            mergeDrawableStates(state, ERROR_STATE);
        }
        return state;
    }

    @Override
    public void setError(@Nullable CharSequence error) {
        if (error == null) {
            setHasError(false);
        } else {
            setHasError(true);
        }
        super.setError(error);
    }


    public void setHasError(boolean error) {
        this.hasError = error;
        refreshDrawableState();
    }
}

用于设置提示文字颜色的选择器:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:color="@color/disabled_text_color" android:state_enabled="false" />
    <item android:color="@color/error_color" app:state_error="true" />
    <item android:color="@color/input_text_color" android:state_focused="true" />
    <item android:color="@color/placeholder_color" />
</selector>

这篇博文给了我很多帮助:http://code.neenbedankt.com/example-of-custom-states-in-android-components/

答案 1 :(得分:0)

试试这个......固定浮动颜色.....

<style name="TextLabelInput" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">@color/solid_red</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/solid_red</item>
<item name="android:duration">200</item>
<item name="android:textColorHighlight">@color/solid_red</item>

<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">@color/solid_red</item>
<item name="colorControlNormal">@color/solid_red</item>
<item name="colorControlActivated">@color/solid_red</item>
<item name="colorPrimary">@color/solid_red</item>
<item name="colorPrimaryDark">@color/solid_red</item>

   <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        app:errorTextAppearance="@style/TextLabelInput"

        >

提示文字颜色管理您的主题

是colorPrimary和colorAccent

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

</style>