Android Studio 的 Material Design 中的密码切换图标是倒置的

Question

当我运行此代码时，密码可见性切换图标会反转。如果密码被隐藏，它会显示“睁开眼睛”图标，反之亦然。

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/id_txtInpLayout_pass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        android:layout_marginTop="10dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/id_txtInpEditTxt_pass"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/hint_pass"
            android:inputType="textPassword"
            android:ems="14"/>

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

我没有在MainActivity.java中编写任何代码。

Answer 1

app:passwordToggleEnabled已被弃用。为了更好地使用，您现在应该在 TextInputLayout 中使用 endIconMode，如下所示：

app:endIconMode="password_toggle"

然后在您的 TextInputEditText 中使用：

android:inputType="textPassword"

就是这样。下面是完整的 XML 代码示例：

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:id="@+id/editTextLayoutPassword"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:hint="Password"
        app:endIconMode="password_toggle">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:maxLength="20" />
    </com.google.android.material.textfield.TextInputLayout>

编辑：看来它仍然可能被颠倒，所以这是最终的解决方案。创建一个新的 Drawable 资源文件，调用它custom_eye并插入以下代码：

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

然后只需下载两个 SVG 图标（您可以在此处选择您的图标）。

最后，只需将它们导入为可绘制文件夹中的“矢量资源”并重命名其中一个ic_opened_eye，另一个ic_closed_eye在这里，您可以更改图标以提高密码可见性。

然后只需app:endIconDrawable="@drawable/custom_eye"在您的 TextInputLayout 中使用即可。

如果您仍然不喜欢它，只需随时反转 XML 文件中的两个图标即可。