如何实现点击FloatingActionButton打开TextView及带删除功能的输入文本框

Hey there! Let's walk through implementing these two Android features one by one. I'll use Kotlin for examples since it's standard for modern Android development, but I'll toss in Java snippets where relevant too.

1. 点击FloatingActionButton切换TextView的显示/隐藏 #

I assume you want to show a previously hidden TextView when the FAB is tapped (since "open TextView" usually means making it visible). Here's how to do it:

Step 1: Layout Setup (activity_main.xml) #

First, define your FAB and TextView in the layout. Set the TextView to be hidden initially with android:visibility="gone":

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- Hidden TextView (will show on FAB tap) -->
    <TextView
        android:id="@+id/displayTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is the text you want to show!"
        android:visibility="gone"
        android:padding="12dp"
        android:background="#f5f5f5"/>

    <!-- Floating Action Button -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/mainFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@drawable/ic_add"/>
</LinearLayout>

Step 2: Add Click Logic (MainActivity.kt) #

In your activity, set up a click listener for the FAB to toggle the TextView's visibility:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.floatingactionbutton.FloatingActionButton
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val fab = findViewById<FloatingActionButton>(R.id.mainFab)
        val displayTextView = findViewById<TextView>(R.id.displayTextView)

        fab.setOnClickListener {
            // Toggle visibility: show if hidden, hide if visible
            displayTextView.visibility = if (displayTextView.visibility == android.view.View.GONE) {
                android.view.View.VISIBLE
            } else {
                android.view.View.GONE
            }
        }
    }
}

Java Version Snippet

If you're using Java, the logic is identical—just adjust the syntax:

fab.setOnClickListener(v -> {
    if (displayTextView.getVisibility() == View.GONE) {
        displayTextView.setVisibility(View.VISIBLE);
    } else {
        displayTextView.setVisibility(View.GONE);
    }
});

2. 点击FAB弹出带清除按钮的输入框 #

For this, we'll create a custom dialog with an EditText and a clear button (or use an EditText with a built-in clear icon for a cleaner approach). Let's cover both options:

Option 1: Custom Dialog with Separate Clear Button #

Step 1: Create Dialog Layout (dialog_search_input.xml)

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:gravity="center_vertical">

    <EditText
        android:id="@+id/searchInput"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Enter word to search"
        android:inputType="text"/>

    <ImageView
        android:id="@+id/clearBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_clear"
        android:layout_marginStart="8dp"
        android:clickable="true"
        android:focusable="true"/>
</LinearLayout>

Step 2: Implement Dialog Logic (MainActivity.kt)

Replace the FAB click listener with this code to launch the dialog:

fab.setOnClickListener {
    val dialogView = layoutInflater.inflate(R.layout.dialog_search_input, null)
    val searchInput = dialogView.findViewById<android.widget.EditText>(R.id.searchInput)
    val clearBtn = dialogView.findViewById<android.widget.ImageView>(R.id.clearBtn)

    // Clear input when X is tapped
    clearBtn.setOnClickListener {
        searchInput.setText("")
    }

    // Build and show the dialog
    val searchDialog = androidx.appcompat.app.AlertDialog.Builder(this)
        .setTitle("Search for a Word")
        .setView(dialogView)
        .setPositiveButton("Search") { dialog, _ ->
            val inputText = searchInput.text.toString().trim()
            // Handle the search logic here (e.g., query a database or API)
            if (inputText.isNotEmpty()) {
                android.widget.Toast.makeText(this, "Searching for: $inputText", android.widget.Toast.LENGTH_SHORT).show()
            }
            dialog.dismiss()
        }
        .setNegativeButton("Cancel") { dialog, _ ->
            dialog.dismiss()
        }
        .create()

    searchDialog.show()
}

Option 2: EditText with Built-in Clear Icon (No Extra Button) #

If you prefer a more compact design, you can add the clear icon directly to the EditText:

// Inside the dialog setup (replace the separate ImageView approach)
searchInput.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_clear, 0)
searchInput.setOnTouchListener { v, event ->
    val drawableRight = 2 // Index of the right drawable
    if (event.action == android.view.MotionEvent.ACTION_UP) {
        if (event.rawX >= (searchInput.right - searchInput.compoundDrawables[drawableRight].bounds.width())) {
            searchInput.setText("")
            return@setOnTouchListener true
        }
    }
    return@setOnTouchListener false
}

This way, users can tap the X icon directly inside the EditText to clear their input.

内容的提问来源于stack exchange，提问作者Will