Question

我有一张图片，如果用户点击了图片的不同部分，我想要执行不同的操作。

我是一个新的爱好者，所以我不理解我在研究中发现的一切。我找到了几个解决方案，但我不太明白如何实现任何

Mask the image and get the pixel color of that underneath image to know which area has been clicked
ImageMap

PS：

图像像桌子一样（如果有帮助的话）（绘制表格不是一个选项）
我已经看过其他几个解决方案，但我不理解它们，所以请不要标记为重复。我能理解这些答案背后的想法，但我无法实现它们。我不知道如何处理答案中提供的代码。

我成功制作了一些透明按钮并将它们放在图像上，但是当在不同屏幕上进行测试时，按钮会从相对位置移开。我很感激帮助按钮的东西，或解释一个不同的方式来做到这一点。

Answer 1

使用PercentRelativeLayout在图像上添加按钮层 https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

首先添加一个库：

dependencies {
    compile 'com.android.support:percent:25.3.1'
}

然后在你的布局文件中：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="200dp"
        android:background="@android:color/black" />

    <android.support.percent.PercentRelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="100dp"
        android:layout_height="200dp">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            app:layout_heightPercent="50%"
            app:layout_marginLeftPercent="25%"
            app:layout_marginTopPercent="25%"
            app:layout_widthPercent="50%" />
    </android.support.percent.PercentRelativeLayout>

</RelativeLayout>

此按钮位于图像的中心。如果您想放置在其他地方，您可以使用像素计算您的位置，并在预览中查看。按钮应该具有透明背景。

Answer 2

解决方案是为ImageView实现OnTouchListener（）

View.OnTouchListener文档：https://developer.android.com/reference/android/view/View.OnTouchListener.html

以下代码块可以帮助您完成工作：

    //Set onTouchListener for your imageView
    imageView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){ //Checking if clicked on the image

            //Get the touch position from the event
            float x = motionEvent.getX();
            float y = motionEvent.getY();

            //Divide it by image width/height to get relative ratio
            x = x / imageView.getWidth();
            y = y / imageView.getHeight();

            //Write a if-else as per your requirent
            //Here I divided the image in 4 (quandrants) and showing where it was clicked
            if(x <= 0.5 && y <= 0.5){
                Toast.makeText(StartActivity.this, "Upper Left Quadrant", Toast.LENGTH_SHORT).show();
            }
            else if(x < 0.5 && y > 0.5){
                Toast.makeText(StartActivity.this, "Lower Left Quadrant", Toast.LENGTH_SHORT).show();
            }
            else if(x > 0.5 && y <= 0.5){
                Toast.makeText(StartActivity.this, "Upper Right Quadrant", Toast.LENGTH_SHORT).show();
            }
            else if(x > 0.5 && y > 0.5){
                Toast.makeText(StartActivity.this, "Lower Right Quadrant", Toast.LENGTH_SHORT).show();
            }

        }
        return false; //We have not handled the touch event
    }
});

在图像中创建多个可点击区域

2 个答案: