TextInputLayout 是一个 Material Design 风格的输入框控件，它可以帮助开发者实现输入框标签、可编辑区域和图标等元素的组合，提供一个完整且美观的输入框界面。其中，输入框右侧的图标也是一个非常重要的元素。
本文将介绍如何使用 TextInputLayout 实现右侧图标，并提供相应的示例代码，帮助开发者更快速、更准确地了解和使用该控件。
如何实现？
TextInputLayout 默认支持在 EditText 右侧添加图标，只需要设置相应的 drawableRight 即可，示例代码如下：
-- -------------------- ---- -------
------------------------------------------------------
--------------------------------------------
-----------------------------------
------------------------------------
------------------------------------
-----------------------------------------
-------------------------
--------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
------------------------ --
--------------------------------------------------------// 添加右侧图标 val usernameTextInputLayout = findViewById<TextInputLayout>(R.id.username_text_input_layout) val drawable = ContextCompat.getDrawable(this, R.drawable.ic_username) usernameTextInputLayout.endIconDrawable = drawable
关键代码是 endIconDrawable，它通过 Drawable 对象设置了右侧图标。
当然，TextInputLayout 还支持更多的右侧图标类型，如 clear、password_toggle、dropdown_menu 等，只需要将 endIconMode 设置为相应的值即可。
// 清除图标 usernameTextInputLayout.endIconMode = TextInputLayout.END_ICON_CLEAR_TEXT // 密码可见/隐藏图标 usernameTextInputLayout.endIconMode = TextInputLayout.END_ICON_PASSWORD_TOGGLE // 下拉菜单图标 usernameTextInputLayout.endIconMode = TextInputLayout.END_ICON_DROPDOWN_MENU
深入理解
在实际开发中，可能需要自定义一个右侧图标，或者对默认的右侧图标进行一些定制。那么在了解了默认实现之后，我们就可以探讨一下这些自定义需求如何实现。
自定义图标
如果需要自定义一个右侧图标，只需要创建一个 Drawable 对象，然后将其设置给 endIconDrawable 即可。示例代码如下：
-- -------------------- ---- -------
-- -----
--- -------------- - ------------------------------- ---------------------
--------------------------------------- - --------------
-- -----------
--------------------- -
------------ -- --- ---
------------------ - -
-改变图标位置
默认情况下，TextInputLayout 的右侧图标是放在 EditText 内容的右侧的，如果需要将其放在 EditText 外部，则可以使用 setEndIconOnClickListener 方法进行实现。示例代码如下：
// 将图标放在 EditText 外部
usernameTextInputLayout.setEndIconOnClickListener {
// TODO: 处理点击事件
}在此基础上，我们可以对代码进行进一步封装，实现一些更加个性化的需求。例如，如果需要实现一个可以拖动的图标，则可以使用 OnTouchListener 方法对图标进行监听，然后根据手势的移动来实现图标位置的拖动。
-- -------------------- ---- -------
-- ----
---------------------------------- - -- ----- --
---- -------------- -
----------------------- -- -
-- ------
- - ---------- - ----------------------------- - --
- - ---------- - ------------------------------ - --
----
-
----------------------- -- -
-- ----------
-------------------------
----------- - - - ----------------------------- - -----------
----------- - - - ------------------------------ - -----------
----------- - - - ----------------------------- - -----------
----------- - - - ------------------------------ - ----------
-
-- ----
------------------------------------
----
-
---- -- -----
-
-总结
在本文中，我们针对 TextInputLayout 的右侧图标进行了详细介绍，并提供了相应的示例代码，帮助开发者更好地了解和运用该控件。
虽然 TextInputLayout 简单易用，但是要实现更加个性化的需求还是需要一些技巧和细节的注意。希望本文可以对大家有所帮助，同时也欢迎大家在使用过程中有任何问题和意见与我们交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ef02cdf6b2d6eab3902b17