Material Design 是谷歌推出的一种设计风格，为 Android 设计提供了非常优美、干净和极富层次感的视觉效果以及出色的用户体验。在 Material Design 中，TextInputEditText 是一种很常见的控件，常被用于输入文本或密码。本篇文章将详细介绍 TextInputEditText 的使用方法，并附带示例代码，可以帮助初学者快速上手。
1. TextInputEditText 的定义
TextInputEditText 是 Material Design 中的一个控件，它的作用就是在界面上输入文本或密码。同时，TextInputEditText 也支持浮动式标签，可以让用户更加清晰地知道自己正在输入的内容。这个控件非常适合用于表单输入以及登录页面等场景。TextInputEditText 是在 Android Support Library 23.2 中引入的。
2. TextInputEditText 的属性
TextInputEditText 包含了很多属性，可以根据需要调整控件的外观和行为。以下是一些比较常用的属性：
android:hint：输入框中显示的提示信息。
app:hintEnabled：是否启用浮动式标签。如果设置为 true，则输入框上方的标签会在用户输入内容后浮动到输入框上方。默认值为 true。
app:hintTextAppearance：浮动式标签的样式。
app:errorEnabled：是否启用错误提示。如果设置为 true，则可以通过 setError() 方法在输入框下方显示错误信息。默认值为 false。
app:errorTextAppearance：错误提示的样式。
app:counterEnabled：是否启用输入字符计数器。如果设置为 true，则会在输入框右下角显示字数统计信息。默认值为 false。
app:counterMaxLength：输入字符的最大长度。
app:passwordToggleEnabled：是否启用密码可见切换。如果设置为 true，则可以在输入框右侧显示一个切换按钮，以方便用户查看或隐藏密码。
app:passwordToggleDrawable：密码可见切换按钮的图标。
app:passwordToggleTint：密码可见切换按钮的颜色。
3. TextInputEditText 的使用
使用 TextInputEditText 可以简单地通过 XML 布局文件创建一个控件。以下是一个常用的示例代码：
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/usernameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:hintEnabled="true"
app:hintTextAppearance="@style/TextLabelStyle">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/usernameEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1"
android:singleLine="true"
android:textColor="@color/black"
android:textColorHint="@color/hint"
android:textSize="16sp"
android:imeOptions="actionNext"
android:hint="@string/username"/>
</com.google.android.material.textfield.TextInputLayout>在 XML 布局文件中，首先创建一个 TextInputLayout 控件，用于包含 TextInputEditText 控件。然后设置 TextInputLayout 的一些样式，如启用浮动式标签和浮动式标签的样式。接着，在 TextInputLayout 控件内部创建 TextInputEditText 控件，设置其一些样式，如文字大小、字体颜色等。同时，还可以通过 android:inputType 属性设置输入类型（如 text、number、password 等），通过 android:maxLines 属性设置最大行数（通常设置为 1 表示单行输入），通过 android:singleLine 属性设置单行显示。最后，通过 android:hint 属性设置输入框中的提示信息，并在代码中通过 ID 引用 TextInputEditText 控件。
为了让输入框更加人性化，还可以启用浮动式标签、错误提示、输入字符计数器以及密码可见切换等功能。以下是一个带有浮动式标签、错误提示和输入字符计数器的示例代码：
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/passwordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:hintEnabled="true"
app:hintTextAppearance="@style/TextLabelStyle"
app:errorEnabled="true"
app:errorTextAppearance="@style/ErrorLabelStyle"
app:counterEnabled="true"
app:counterMaxLength="16">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/passwordEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true"
android:textColor="@color/black"
android:textColorHint="@color/hint"
android:textSize="16sp"
android:imeOptions="actionDone"
android:hint="@string/password"/>
</com.google.android.material.textfield.TextInputLayout>在代码中，可以通过 setError() 方法来显示输入框下方的错误信息。例如：
TextInputLayout passwordLayout = findViewById(R.id.passwordLayout);
TextInputEditText passwordEditText = findViewById(R.id.passwordEditText);
passwordEditText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
//...
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
//...
}
@Override
public void afterTextChanged(Editable s) {
if (s.toString().trim().length() < 6) {
passwordLayout.setError("密码长度不能少于 6 个字符！");
} else {
passwordLayout.setError(null);
}
}
});通过 addTextChangedListener() 方法，可以监听输入框内文本的变化，当文本框内字符长度小于 6 个字符时，设置错误信息“密码长度不能少于 6 个字符！”并显示在输入框下方。在输入内容满足长度条件时，清空错误信息。
总结
在 Material Design 中，TextInputEditText 是一个非常常见的控件，常常用于输入文本或密码。本文从定义、属性和使用三方面详细介绍了 TextInputEditText 的使用方法，并附带了示例代码，旨在帮助初学者能够快速了解和使用 TextInputEditText。TextInputEditText 简单易用，而且功能强大，对于开发高质量的 Android 应用程序至关重要。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a5259dadd4f0e0ffd98ae7