TextInputLayout:未聚焦时提示标签的颜色不同

时间:2016-07-12 11:20:29

标签: android android-layout android-theme android-styles

我想做什么:

当使用嵌入在TextInputLayout中的EditText时,我想......

  1. 当标签的颜色离焦并浮动在EditText上方时,将标签的颜色设置为绿色,因为用户已经输入了一些值
  2. 当标签的焦点位于EditText内时,将标签的颜色设置为红色,因为用户尚未输入值
  3. 我不想将所有EditTexts的提示文本颜色更改为RED,但只有当它们包含在TextInputLayout中时(我不需要一般方法 - 一种特定的方法,比如设置一个布局XML中每个TextInputLayout的主题/样式都可以。)
  4. 当用户聚焦该字段时,保留(即不要更改)用于为浮动标签着色的强调色(黄色)。
  5. 我尝试了什么:

    在TextInputLayout上将下面设置为主题/样式确实满足1.但不满足2.

    <style name="FloatingLabel" parent="Widget.Design.TextInputLayout">
        <item name="android:textColorHint">@color/red</item>
    </style>
    

    在我的嵌入式EditText上设置特定颜色,将提示文本更改为另一种颜色:

     android:textColorHint="@color/text_placeholder_gray"
    
    当标签从它的浮动位置移回Edittext作为提示(即没有文字)时,

    实际上会导致提示文本重叠。

    设置:

    <style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
    
    TextInputLayout上的

     <android.support.design.widget.TextInputLayout
      ...
       app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" >
    

    更改提示标签颜色,但对焦点状态也是如此 - 这意味着4不满足。

    因为一张图片说的超过千字(所有字段都处于非聚焦状态):

    enter image description here

    如何实现满足标准1-4的设置?

1 个答案:

答案 0 :(得分:5)

我遇到了类似的问题:我需要实现一个文本输入布局,其中标签有不同的颜色为空(当编辑文本中没有输入文本时),“填充”和聚焦状态。我的主要问题是如何区分空状态和填充状态,因为使用选择器设置聚焦状态的不同颜色已经很容易了。最后,我决定定义一个自定义的“空文本”状态,并实现我的自定义文本输入布局(扩展了普通的文本输入布局)。

以下是一些代码:

在res / values / attrs.xml中:

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

...

    <!-- Custom state for the text input layout to determine whether the label is shown above some text or not -->
    <declare-styleable name="EmptyTextState">
        <attr name="state_empty_text" format="boolean"/>
    </declare-styleable>

</resources>

自定义文字输入布局:

public class EmptyStateTextInputLayout extends TextInputLayout {
    private boolean emptyText = true;
    private static final int[] EMPTY_TEXT_STATE = new int[]{R.attr.state_empty_text};

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

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

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

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

    public void setEmptyTextState(boolean emptyTextState) {
        this.emptyText = emptyTextState;
        refreshDrawableState();
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (child instanceof EditText) {
            EditText editText = (EditText) child;
            if (!TextUtils.isEmpty(editText.getText())) {
                setEmptyTextState(false);
            }
            editText.addTextChangedListener(new TextWatcher() {
                @Override
                public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                }

                @Override
                public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                }

                @Override
                public void afterTextChanged(Editable editable) {
                    if (!TextUtils.isEmpty(editable)) {
                        setEmptyTextState(false);
                    } else {
                        setEmptyTextState(true);
                    }
                }
            });
        }
        super.addView(child, index, params);
    }
}

用于设置不同状态下标签颜色的XML选择器(res / color / input_field_floating_label.xml):

<?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/focused_text_color" android:state_focused="true" />
    <item android:color="@color/placeholder_color" app:state_empty_text="true"/>
    <item android:color="@color/primary_text_color"/> <!-- default color -->
</selector>

输入文本布局的样式(在res / values / styles.xml中):

<style name="EditTextLayout">
    ...
    <item name="android:textColorHint">@color/input_field_floating_label</item>
</style>

编辑文本的主题和样式(仍在res / values / styles.xml中):

<style name="EditTextTheme">
    ...
    <item name="android:textColorHint">@color/input_field_floating_label</item>
</style>

<style name="EditText">
    <item name="android:theme">@style/EditTextTheme</item>
    ...
</style>

用法:

<com.package.path.widget.EmptyStateTextInputLayout
            style="@style/DarkEditTextLayout"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            ...
            >

            <EditText
                style="@style/EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
</com.package.path.widget.EmptyStateTextInputLayout>

我推荐此博客文章,以了解如何使用自定义状态:http://code.neenbedankt.com/example-of-custom-states-in-android-components/