EditText 中的 DrawableButton 为 Show/Hide Password 并更改 DrawableEnd

Question

这是 activity_register.xml :

<EditText
    android:id="@+id/editTextTextPassword"
    android:layout_width="346dp"
    android:layout_height="49dp"
    android:layout_marginTop="32dp"
    android:drawableStart="@drawable/ic_vpn_key"
    android:drawableEnd="@drawable/ic_visibility"
    android:ems="10"
    android:hint="@string/password_hint"
    android:inputType="textPassword"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.502"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />

所以，

我有密码EditText

当您单击 drawableEnd 时，您应该会看到密码并且 drawable 应该会更改为另一个密码，然后再次隐藏密码。

我找到了可以显示密码的教程 -> 有效
_________________________change 可绘制对象 -> 无效
但是，我在 kotlin

的可绘制对象中找不到 onClickListener 的教程

问题短
单击可绘制对象时显示密码的代码，如果再次单击它，密码将再次隐藏。

Answer 1

你想要的是来自 Material Componenets 的 TextInputLayout。

操作方法如下：

在您的 build.gradle(app) 文件中实施 Material 库，如下所示：
```
implementation 'com.google.android.material:material:1.3.0-alpha01'
```

然后，将 XML 的 EditText 更改为

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/passwordLayout"
    style="@style/TextInputLayoutAppearanceFilled"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/password"

    app:endIconMode="password_toggle" //This is used to set the password toggle behavior

    app:startIconDrawable="@drawable/ic_lock_black_24dp">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:textSize="@dimen/_12ssp" />

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

然后，根据需要在 styles.xml 中更改样式：

 <style name="TextInputLayoutAppearanceFilled" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
 <item name="hintTextAppearance">@style/HintText</item>
 <item name="helperTextTextAppearance">@style/HelperText</item>

 <item name="android:textColor">@color/dark_grey</item>
 <item name="android:textColorHint">@color/color</item>
 <item name="hintTextColor">@color/color</item>
 <item name="boxStrokeColor">@color/color</item>
 <item name="startIconTint">@color/color</item>
 <item name="endIconTint">@color/color</item>
 <item name="boxBackgroundColor">@color/white</item>

 <item name="boxCornerRadiusBottomEnd">@dimen/_26sdp</item>
 <item name="boxCornerRadiusBottomStart">@dimen/_26sdp</item>
 <item name="boxCornerRadiusTopEnd">@dimen/_26sdp</item>
 <item name="boxCornerRadiusTopStart">@dimen/_26sdp</item>

 <item name="boxStrokeWidthFocused">0dp</item>

 <!--This destroys the visible layout in layout editor so  first
 comment this out to design-->
 <!--<item name="boxStrokeWidth">0dp</item>-->

 <item name="hintEnabled">true</item>

 </style>

输出结果如下：

密码切换将完全按照您的需要工作，而且图标也会更改为另一个。您可以根据需要进一步自定义它，请先查看官方文档 - TextInputLayout

Answer 2

只需使用 Material 组件库提供的 TextInputLayout 和密码切换结束图标：

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:startIconDrawable="@drawable/..."
        app:endIconMode="password_toggle"
        android:hint="Password">

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

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

EditText 中的 DrawableButton 为 Show/Hide Password 并更改 DrawableEnd

DrawableButton in EditText to Show/Hide Password and change DrawableEnd

android

android-edittext

kotlin

android-textinputlayout

material-components-android