在 Material Design 中，输入框是经常使用的界面元素之一。在不同的场景中，设计师们可能会需要不同的输入框类型。例如，有的场景要求输入框的上方要显示一个标题，有的则要求输入框下方显示一个提示信息。
为了满足这些不同的设计需求，Google 提供了一个 TextInputLayout 组件，它是一个能够包含 EditText 组件的容器，能够实现各种不同的输入框布局效果。
在本文中，我们将介绍如何使用 TextInputLayout 组件来实现不同类型的输入框布局效果。具体来说，我们将讨论以下两种效果：
- 顶部带有标题的输入框
- 底部带有提示信息的输入框
带标题的输入框
在 Material Design 中，带标题的输入框通常用于显示要求输入该输入框中内容的名称。例如，在一个表单中，输入姓名的输入框应该显示一个标题 “姓名”，以便用户知道他们应该在此输入他们的姓名。以下是如何使用 TextInputLayout 来实现此目的的示例代码：
-- -------------------- ---- ------- ------------------------------------------------------ ---------------------------------------- ----------------------------------- ------------------------------------ ------------------ -------------------------------------------------------- ------------------------------------------- ----------------------------------- ------------------------------------ ---------------------------------- -- --------------------------------------------------------展开代码
上面的代码演示了如何在 XML 布局文件中使用 TextInputLayout 和 EditText 来创建一个带标题的输入框。其中，TextInputLayout 是容器，EditText 是实际的输入框组件。
我们需要注意的是，在 TextInputLayout 中使用 EditText 的时候，我们需要将 EditText 的高度设置为 wrap_content。如果我们设置 EditText 的高度过高，TextInputLayout 将无法正确显示标题。
带提示信息的输入框
在某些场景中，例如当我们需要输入密码时，我们可能需要在输入框下方提供一个帮助信息，例如“密码须包含至少 8 个字符，并包含至少一个数字和一个特殊字符”。以下是如何使用 TextInputLayout 来实现此目的的示例代码：
-- -------------------- ---- ------- ------------------------------------------------------ -------------------------------------------- ----------------------------------- ------------------------------------ ------------------ -------------------------------------------------------- ----------------------------------------------- ----------------------------------- ------------------------------------ -------------------------------- -- --------- ----------------------------------------- ----------------------------------- ------------------------------------ --------------------- - --------------------- -------------------------------------- ----------------------- -- --------------------------------------------------------展开代码
与前面的示例类似，上面的代码演示了如何在 XML 布局文件中使用 TextInputLayout 和 EditText 来创建一个带提示信息的输入框。我们通过在 TextInputLayout 中将 TextView 组件添加到 EditText 下方，来显示提示信息。
需要注意的是，我们需要将提示信息组件的高度设置为 wrap_content，以确保它不会影响其他组件的布局。
总结
在本文中，我们学习了如何使用 TextInputLayout 组件来实现不同类型的输入框布局效果。通过使用这个灵活的组件，我们可以轻松地创建带标题和提示信息的输入框。
TextInputLayout 的使用还有其他高级特性，例如设置错误提示信息，以及设置输入框背景样式。我们鼓励读者继续学习这个部件，并且探索其更多的用例。
示例代码分类于 Kotlin 和 XML 如下：
-- -------------------- ---- ------- -- -- ------ ---------------------------------------------- -- -- --------------- ----------------- ----- ------------ - ------------------- - -------- --- ---------------------------- -------- - ---------------------------------- -------------------------------------- -- ------------ --- -------------------- --------------- - ----------------------------------------- --- ---------------------- ----------------- - -------------------------------------------- -- -------------- --- ------------------------ --------------- - --------------------------------------------- --- -------------------------- ----------------- - ------------------------------------------------ --- --------------------- -------- - ------------------------------------------ -- ----- -------- -- --------------- -- ---------------------------- - --------------------- -- ------- -------- -- --------------- -- -------------------------------- - ------------------------- -- - --------------- -------- ---------------------------------- - -------- - --------------------- -- - --------------- -------- ----------------------------- - --------- -------------------------------------- - ---- -- -- --------------- ------- -- --------------------------------------------------------- - -- - ----------------------------- - ----------- -------------------------------------- - ---- - ---- - -------------------------------------- - ----- - - -展开代码
-- -------------------- ---- ------- ---- ---- -------- -- --- ------ --- ------------------------------------------------------ ---------------------------------------- ----------------------------------- ------------------------------------ ------------------ -------------------------------------------------------- ------------------------------------------- ----------------------------------- ------------------------------------ ---------------------------------- -- -------------------------------------------------------- ---- ------ -------- -- --- ------ --- ------------------------------------------------------ -------------------------------------------- ----------------------------------- ------------------------------------ ------------------ -------------------------------------------------------- ----------------------------------------------- ----------------------------------- ------------------------------------ -------------------------------- -- --------- ----------------------------------------- ----------------------------------- ------------------------------------ --------------------- - --------------------- -------------------------------------- ----------------------- -- --------------------------------------------------------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cfa036b5eee0b5256d585a
