Android开发：实现手指抬起时选中LinearLayout内最近Button的功能

Got it, this is a classic interaction pattern for input UIs (like calculators or custom keyboards) and totally doable with a little touch event handling. Let's break this down into actionable steps:

Instead of listening to touch events on individual Buttons, we'll attach a touch listener to the parent LinearLayout. Here's why:

• Fingers might move outside Button bounds while dragging
• We need to continuously check which Button is closest to the finger as it moves
• On finger lift, trigger the closest Button's click action

We'll track two key things:

• The currently highlighted Button
• The distance between the finger and each Button's center to find the closest one

2.1 Create a Button State Selector #

First, make a drawable file (res/drawable/button_highlight_selector.xml) to define the default and highlighted states. We'll use the selected state for our drag-highlight (it's more flexible than the built-in pressed state for this use case):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/button_highlight" android:state_selected="true"/>
    <item android:drawable="@color/button_default"/>
</selector>

Add the corresponding colors to res/values/colors.xml:

<color name="button_default">#E0E0E0</color>
<color name="button_highlight">#FFC107</color>

2.2 Layout File (activity_main.xml) #

Set up your LinearLayout with Buttons, using the selector as the background:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:padding="16dp">

    <Button
        android:id="@+id/btn1"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="1"
        android:background="@drawable/button_highlight_selector"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="2"
        android:background="@drawable/button_highlight_selector"
        android:textSize="24sp"
        android:layout_marginHorizontal="8dp"/>

    <!-- Add as many Buttons as you need here -->

</LinearLayout>

2.3 Touch Handling in Activity #

We'll cover both Kotlin and Java implementations—pick whichever fits your project:

Kotlin Implementation #

import android.os.Bundle
import android.view.MotionEvent
import android.widget.Button
import android.widget.LinearLayout
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private var currentSelectedButton: Button? = null

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

        val buttonContainer = findViewById<LinearLayout>(R.id.button_container)
        buttonContainer.setOnTouchListener { _, event ->
            handleTouchEvent(event, buttonContainer)
            true // Consume the touch event to prevent conflicts
        }

        // Set your normal click actions for each Button
        findViewById<Button>(R.id.btn1).setOnClickListener { /* Handle button 1 click */ }
        findViewById<Button>(R.id.btn2).setOnClickListener { /* Handle button 2 click */ }
    }

    private fun handleTouchEvent(event: MotionEvent, container: LinearLayout) {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                // Find the Button initially touched
                val touchedButton = findButtonAtPosition(event.x, event.y, container)
                updateSelectedButton(touchedButton)
            }
            MotionEvent.ACTION_MOVE -> {
                // Continuously find the closest Button to the moving finger
                val closestButton = findClosestButton(event.x, event.y, container)
                updateSelectedButton(closestButton)
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                // Trigger the click action and reset the highlight
                currentSelectedButton?.performClick()
                updateSelectedButton(null)
            }
        }
    }

    // Check if a Button exists at the exact touch position
    private fun findButtonAtPosition(x: Float, y: Float, container: LinearLayout): Button? {
        for (i in 0 until container.childCount) {
            val child = container.getChildAt(i)
            if (child is Button) {
                val hitRect = child.getHitRect(null)
                hitRect.offset(child.left, child.top)
                if (hitRect.contains(x.toInt(), y.toInt())) {
                    return child
                }
            }
        }
        return null
    }

    // Calculate which Button is closest to the touch position
    private fun findClosestButton(x: Float, y: Float, container: LinearLayout): Button? {
        var closestButton: Button? = null
        var minDistanceSquared = Float.MAX_VALUE

        for (i in 0 until container.childCount) {
            val child = container.getChildAt(i)
            if (child is Button) {
                // Get the center coordinates of the Button (relative to the container)
                val btnCenterX = child.left + child.width / 2f
                val btnCenterY = child.top + child.height / 2f

                // Use squared distance to avoid expensive square root operations
                val distanceSquared = (x - btnCenterX) * (x - btnCenterX) + (y - btnCenterY) * (y - btnCenterY)

                if (distanceSquared < minDistanceSquared) {
                    minDistanceSquared = distanceSquared
                    closestButton = child
                }
            }
        }
        return closestButton
    }

    // Update the highlighted Button state
    private fun updateSelectedButton(newButton: Button?) {
        currentSelectedButton?.isSelected = false
        currentSelectedButton = newButton
        currentSelectedButton?.isSelected = true
    }
}

Java Implementation #

import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.Button;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private Button currentSelectedButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout buttonContainer = findViewById(R.id.button_container);
        buttonContainer.setOnTouchListener((v, event) -> {
            handleTouchEvent(event, buttonContainer);
            return true;
        });

        // Set your normal click actions for each Button
        findViewById(R.id.btn1).setOnClickListener(v -> /* Handle button 1 click */);
        findViewById(R.id.btn2).setOnClickListener(v -> /* Handle button 2 click */);
    }

    private void handleTouchEvent(MotionEvent event, LinearLayout container) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                Button touchedButton = findButtonAtPosition(event.getX(), event.getY(), container);
                updateSelectedButton(touchedButton);
                break;
            case MotionEvent.ACTION_MOVE:
                Button closestButton = findClosestButton(event.getX(), event.getY(), container);
                updateSelectedButton(closestButton);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                if (currentSelectedButton != null) {
                    currentSelectedButton.performClick();
                }
                updateSelectedButton(null);
                break;
        }
    }

    private Button findButtonAtPosition(float x, float y, LinearLayout container) {
        for (int i = 0; i < container.getChildCount(); i++) {
            if (container.getChildAt(i) instanceof Button) {
                Button btn = (Button) container.getChildAt(i);
                if (x >= btn.getLeft() && x <= btn.getRight() && y >= btn.getTop() && y <= btn.getBottom()) {
                    return btn;
                }
            }
        }
        return null;
    }

    private Button findClosestButton(float x, float y, LinearLayout container) {
        Button closestButton = null;
        float minDistanceSquared = Float.MAX_VALUE;

        for (int i = 0; i < container.getChildCount(); i++) {
            if (container.getChildAt(i) instanceof Button) {
                Button btn = (Button) container.getChildAt(i);
                float btnCenterX = btn.getLeft() + btn.getWidth() / 2f;
                float btnCenterY = btn.getTop() + btn.getHeight() / 2f;

                float distanceSquared = (x - btnCenterX) * (x - btnCenterX) + (y - btnCenterY) * (y - btnCenterY);

                if (distanceSquared < minDistanceSquared) {
                    minDistanceSquared = distanceSquared;
                    closestButton = btn;
                }
            }
        }
        return closestButton;
    }

    private void updateSelectedButton(Button newButton) {
        if (currentSelectedButton != null) {
            currentSelectedButton.setSelected(false);
        }
        currentSelectedButton = newButton;
        if (currentSelectedButton != null) {
            currentSelectedButton.setSelected(true);
        }
    }
}

• Performance: Using squared distance instead of actual distance avoids costly square root calculations, keeping the drag interaction smooth.
• State Clarity: The selected state is perfect here because it's a persistent state we can control programmatically, unlike pressed which only triggers when the finger is directly on the view.
• Backward Compatibility: This works on all Android versions (no fancy Jetpack libraries required).
• Fallback Behavior: If the finger lifts outside all Buttons, nothing happens—you can adjust the logic to trigger the last selected Button if needed.

内容的提问来源于stack exchange，提问作者A V L