如何使用 Material Design 风格下的 TextInputLayout 控件

Material Design 是 Google 推出的一种 UI 设计规范，旨在为 Android 应用程序提供一致的外观和体验。在这个规范中，TextInputLayout 控件是一种常见的 UI 元素。它为文本框提供了一个外部容器，可以显示提示文本和错误信息，以提高用户体验和可访问性。

在本文中，我们将讨论如何使用 Material Design 风格下的 TextInputLayout 控件，包括如何设置提示文本和错误验证信息，如何自定义字体、颜色和动画效果，以及如何处理用户输入并提交表单。

环境搭建

首先，我们需要确保项目已经集成了 Material Design 的相关库。对于 Android Studio 3.x 及以上版本，可以在 Gradle Scripts 文件夹下的 build.gradle(Module: app) 文件中添加以下依赖关系：

implementation 'com.google.android.material:material:1.0.0'

基本用法

先来看看 TextInputLayout 的基本使用。在布局文件中，我们可以将 TextInputLayout 作为文本框的容器，然后在里面嵌套一个 EditText 控件（或其它输入框）。下面是一个示例：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/username_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/username_hint">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/username_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"/>
</com.google.android.material.textfield.TextInputLayout>

这样，就会在文本框的前面显示提示文本（即 android:hint 属性）。

如果我们需要对输入框进行验证，可以在 Java 中使用 setError() 方法来设置错误信息。例如：

TextInputLayout usernameLayout = findViewById(R.id.username_layout);
String username = usernameLayout.getEditText().getText().toString();
if (username.isEmpty()) {
    usernameLayout.setError(getString(R.string.username_error));
} else {
    usernameLayout.setError(null);
}

这将在文本框的下方显示一个红色的错误信息。

自定义样式

TextInputLayout 支持很多自定义属性，我们可以通过修改这些属性来改变它的外观和动画效果。一些常用的自定义属性包括：

• hint：提示文本。
• hintEnabled：是否显示提示文本。
• errorEnabled：是否显示错误信息。
• errorTextColor：错误信息的文字颜色。
• boxBackgroundMode：边框样式（边框或下划线）。
• boxStrokeWidth：边框或下划线的宽度。
• boxStrokeColor：边框或下划线的颜色。
• counterEnabled：是否显示输入字符计数器。
• counterMaxLength：计数器的最大字符数。
• helperTextEnabled：是否显示提示信息。
• helperText：提示信息的文本内容。
• helperTextColor：提示信息的文字颜色。
• passwordToggleEnabled：是否显示密码可见性切换按钮。
• passwordToggleTint：密码可见性切换按钮的颜色。

以下是一些示例代码，演示如何自定义 TextInputLayout 的样式：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/username_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/username_hint"
    app:errorEnabled="true"
    app:errorTextColor="#F44336"
    app:boxBackgroundMode="filled"
    app:boxStrokeWidth="2dp"
    app:boxStrokeColor="#E0E0E0"
    app:counterEnabled="true"
    app:counterMaxLength="20"
    app:helperTextEnabled="true"
    app:helperText="@string/username_helper"
    app:helperTextColor="#2196F3"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="#2196F3">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/username_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"/>
</com.google.android.material.textfield.TextInputLayout>

处理用户输入

最后，我们需要处理用户的输入并提交表单。在 Java 中，可以使用 addTextChangedListener() 方法来监听 EditText 控件中的文本变化，例如：

TextInputLayout usernameLayout = findViewById(R.id.username_layout);
EditText usernameEditText = findViewById(R.id.username_edit_text);
usernameEditText.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        String username = usernameLayout.getEditText().getText().toString();
        if (username.isEmpty()) {
            usernameLayout.setError(getString(R.string.username_error));
        } else {
            usernameLayout.setError(null);
            //TODO: 处理用户提交的表单
        }
    }

    @Override
    public void afterTextChanged(Editable editable) {}
});

这将在用户输入结束后进行验证并提交表单。

总结

在本文中，我们介绍了如何使用 Material Design 风格下的 TextInputLayout 控件。我们了解了它的基本用法、自定义样式和处理用户输入的方法。通过使用这些技术，我们可以创建更加灵活、易于使用和可访问的用户界面。本文的示例代码可以在 GitHub 上找到。

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