Material Design 中 TextInputLayout 添加密码可见性的实现

在 Material Design 中，TextInputLayout 是一个重要的组件，它可以将 EditText 包装在一个外层容器中，提供了更好的用户体验和交互性。其中，添加密码可见性的实现可以让用户在输入密码时切换密码可见性，方便密码的输入和确认。

本文将介绍如何在 TextInputLayout 中添加密码可见性，并提供示例代码。读者通过本文的学习和实践，可以掌握 Material Design 中 TextInputLayout 的使用和自定义样式等技巧。

在 TextInputLayout 中添加密码可见性

在 Material Design 中，TextInputLayout 中添加密码可见性需要通过设置 EditText 的 inputType 属性和添加 ToggleButton 控件来实现。其中，inputType 属性的类型为 textPassword 或 textVisiblePassword，ToggleButtton 控件用于切换密码的可见性。

示例代码如下：

// javascriptcn.com 代码示例
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/edit_text_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/password_hint"
        android:inputType="textPassword" />

    <ToggleButton
        android:id="@+id/toggle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:button="@drawable/ic_password_toggle"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_alignBottom="@id/edit_text_password"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="bottom|end" />

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

其中，上面的代码中 ToggleButton 控件使用了一个自定义的 drawable，它可以根据当前密码的可见性来展示不同的图标。我们可以在 drawable 中使用 Android 提供的 VectorDrawable 或 BitmapDrawable，也可以使用第三方库来生成自定义样式的 drawable，这些都需要根据自己的需求来选择。

自定义 TextInputLayout 样式

除了以上介绍的默认样式，TextInputLayout 还支持自定义样式。我们可以通过设置 TextInputLayout 的 style 属性或通过自定义 drawable 来实现。

示例代码如下：

<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/primary</item>
    <item name="hintTextColor">@color/secondary</item>
    <item name="endIconMode">password_toggle</item>
    <item name="endIconDrawable">@drawable/ic_password_toggle</item>
    <item name="endIconContentDescription">@string/password_toggle_content_description</item>
</style>

其中，我们可以通过设置 boxStrokeColor 和 hintTextColor 属性来改变 TextInputLayout 的边框和提示文字的颜色，通过设置 endIconMode 属性来改变 ToggleButton 的位置和行为，通过设置 endIconDrawable 和 endIconContentDescription 属性来改变 ToggleButton 的图标和描述语言。

总结

本文介绍了在 Material Design 中 TextInputLayout 中添加密码可见性的实现，同时也提供了自定义 TextInputLayout 样式的示例代码。读者通过本文的学习和实践，可以深入掌握 Material Design 中 TextInputLayout 的使用和自定义样式等技巧，为开发更加美观、易用的应用程序打下坚实的基础。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654ade9d7d4982a6eb4da2f8