[移动开发]Android图片切片热点区域点击

概述

Web的图片热点区域点击有时在Android某些界面也需要，可目前还没发现有好的控件可以实现这个功能，能想到的有两个方案：
一个是图片当背景，然后画透明控件，然后通过布局控制来放到相应的位置上然后绑定控件的点击监听事件。有个问题就是有时位置会跑掉。
另一个方案就是图片切片，然后组合，只要给需要的切片图片绑定点击监听事件即可。这种方案可行性较高。
以下是按第二种方案的实例

ImageView

根据图片的具体尺寸来调整控件的大小，不然控件太大只会拉伸图片而无法很好的组合在一起

通过设置 adjustViewBounds 来使控件大小信图片尺寸缩放，但要将自适应的宽或高设置成 wrap_content

然后通过 fitXY 缩放使图片填充整个控件

android:adjustViewBounds="true"
android:scaleType="fitXY"

链式布局

通过ConstraintLayout控件链来达到图片的组合

图片组合后无法根据图片的宽度自动分布权重，这个需要手动计算权重然后进行每一切片的设置

app:layout_constraintHorizontal_weight="0.255"

计算方法：

• 先加总所有图片的像素宽度
• 用每一图片的像素宽度去除总宽度
• 用结果的小数值来当作权重，尽量多取几位小数以尽可能完善适配

完整代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WelcomeActivity">

    <ImageView
        android:id="@+id/wel_bg_01"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg_01"
        app:layout_constraintBottom_toTopOf="@+id/wel_bg_02"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/wel_bg_02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg_02"
        app:layout_constraintHorizontal_weight="0.255"
        app:layout_constraintEnd_toStartOf="@+id/wel_bg_03"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/wel_bg_01" />

    <ImageView
        android:id="@+id/wel_bg_03"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg_03"
        app:layout_constraintHorizontal_weight="0.13"
        app:layout_constraintEnd_toStartOf="@+id/wel_bg_04"
        app:layout_constraintStart_toEndOf="@+id/wel_bg_02"
        app:layout_constraintTop_toBottomOf="@+id/wel_bg_01" />

    <ImageView
        android:id="@+id/wel_bg_04"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg_04"
        app:layout_constraintHorizontal_weight="0.136"
        app:layout_constraintEnd_toStartOf="@+id/wel_bg_05"
        app:layout_constraintStart_toEndOf="@+id/wel_bg_03"
        app:layout_constraintTop_toBottomOf="@+id/wel_bg_01" />

    <ImageView
        android:id="@+id/wel_bg_05"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg_05"
        app:layout_constraintHorizontal_weight="0.133"
        app:layout_constraintEnd_toStartOf="@+id/wel_bg_06"
        app:layout_constraintStart_toEndOf="@+id/wel_bg_04"
        app:layout_constraintTop_toBottomOf="@+id/wel_bg_01" />

    <ImageView
        android:id="@+id/wel_bg_06"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg_06"
        app:layout_constraintHorizontal_weight="0.345"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/wel_bg_05"
        app:layout_constraintTop_toBottomOf="@+id/wel_bg_01" />

    <ImageView
        android:id="@+id/wel_bg_07"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/bg_07"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/wel_bg_02" />

</androidx.constraintlayout.widget.ConstraintLayout>