Material Design 是 Google 推出的一种设计语言，它被广泛应用于 Android 和 Web 开发中。其中，TextInputLayout 是 Material Design 中的一个组件，它可以提供优美的输入框动画效果，让用户的输入更加直观、自然。本文将介绍如何运用 TextInputLayout 实现输入框动画效果。
TextInputLayout 的作用
TextInputLayout 的作用是包装输入框视图，使它具备以下的效果：
- 最上方添加标签，标明输入框的用途
- 当 EditText 得到焦点时，输入框顶部的标签会上移，并变成顶部提示信息
- 当 EditText 失去焦点后，如果用户没有输入任何内容，顶部提示信息显示在输入框顶部，提醒用户输入内容
- 如果用户输入了内容，顶部提示信息不可见，直到用户删除所有内容，提示信息重新出现
示例代码
以下是一个 TextInputLayout 实现输入框动画效果的示例代码：
-- -------------------- ---- -------
------------------------------------------------------
--------------------------------------------------------------------
-----------------------------------
------------------------------------
-------------------------------
---------------------
--------------------------------------------------------
--------------------------
-----------------------------------
--------------------------------------
--------------------------------------------------------其中，style 可以指定 TextInputLayout 的样式，我们在示例中选择了 OutlinedBox 样式，这个样式会在输入框外部绘制线框。hint 是标签和提示信息的文本内容。TextInputEditText 是实际的输入框视图。
此时运行代码，我们可以看到一个带有动画效果的输入框：
更多的配置选项
除了示例中的样式和 hint 属性，TextInputLayout 还提供了其他配置选项，可以让我们自定义输入框的外观和行为。这里列举一些：
前景和背景
除了 TextInputLayout 的样式之外，我们还可以为它指定前景和背景，从而让它符合我们的应用程序风格。例如：
-- -------------------- ---- -------
------------------------------------------------------
--------------------------------------------------------------------
-----------------------------------
------------------------------------
-------------------------------
--------------------
---------------------------------------------------
----------------------------------------------------
--------------------------------------------------------
--------------------------
-----------------------------------
--------------------------------------
--------------------------------------------------------其中，background 和 foreground 分别指定了输入框的背景和前景，我们可以选择一些 drawable 资源作为它们的值。
错误状态
在用户输入有误时，我们可能需要明显指示输入框存在问题，这时可以借助 TextInputLayout 的 setError 方法，让它在文本框下方显示一段错误提示文字：
TextInputLayout inputLayout = findViewById(R.id.text_input_layout);
inputLayout.setError("输入有误，请重新输入！");在用户纠正了错误之后，可以调用以下方法隐藏错误提示：
inputLayout.setError(null);
右侧图标
TextInputLayout 还支持在输入框的右侧添加一个图标，以便于用户识别它的用途。可以使用 setEndIcon 方法来实现：
-- -------------------- ---- -------
------------------------------------------------------
------------------------------------------------------------------
-----------------------------------
------------------------------------
-------------------------------
---------------------
--------------------------------------------------------
--------------------------
-----------------------------------
--------------------------------------
------------------------------------------------------
-----------------------------------
------------------------------------
----------------------------
------------------------------------------------
--------------------------------------------------------其中，endIconMode 属性指定了图标的类型，可以 choose from none, password_toggle, clear_text, and dropdown。
总结
TextInputLayout 是 Material Design 中一个非常实用的组件，它可以为我们的表单输入提供优美的动画效果，以及易于用户理解的提示。使用 TextInputLayout 还可以非常方便地处理输入框的错误状态和右侧图标等细节。因此，在开发 Android 和 Web 应用程序时，我们应该充分利用TextInputLayout 这一强大的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649cdaaf48841e989498aef5