EditText 中的 DrawableButton 以显示/隐藏密码并更改 DrawableEnd答案

【问题标题】：DrawableButton in EditText to Show/Hide Password and change DrawableEndEditText 中的 DrawableButton 以显示/隐藏密码并更改 DrawableEnd
【发布时间】：2020-06-26 21:25:14
【问题描述】：

这是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 应该会更改为另一个，然后再次隐藏密码。

我找到了可以显示密码的教程 -> 有效
_________________________更改可绘制对象 -> 不起作用
但是，我在 kotlin 的可绘制对象中找不到 onClickListener 的教程

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

【问题讨论】：

标签： android kotlin android-edittext android-textinputlayout material-components-android

【解决方案1】：

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

你是这样做的：

在你的 build.gradle(app) 文件中实现材料库：

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

【讨论】：

非常感谢，我看到这个网站是因为图标，但我没有看到...非常感谢，我很感激

【解决方案2】：

只需使用材料组件库提供的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>

【讨论】：