在图像中制作多个可点击区域

Question

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

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

PS:

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

我已经成功制作了一些透明按钮并将它们放在图像上，但是在不同屏幕上测试时按钮会从它们的相对位置移动。我将不胜感激在按钮方面的帮助，或者解释一种不同的方法来做到这一点。

Answer 1

一个解决方案是对您的 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
    }
});

Answer 2

使用 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>

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

在图像中制作多个可点击区域

Make multiple clickacble areas in an image

android

android-layout

android-button

android-activity