TextInputLayout:未聚焦时提示标签的颜色不同
TextInputLayout: Different color for hint label when not focused
我想做的事情:
当使用嵌入在 TextInputLayout 中的 EditText 时,我想...
- 当标签失去焦点并漂浮在 EditText 上方时,将标签的颜色设置为绿色,因为用户已经输入了一些值
- 当标签散焦并位于 EditText 内部时,将标签的颜色设置为红色,因为用户尚未输入值
- 我不想将我所有 EditText 的提示文本颜色更改为红色,但只有当它们被包裹在 TextInputLayout 中时(我不需要通用方法 - 一种特定方法,如设置 theme/style 对于布局中的每个 TextInputLayout XML 就可以了)
- 保留(即不更改)用户聚焦字段时用于为浮动标签着色的强调色 (YELLOW)。
我试过的:
在 TextInputLayout 上将以下设置为 theme/style 确实满足 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。
而且由于一张图片说的不止一个字(所有字段都处于非聚焦状态):
如何实现满足条件 1-4 的设置?
我有一个类似的问题:我需要实现一个文本输入布局,其中标签具有不同颜色的空白(当编辑文本中没有输入文本时)、"filled" 和聚焦状态。我的主要问题是如何区分空状态和填充状态,因为使用选择器已经很容易为聚焦状态设置不同的颜色。最后我决定定义一个自定义 "empty text" 状态并实现我的自定义文本输入布局(它扩展了普通文本输入布局)。
这是一些代码:
在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>
我推荐此博客 post 以了解如何使用自定义状态:http://code.neenbedankt.com/example-of-custom-states-in-android-components/
我想做的事情:
当使用嵌入在 TextInputLayout 中的 EditText 时,我想...
- 当标签失去焦点并漂浮在 EditText 上方时,将标签的颜色设置为绿色,因为用户已经输入了一些值
- 当标签散焦并位于 EditText 内部时,将标签的颜色设置为红色,因为用户尚未输入值
- 我不想将我所有 EditText 的提示文本颜色更改为红色,但只有当它们被包裹在 TextInputLayout 中时(我不需要通用方法 - 一种特定方法,如设置 theme/style 对于布局中的每个 TextInputLayout XML 就可以了)
- 保留(即不更改)用户聚焦字段时用于为浮动标签着色的强调色 (YELLOW)。
我试过的:
在 TextInputLayout 上将以下设置为 theme/style 确实满足 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。
而且由于一张图片说的不止一个字(所有字段都处于非聚焦状态):
如何实现满足条件 1-4 的设置?
我有一个类似的问题:我需要实现一个文本输入布局,其中标签具有不同颜色的空白(当编辑文本中没有输入文本时)、"filled" 和聚焦状态。我的主要问题是如何区分空状态和填充状态,因为使用选择器已经很容易为聚焦状态设置不同的颜色。最后我决定定义一个自定义 "empty text" 状态并实现我的自定义文本输入布局(它扩展了普通文本输入布局)。
这是一些代码:
在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>
我推荐此博客 post 以了解如何使用自定义状态:http://code.neenbedankt.com/example-of-custom-states-in-android-components/