Material Design 中 TextInputLayout 自定义删除按钮的实现方法-JavaScript中文网-JavaScript教程资源分享门户

在 Material Design 中，TextInputLayout 是一个常用的表单控件，它可以为 EditText 提供一个包含标签和提示信息的容器。在用户输入时，TextInputLayout 会自动调整标签位置，使用户能够更好地理解输入的内容。

然而，当用户已经输入了一些内容时，想要删除其中的一部分时，TextInputLayout 并没有提供一个删除按钮，这会给用户带来一些不便。因此，我们需要在 TextInputLayout 中添加一个自定义的删除按钮，以提高用户体验。

实现方法

要实现在 TextInputLayout 中添加一个自定义的删除按钮，我们需要做以下几个步骤：

在布局文件中添加一个 ImageView，作为删除按钮的图标。
在 Java 代码中为 ImageView 添加一个点击事件，以清空 EditText 中的内容。
在 Java 代码中为 EditText 添加一个 TextWatcher，以控制删除按钮的显示和隐藏。

步骤一：添加 ImageView

在 TextInputLayout 中添加一个 ImageView，可以使用以下代码：

// javascriptcn.com 代码示例
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="输入文本">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/delete_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_delete"
        android:visibility="gone"/>

</com.google.android.material.textfield.TextInputLayout>

其中，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，可以使用以下代码：

// javascriptcn.com 代码示例
EditText editText = findViewById(R.id.edit_text);
ImageView deleteButton = findViewById(R.id.delete_button);

editText.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        if (s.length() > 0) {
            deleteButton.setVisibility(View.VISIBLE);
        } else {
            deleteButton.setVisibility(View.GONE);
        }
    }

    @Override
    public void afterTextChanged(Editable s) {
    }
});

当用户输入内容时，TextWatcher 会监听 EditText 中的文本变化，根据文本长度来控制删除按钮的显示和隐藏。

示例代码

完整的示例代码如下：

// javascriptcn.com 代码示例
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="输入文本">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/delete_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_delete"
        android:visibility="gone"/>

</com.google.android.material.textfield.TextInputLayout>

// javascriptcn.com 代码示例
EditText editText = findViewById(R.id.edit_text);
ImageView deleteButton = findViewById(R.id.delete_button);

deleteButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        editText.setText("");
    }
});

editText.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        if (s.length() > 0) {
            deleteButton.setVisibility(View.VISIBLE);
        } else {
            deleteButton.setVisibility(View.GONE);
        }
    }

    @Override
    public void afterTextChanged(Editable s) {
    }
});

总结

在 Material Design 中，为 TextInputLayout 添加一个自定义的删除按钮，可以提高用户体验。通过以上步骤，我们可以很容易地实现这一功能。需要注意的是，删除按钮的显示和隐藏需要根据 EditText 中的文本长度来控制，可以通过 TextWatcher 实现。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658173c1d2f5e1655dcad753