Android Studio Java中地图图片可点击区域多屏适配问题求助

方案1：ConstraintLayout百分比约束实现（无需自定义代码，适配现有布局） #

前置修改（先修正ImageView配置） #

首先给ImageView添加两个属性，保证图片按比例缩放时，ImageView边界和图片边界完全对齐，没有多余留白：

<ImageView
    android:id="@+id/FirstFloorMap"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:contentDescription="@string/first_floor"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/gui2" />

注意：要补全layout_constraintStart_toStartOf="parent"，否则宽度0dp无法正常适配父布局宽度。

Button适配修改 #

不要用固定dp作为宽高和margin，改用基于ImageView的百分比约束实现位置和大小的等比例缩放，步骤如下：

1. 拿到原始地图设计图的宽高数值（比如设计图宽为W、高为H）
2. 计算目标Button对应区域的占比：
   • 宽度占比 = 按钮设计宽度 / W
   • 高度占比 = 按钮设计高度 / H
   • 水平中心偏移占比 = （按钮设计左边缘坐标 + 按钮宽度/2）/ W
   • 垂直中心偏移占比 = （按钮设计上边缘坐标 + 按钮高度/2）/ H
3. 替换原有Button属性，示例代码如下：

<Button
    android:id="@+id/LateGothicHallBtn"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#00FFFFFF"
    app:layout_constraintTop_toTopOf="@+id/FirstFloorMap"
    app:layout_constraintBottom_toBottomOf="@+id/FirstFloorMap"
    app:layout_constraintStart_toStartOf="@+id/FirstFloorMap"
    app:layout_constraintEnd_toEndOf="@+id/FirstFloorMap"
    app:layout_constraintWidth_percent="0.1" <!-- 替换为你计算出的宽度占比 -->
    app:layout_constraintHeight_percent="0.2" <!-- 替换为你计算出的高度占比 -->
    app:layout_constraintHorizontal_bias="0.8" <!-- 替换为你计算出的水平中心偏移占比 -->
    app:layout_constraintVertical_bias="0.7" /> <!-- 替换为你计算出的垂直中心偏移占比 -->

该方案无需修改Java代码，原有点击监听逻辑完全可以复用。

方案2：自定义可点击区域ImageView（更适合多热点场景） #

如果可点击区域超过10个，写多个Button的布局维护成本过高，可以直接继承ImageView实现热点点击，无需叠加任何控件：

1. 定义房间热点数据类：

public class RoomHotspot {
    public String id;
    public String name;
    // 原始设计图中该房间的矩形坐标
    public float rawLeft;
    public float rawTop;
    public float rawRight;
    public float rawBottom;

    public RoomHotspot(String id, String name, float rawLeft, float rawTop, float rawRight, float rawBottom) {
        this.id = id;
        this.name = name;
        this.rawLeft = rawLeft;
        this.rawTop = rawTop;
        this.rawRight = rawRight;
        this.rawBottom = rawBottom;
    }
}

2. 自定义MapImageView类：

public class MapImageView extends AppCompatImageView {
    private List<RoomHotspot> hotspotList = new ArrayList<>();
    private float scale = 1f;
    private float offsetX = 0f;
    private float offsetY = 0f;
    private OnRoomClickListener listener;

    public interface OnRoomClickListener {
        void onRoomClick(RoomHotspot room);
    }

    // 构造方法自动生成即可
    public void setHotspotList(List<RoomHotspot> list) {
        this.hotspotList = list;
    }

    public void setOnRoomClickListener(OnRoomClickListener listener) {
        this.listener = listener;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 计算当前图片的缩放比例和偏移量
        Drawable drawable = getDrawable();
        if (drawable == null) return;
        int drawableW = drawable.getIntrinsicWidth();
        int drawableH = drawable.getIntrinsicHeight();
        scale = Math.min((float) w / drawableW, (float) h / drawableH);
        offsetX = (w - drawableW * scale) / 2f;
        offsetY = (h - drawableH * scale) / 2f;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP && listener != null) {
            // 把触摸坐标转换为原始设计图上的坐标
            float x = (event.getX() - offsetX) / scale;
            float y = (event.getY() - offsetY) / scale;
            for (RoomHotspot hotspot : hotspotList) {
                if (x >= hotspot.rawLeft && x <= hotspot.rawRight && y >= hotspot.rawTop && y <= hotspot.rawBottom) {
                    listener.onRoomClick(hotspot);
                    return true;
                }
            }
        }
        return super.onTouchEvent(event);
    }
}

3. 布局中替换原有ImageView：

<com.yourpackage.MapImageView
    android:id="@+id/FirstFloorMap"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:contentDescription="@string/first_floor"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/gui2" />

4. 代码中初始化使用：

MapImageView firstFloorMap = findViewById(R.id.FirstFloorMap);
// 添加所有房间热点数据
List<RoomHotspot> list = new ArrayList<>();
list.add(new RoomHotspot("LateGothicHall", "晚哥特厅", 200, 300, 250, 400)); // 替换为实际原始坐标
firstFloorMap.setHotspotList(list);
firstFloorMap.setOnRoomClickListener(room -> {
    // 处理房间点击逻辑
    Toast.makeText(this, "点击了" + room.name, Toast.LENGTH_SHORT).show();
});

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