TextInputLayout:未聚焦时提示标签的颜色不同 [英] TextInputLayout: Different color for hint label when not focused
问题描述
我想做什么:
使用嵌入在TextInputLayout中的EditText时，我想...
When using an EditText embedded in a TextInputLayout I want to ...
- 当标签散焦并漂浮在EditText上方时，将其颜色设置为GREEN(绿色)，因为用户已经输入了一些值
- 当标签散焦并位于EditText内时，将其颜色设置为RED，因为用户尚未输入值
- 我不想将所有EditTexts的提示文本颜色更改为RED，仅在将它们包装在TextInputLayout中时才需要更改(我不需要通用方法-一种特定的方法，例如为设置主题/样式布局XML中的每个TextInputLayout都可以)
- 保留(即，不要更改)当用户将注意力集中在字段上时用来给浮动标签上色的强调颜色(黄色).
我尝试过的事情:
在TextInputLayout上将以下内容设置为主题/样式确实满足1.，但不满足2.
Setting the below as a theme/style on the TextInputLayout does satisfy 1. but not 2.
<style name="FloatingLabel" parent="Widget.Design.TextInputLayout">
<item name="android:textColorHint">@color/red</item>
</style>
在我的嵌入式EditText上设置特定的颜色，以将提示文本更改为另一种颜色:
Setting a specific color on my embedded EditText that changes the hint text to another color:
android:textColorHint="@color/text_placeholder_gray"
实际上，当标签从其浮动位置移回Edittext作为提示(即无文本)时，实际上会导致提示文本重叠.
actually causes an overlap of hint texts when the label is moved from it's floating position back into the Edittext as a hint (i.e. no text).
设置此:
<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
<item name="android:textColor">@color/main_color</item>
在TextInputLayout上:
on the TextInputLayout:
<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" >
更改提示标签的颜色，但对于焦点状态也是如此-表示不满足4.
Changes the hint label color but it also does so for the focused state - which means 4 is not satisfied.
而且，由于图片不仅仅包含文字和单词(所有字段都处于非聚焦状态):
And since a picture says more than a tousand words (all fields are in non-focused state):
如何实现满足条件1-4的设置?
How to achieve a setup that satisfies criteria 1-4 ?
推荐答案
我有一个类似的问题:我需要实现一个文本输入布局，其中标签的空白颜色不同(当在编辑中没有输入文本时)文字)，已填充"和重点突出的状态.我的主要问题是如何区分空白状态和填充状态，因为使用选择器已经很容易为焦点状态设置不同的颜色.最后，我决定定义一个自定义的空文本"状态，并实现我的自定义文本输入布局(扩展了常规文本输入布局).
I had a similar problem: I needed to implement a text input layout in which the label has different colours for empty (when there is no text entered in the edit text), "filled" and focused state. My main problem was how to differentiate between the empty and the filled state as setting a different colour for the focused state was already easy using selectors. In the end I decided to define a custom "empty text" state and implement my custom text input layout (which extends the normal text input layout).
这是一些代码:
在res/values/attrs.xml中:
In 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 selector to set the colour of label in different states (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 for the input text layout (in res/values/styles.xml):
<style name="EditTextLayout">
...
<item name="android:textColorHint">@color/input_field_floating_label</item>
</style>
编辑文本的主题和样式(仍在res/values/styles.xml中):
Theme and style for the edit text (still in 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/
I recommend this blog post to get an idea of working with custom states: http://code.neenbedankt.com/example-of-custom-states-in-android-components/
这篇关于TextInputLayout:未聚焦时提示标签的颜色不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
