如何更改TextInputLayout中密码切换的颜色？

Question

如果

TextInputLayout

是否获得焦点，我需要更改

EditText

中密码切换的颜色。我已经这样做了，但它不起作用。颜色始终等于浅灰色（来自聚焦状态 = false）

布局

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        app:passwordToggleDrawable="@drawable/password_toggle_selector"
        app:passwordToggleTint="@color/color_password_toggle">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

颜色_密码_切换

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_green" android:state_checked="true"  />
    <item android:color="@color/color_grey" android:state_focused="true" />
    <item android:color="@color/color_light_grey" android:state_focused="false" />

密码_切换_选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_eye" android:state_checked="true />
    <item android:drawable="@drawable/ic_eye_off" />

Answer 1

TextInputLayout

包含在材料组件库

passwordToggleTint

属性（用于密码输入可见性切换的图标）已弃用。

现在只需使用

endIconTint

属性即可。

<com.google.android.material.textfield.TextInputLayout
    ...
    app:endIconMode="password_toggle"
    android:hint="Password"
    style="@style/FilledBoxEndIconTint">

    <com.google.android.material.textfield.TextInputEditText
         ...
         android:inputType="textPassword"/>

</com.google.android.material.textfield.TextInputLayout>

与：

  <style name="FilledBoxEndIconTint" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="endIconTint">@color/my_selector_color</item>
  </style>

您可以使用颜色或选择器。

您还可以在布局中使用

app:endIconTint

属性：

 <com.google.android.material.textfield.TextInputLayout
            ...
            app:endIconMode="password_toggle"
            android:hint="Password"
            app:endIconTint="@color/my_selector_color">

默认选择器是：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_activated="true"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>

Answer 2

我在 TextInputLayout 中使用了：app:passwordToggleTint="@android:color/black"

Answer 3

在 res/color 目录中创建 color_password_toggle.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/color_green" android:state_checked="true"  />
<item android:color="@color/color_light_grey" android:state_checked="false" />

您可以删除自定义图标以使用默认的眼睛图标：

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/color_password_toggle">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

Answer 4

似乎当

TextInputEditText

获得焦点时，它并没有将

TextInputLayout

状态设置为

state_activated

。

但是，如果您创建自己的

TextInputEditText

版本，则很容易实现。

class MyTextInputEditText : TextInputEditText {
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
    constructor(context: Context) : super(context)

    override fun onFocusChanged(focused: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
        super.onFocusChanged(focused, direction, previouslyFocusedRect)
        getTextInputLayout()?.setEndIconActivated(focused)
    }

    //copied from TextInputEditText (why this is private?)
    private fun getTextInputLayout(): TextInputLayout? {
        var parent = parent
        while (parent is View) {
            if (parent is TextInputLayout) {
                return parent
            }
            parent = parent.getParent()
        }
        return null
    }
}

基本上只需执行 @gabriele-mariotti 建议的操作，根据您的需求创建一个组合

android:state_activated

、

android:state_enabled

和

android:state_checked

的选择器。

我建议对材质库进行更改，查看 GitHub 上的 PR。

Answer 5

删除 app:passwordToggleEnabled="true"，因为它已被弃用。只需使用 app:endIconMode="password_toggle" 和 app:endIconTint="@color/colorPrimary" 为图标着色。就是这样！