如何在 EditText 中轻松添加可清除文本的叉号按钮？

2024-03-16 19:38:13

在 EditText 中添加可清除文本的叉号按钮

前言

在现代应用程序开发中，用户体验至关重要。清晰直观的输入控件可以极大地增强用户与应用程序的交互。本文将指导你如何为你的 EditText 小部件添加一个可清除文本的叉号按钮，从而提升用户的便利性。

1. 添加可清除图标的 Drawable 资源

首先，我们需要创建一个 Drawable 资源文件，其中包含清除图标和一个矩形背景。这将作为我们叉号按钮的视觉表示。

<!-- drawable/edit_text_background.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle" />
    </item>
    <item android:id="@android:id/icon">
        <bitmap android:src="@drawable/ic_clear"
                android:gravity="center" />
    </item>
</layer-list>

确保将 @drawable/ic_clear 替换为你的清除图标资源。

2. 将 Drawable 设置为 EditText 背景

接下来，我们需要将这个 Drawable 设置为 EditText 的背景，以便在 EditText 获得焦点时显示清除图标。

<!-- activity_main.xml -->
<EditText
    android:id="@+id/edit_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/edit_text_background" />

将 @drawable/edit_text_background 替换为上面创建的 Drawable 资源文件的名称。

3. 监听焦点变化事件

为了在 EditText 获得焦点时显示清除图标，我们需要监听它的焦点变化事件。

val editText = findViewById<EditText>(R.id.edit_text)

editText.setOnFocusChangeListener { _, hasFocus ->
    if (hasFocus) {
        editText.setCompoundDrawablesWithIntrinsicBounds(null, null, drawable, null)
    } else {
        editText.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null)
    }
}

确保将 drawable 替换为前面创建的 Drawable 资源。

4. 处理叉号按钮的点击事件

最后，我们需要处理清除图标的点击事件，以清除 EditText 中的文本。

editText.setOnTouchListener { _, event ->
    if (event.action == MotionEvent.ACTION_UP) {
        if (event.rawX >= editText.right - editText.compoundDrawables[2].bounds.width()) {
            editText.text.clear()
        }
    }

    false
}