在 Material Design 中，TextInputLayout 是一个非常重要的组件，它能够让我们的表单输入更加美观、易用和易于理解。TextInputLayout 是一个容器控件，它包含了一个 EditText 组件，并且可以提供一些额外的功能，比如标签、提示信息、错误信息等等。在本文中，我们将详细讲解 TextInputLayout 的使用方法，并提供一些示例代码，帮助您更好地理解和应用这个组件。
1. TextInputLayout 的基本用法
首先，我们需要在项目中引入 TextInputLayout 组件。在 build.gradle 文件中添加以下代码：
implementation 'com.google.android.material:material:1.4.0'
然后，在布局文件中添加 TextInputLayout 组件和 EditText 组件。例如：
// javascriptcn.com 代码示例
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入用户名">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>这里，我们创建了一个 TextInputLayout 组件，并将 EditText 组件作为其子组件放入其中。我们还设置了一个提示信息，当用户未输入内容时，该提示信息将显示在输入框中。
然后，在代码中，我们可以通过 findViewById 方法获取 TextInputLayout 组件和 EditText 组件，并对其进行操作。例如：
// javascriptcn.com 代码示例
TextInputLayout textInputLayout = findViewById(R.id.text_input_layout);
EditText editText = findViewById(R.id.edit_text);
String input = editText.getText().toString();
if (TextUtils.isEmpty(input)) {
textInputLayout.setError("请输入用户名");
} else {
textInputLayout.setError(null);
}这里，我们首先获取了 TextInputLayout 组件和 EditText 组件，然后获取了用户输入的内容。如果用户未输入内容，则通过 setError 方法设置错误信息，该信息将显示在输入框下方。如果用户已输入内容，则通过 setError 方法将错误信息设置为 null，以清除错误信息。
2. TextInputLayout 的高级用法
除了基本用法之外，TextInputLayout 还提供了许多高级用法，可以让我们的表单输入更加美观、易用和易于理解。下面，我们将逐一介绍这些用法。
2.1 标签
在 TextInputLayout 中，我们可以通过 setHint 方法设置提示信息，该信息将显示在输入框中。但是，如果我们想要在输入框上方显示一个标签，该怎么办呢？这时，我们可以使用 setHint 方法的另一个重载方法，该方法可以设置一个独立的标签。例如：
// javascriptcn.com 代码示例
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false"
app:labelEnabled="true"
app:labelText="用户名">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>这里，我们通过设置 hintEnabled 属性为 false，禁用了默认的提示信息。然后，通过设置 labelEnabled 属性为 true，启用了标签。最后，通过设置 labelText 属性，设置了标签的文本内容。
在代码中，我们同样可以通过 findViewById 方法获取 TextInputLayout 组件和 EditText 组件，并对其进行操作。例如：
// javascriptcn.com 代码示例
TextInputLayout textInputLayout = findViewById(R.id.text_input_layout);
EditText editText = findViewById(R.id.edit_text);
String input = editText.getText().toString();
if (TextUtils.isEmpty(input)) {
textInputLayout.setError("请输入用户名");
} else {
textInputLayout.setError(null);
}这里，我们同样获取了 TextInputLayout 组件和 EditText 组件，然后获取了用户输入的内容。如果用户未输入内容，则通过 setError 方法设置错误信息，该信息将显示在输入框下方。如果用户已输入内容，则通过 setError 方法将错误信息设置为 null，以清除错误信息。
2.2 提示信息
除了标签之外，TextInputLayout 还提供了一些额外的提示信息，可以帮助用户更好地理解和使用表单输入。例如，我们可以通过 setHelperText 方法设置一个帮助文本，该文本将显示在输入框下方。例如：
// javascriptcn.com 代码示例
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false"
app:helperTextEnabled="true"
app:helperText="请输入长度为 6-12 的用户名">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>这里，我们通过设置 hintEnabled 属性为 false，禁用了默认的提示信息。然后，通过设置 helperTextEnabled 属性为 true，启用了帮助文本。最后，通过设置 helperText 属性，设置了帮助文本的内容。
在代码中，我们同样可以通过 findViewById 方法获取 TextInputLayout 组件和 EditText 组件，并对其进行操作。例如：
// javascriptcn.com 代码示例
TextInputLayout textInputLayout = findViewById(R.id.text_input_layout);
EditText editText = findViewById(R.id.edit_text);
String input = editText.getText().toString();
if (input.length() < 6 || input.length() > 12) {
textInputLayout.setError("请输入长度为 6-12 的用户名");
} else {
textInputLayout.setError(null);
}这里，我们同样获取了 TextInputLayout 组件和 EditText 组件，然后获取了用户输入的内容。如果用户输入的内容长度不符合要求，则通过 setError 方法设置错误信息，该信息将显示在输入框下方。如果用户输入的内容长度符合要求，则通过 setError 方法将错误信息设置为 null，以清除错误信息。
2.3 计数器
除了标签和提示信息之外，TextInputLayout 还提供了一个计数器，可以帮助用户更好地了解输入框中已输入的内容数量。例如：
// javascriptcn.com 代码示例
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="12">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>这里，我们通过设置 counterEnabled 属性为 true，启用了计数器。然后，通过设置 counterMaxLength 属性，设置了计数器的最大值。
在代码中，我们同样可以通过 findViewById 方法获取 TextInputLayout 组件和 EditText 组件，并对其进行操作。例如：
// javascriptcn.com 代码示例
TextInputLayout textInputLayout = findViewById(R.id.text_input_layout);
EditText editText = findViewById(R.id.edit_text);
String input = editText.getText().toString();
if (input.length() > 12) {
textInputLayout.setError("用户名长度不能超过 12 个字符");
} else {
textInputLayout.setError(null);
}这里，我们同样获取了 TextInputLayout 组件和 EditText 组件，然后获取了用户输入的内容。如果用户输入的内容长度超过了计数器的最大值，则通过 setError 方法设置错误信息，该信息将显示在输入框下方。如果用户输入的内容长度未超过计数器的最大值，则通过 setError 方法将错误信息设置为 null，以清除错误信息。
2.4 密码可见性
最后，TextInputLayout 还提供了一个非常实用的功能，即密码可见性。在密码输入框中，用户通常无法直接看到自己输入的密码，这会给用户带来不便。因此，TextInputLayout 提供了一个密码可见性的功能，可以让用户在输入密码时，直接看到自己输入的内容。例如：
// javascriptcn.com 代码示例
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleDrawable="@drawable/ic_password">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>这里，我们通过设置 passwordToggleEnabled 属性为 true，启用了密码可见性功能。然后，通过设置 passwordToggleDrawable 属性，设置了切换密码可见性的图标。最后，在 EditText 组件中，我们设置了 inputType 属性为 textPassword，以启用密码输入框。
在代码中，我们同样可以通过 findViewById 方法获取 TextInputLayout 组件和 EditText 组件，并对其进行操作。例如：
// javascriptcn.com 代码示例
TextInputLayout textInputLayout = findViewById(R.id.text_input_layout);
EditText editText = findViewById(R.id.edit_text);
String input = editText.getText().toString();
if (TextUtils.isEmpty(input)) {
textInputLayout.setError("请输入密码");
} else if (input.length() < 6) {
textInputLayout.setError("密码长度不能少于 6 个字符");
} else {
textInputLayout.setError(null);
}这里，我们同样获取了 TextInputLayout 组件和 EditText 组件，然后获取了用户输入的内容。如果用户未输入内容，则通过 setError 方法设置错误信息，该信息将显示在输入框下方。如果用户输入的内容长度不符合要求，则通过 setError 方法设置错误信息，该信息将显示在输入框下方。如果用户输入的内容符合要求，则通过 setError 方法将错误信息设置为 null，以清除错误信息。
3. 总结
通过本文的介绍，我们了解了 Material Design 中 TextInputLayout 的基本用法和高级用法，包括标签、提示信息、计数器、密码可见性等等。TextInputLayout 是一个非常实用的组件，可以帮助我们更好地设计和实现表单输入。如果您正在开发一个 Android 应用程序，那么请务必学习和掌握 TextInputLayout 的使用方法，它将对您的应用程序的用户体验有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657fbffcd2f5e1655da9a836