在 Material Design 中，TextInputLayout 是一个常用的表单控件，它可以为 EditText 提供一个包含标签和提示信息的容器。在用户输入时，TextInputLayout 会自动调整标签位置，使用户能够更好地理解输入的内容。
然而，当用户已经输入了一些内容时，想要删除其中的一部分时，TextInputLayout 并没有提供一个删除按钮，这会给用户带来一些不便。因此，我们需要在 TextInputLayout 中添加一个自定义的删除按钮，以提高用户体验。
实现方法
要实现在 TextInputLayout 中添加一个自定义的删除按钮，我们需要做以下几个步骤：
- 在布局文件中添加一个 ImageView，作为删除按钮的图标。
- 在 Java 代码中为 ImageView 添加一个点击事件，以清空 EditText 中的内容。
- 在 Java 代码中为 EditText 添加一个 TextWatcher，以控制删除按钮的显示和隐藏。
步骤一：添加 ImageView
在 TextInputLayout 中添加一个 ImageView，可以使用以下代码：
-- -------------------- ---- ------- ------------------------------------------------------ ----------------------------------- ----------------------------------- ------------------------------------ -------------------- -------------------------------------------------------- --------------------------- ----------------------------------- -------------------------------------- ---------- ------------------------------- ----------------------------------- ------------------------------------ --------------------------------- --------------------------- --------------------------------------------------------展开代码
其中，ImageView 的 visibility 属性设置为 gone，表示一开始不显示。
步骤二：添加点击事件
在 Java 代码中为 ImageView 添加一个点击事件，可以使用以下代码：
ImageView deleteButton = findViewById(R.id.delete_button); deleteButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { EditText editText = findViewById(R.id.edit_text); editText.setText(""); } });
当用户点击删除按钮时，会清空 EditText 中的内容。
步骤三：添加 TextWatcher
在 Java 代码中为 EditText 添加一个 TextWatcher，可以使用以下代码：
-- -------------------- ---- ------- -------- -------- - ----------------------------- --------- ------------ - --------------------------------- ----------------------------------- ------------- - --------- ------ ---- ------------------------------ -- --- ------ --- ------ --- ------ - - --------- ------ ---- -------------------------- -- --- ------ --- ------- --- ------ - -- ----------- - -- - ----------------------------------------- - ---- - -------------------------------------- - - --------- ------ ---- ------------------------- -- - - ---展开代码
当用户输入内容时，TextWatcher 会监听 EditText 中的文本变化，根据文本长度来控制删除按钮的显示和隐藏。
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- ------------------------------------------------------ ----------------------------------- ----------------------------------- ------------------------------------ -------------------- -------------------------------------------------------- --------------------------- ----------------------------------- -------------------------------------- ---------- ------------------------------- ----------------------------------- ------------------------------------ --------------------------------- --------------------------- --------------------------------------------------------展开代码
-- -------------------- ---- ------- -------- -------- - ----------------------------- --------- ------------ - --------------------------------- ----------------------------------- ---------------------- - --------- ------ ---- ------------ -- - --------------------- - --- ----------------------------------- ------------- - --------- ------ ---- ------------------------------ -- --- ------ --- ------ --- ------ - - --------- ------ ---- -------------------------- -- --- ------ --- ------- --- ------ - -- ----------- - -- - ----------------------------------------- - ---- - -------------------------------------- - - --------- ------ ---- ------------------------- -- - - ---展开代码
总结
在 Material Design 中，为 TextInputLayout 添加一个自定义的删除按钮，可以提高用户体验。通过以上步骤，我们可以很容易地实现这一功能。需要注意的是，删除按钮的显示和隐藏需要根据 EditText 中的文本长度来控制，可以通过 TextWatcher 实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658173c1d2f5e1655dcad753
