两个 ImageView 放置在同一位置，重叠，我如何检测正在单击哪个 imageview？

Question

我将图像的 2 个部分放在一个位置相互重叠，如何检测当前正在单击哪个 imageView？为了更好地理解，请参阅下面的代码。

MainActivity.java

public class MainActivity extends Activity implements View.OnClickListener {

    ImageView image1, image2;

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

        image1 = (ImageView) findViewById(R.id.image1);
        image2 = (ImageView) findViewById(R.id.image2);

        image1.setOnClickListener(this);
        image2.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // Some function to detect which ImageView is being clicked
    }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent">

    <ImageView
        android:id="@id+/image1"
        android:src="@drawable/piece1"
        android:background="@null"
        />

    <ImageView
        android:id="@id+/image2"
        android:src="@drawable/piece2"
        android:background="@null"
        />

</RelativeLayout>

这是第一块

这是第二部分

这是显示在应用程序中的图像，piece1 和piece2 在同一位置。

现在，我如何设置一个能够区分用户是点击 image1 还是 image2 的函数？由于 ImageViews 重叠，onClick 事件将始终检测到 image2。如何分别检测它们，以便每个图像具有不同的运行功能。谢谢。

Answer 1

将两张图片都包裹在FrameLayout中。

 <FrameLayout android:id="@+id/image_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/piece1"/>

    <ImageView android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/piece2"/>
</FrameLayout>

在您的活动中，我们不会监听图像的点击，而是监听父容器上的触摸事件

public class MainActivity extends AppCompatActivity implements View.OnTouchListener {    

    // A reference to the FrameLayout holding the images
    private FrameLayout mImageContainer;

    // A GestureDetector for analysing the touch events
    private GestureDetectorCompat mDetector;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ..

        TapListener tapListener = new TapListener();
        mDetector = new GestureDetectorCompat(this, tapListener);

        // Listen for touches
        mImageContainer = (FrameLayout) findViewById(R.id.image_container);
        mImageContainer.setOnTouchListener(this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // If the touch event is inside our image container,
        // we pass it to our GestureDetector
        if (v == mImageContainer) {
            mDetector.onTouchEvent(event);

            // Return true to notify the system
            // that we want to handle any consecutive events.
            return true;
        }

        // Let the system handle events outside the touch overlay
        return super.onTouchEvent(event);
    }
}

这就是魔法发生的地方

private class TapListener extends GestureDetector.SimpleOnGestureListener {
    @Override
    public boolean onDown(MotionEvent e) {
        return true;
    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        float touchX = e.getX();
        float touchY = e.getY();

        // |------------------|
        // |Point1     Point3 |
        // |                  |
        // |                  |
        // |           Point2 |
        // |------------------|

        // Create a triangle path "around" the upper image
        Path upperImageOutline = new Path();
        // First point in our path is top left
        upperImageOutline.moveTo(0, 0);
        // Create a line to point 2, which is located bottom right
        upperImageOutline.lineTo(mImageContainer.getWidth(), mImageContainer.getHeight());
        // A new line from point 2 to point 3 at the top right
        upperImageOutline.lineTo(mImageContainer.getWidth(), 0);
        // Close the path, with automatically creates a line from point 3 to point 1
        upperImageOutline.close();

        // Compute the bounds of the new path
        RectF outlineBounds = new RectF();
        upperImageOutline.computeBounds(outlineBounds, true);

        // Create a Region from the path
        Region upperImageRegion = new Region();
        upperImageRegion.setPath(upperImageOutline, 
            new Region((int) outlineBounds.left, (int) outlineBounds.top, 
                (int) outlineBounds.right, (int) outlineBounds.bottom));

        // If the region contains the touch event coordinates, 
        // we know the users touched the upper image
        if(upperImageRegion.contains((int) touchX, (int) touchY)) {
            Log.d(TAG, "Touched upper image");
        } else {
            Log.d(TAG, "Touched lower image");
        }
        return true;
    }
}

这是解决问题的一种方法。如果您要在应用程序中的多个位置执行此操作，我建议您创建一个包含所有逻辑的 compound view。

Answer 2

试试这个；）

public class MainActivity extends Activity implements View.OnClickListener {

ImageView image1, image2;

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

    image1 = (ImageView) findViewById(R.id.image1);
    image2 = (ImageView) findViewById(R.id.image2);

    image1.setOnClickListener(this);
    image2.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    switch(v.getId()){

  case R.id.image1: 

      /** Start Action image1 */

    break;

  case R.id.image2: 

     /** Start Action image2 */

    break;
}
}
 }

Answer 3

试试这个

设置监听器

image1.setOnTouchListener(this;

onTouch 方法

@Override
public boolean onTouchEvent(MotionEvent event) {
    //mGestureDetector.onTouchEvent(event);

    int action = event.getActionMasked();
    switch (action) {

        case MotionEvent.ACTION_DOWN:
            image1.setAlpha(128);
            image1
            break;
        case MotionEvent.ACTION_UP:
            image1.setAlpha(255);
            break;

    }

    return super.onTouchEvent(event);
}