Android：如何实现ImageView中多个箭头区域的可点击功能

方案1：解析VectorDrawable的Path进行点击区域检测 #

如果你的VectorDrawable中每个箭头都是独立的<path>标签（带不同android:fillColor），可以通过解析这些Path来判断触摸点是否落在对应箭头区域：

• 步骤1：从VectorDrawable中提取每个箭头的Path数据。比如原VectorDrawable文件里每个箭头的<path>标签会带有android:pathData属性，把这些数据单独整理出来，同时绑定对应的点击操作。
• 步骤2：在自定义ImageView的onTouchEvent中，将触摸坐标转换为Drawable的本地坐标（消除ImageView的padding、缩放等影响）。
• 步骤3：把每个PathData转换为Path对象，根据ImageView的缩放比例调整Path的矩阵，用Path.contains(x, y)判断触摸点是否在当前Path内，匹配到后执行对应操作。

示例代码片段：

class ClickableArrowImageView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {

    private val arrowPaths = mutableListOf<Pair<Path, () -> Unit>>()

    init {
        val drawable = drawable as? VectorDrawableCompat ?: return
        
        // 示例：手动提取并绑定箭头的Path与操作（实际可从VectorDrawable中解析所有path）
        val arrow1PathData = "M10,20 L30,40 L10,60 Z"
        val arrow1Path = Path().apply {
            PathParser.createPathFromPathData(arrow1PathData).let(this::set)
        }
        arrowPaths.add(arrow1Path to { /* 箭头1的点击操作逻辑 */ })

        val arrow2PathData = "M50,20 L70,40 L50,60 Z"
        val arrow2Path = Path().apply {
            PathParser.createPathFromPathData(arrow2PathData).let(this::set)
        }
        arrowPaths.add(arrow2Path to { /* 箭头2的点击操作逻辑 */ })
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        if (event.action == MotionEvent.ACTION_UP) {
            val drawableRect = bounds
            // 转换触摸点到Drawable本地坐标
            val x = event.x - paddingLeft - drawableRect.left
            val y = event.y - paddingTop - drawableRect.top
            // 计算Drawable的缩放比例
            val scaleX = drawableRect.width().toFloat() / drawable.intrinsicWidth
            val scaleY = drawableRect.height().toFloat() / drawable.intrinsicHeight

            val transformMatrix = Matrix().apply { setScale(scaleX, scaleY) }

            arrowPaths.forEach { (path, action) ->
                val transformedPath = Path(path).apply { transform(transformMatrix) }
                if (transformedPath.contains(x, y)) {
                    action.invoke()
                    return true
                }
            }
        }
        return super.onTouchEvent(event)
    }
}

方案2：拆分VectorDrawable为多个独立Drawable，用布局叠加 #

如果箭头之间没有重叠区域，这是最简单的实现方式：

• 步骤1：用SVG编辑工具（如Figma、Inkscape）把原SVG拆成单个箭头的独立SVG文件。
• 步骤2：将每个单独的SVG转为VectorDrawable。
• 步骤3：用ConstraintLayout或RelativeLayout将多个ImageView精准叠放，每个ImageView对应一个箭头，单独设置点击事件。

示例布局：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <!-- 底图：显示完整组合效果 -->
    <ImageView
        android:id="@+id/full_arrows"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/full_arrows_vector"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <!-- 箭头1的可点击区域 -->
    <ImageView
        android:id="@+id/arrow1"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:src="@drawable/arrow1_vector"
        android:background="@android:color/transparent"
        android:clickable="true"
        app:layout_constraintStart_toStartOf="@id/full_arrows"
        app:layout_constraintTop_toTopOf="@id/full_arrows"
        app:layout_constraintMarginStart="10dp"
        app:layout_constraintMarginTop="20dp"/>

    <!-- 箭头2的可点击区域 -->
    <ImageView
        android:id="@+id/arrow2"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:src="@drawable/arrow2_vector"
        android:background="@android:color/transparent"
        android:clickable="true"
        app:layout_constraintStart_toStartOf="@id/full_arrows"
        app:layout_constraintTop_toTopOf="@id/full_arrows"
        app:layout_constraintMarginStart="70dp"
        app:layout_constraintMarginTop="20dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

后续只需在代码中给每个箭头ImageView设置setOnClickListener即可，无需复杂的坐标计算，适配性强。

方案3：自定义View绘制并处理点击 #

直接继承View，手动绘制所有箭头并处理点击，适合箭头有重叠或需动态调整样式的场景：

• 步骤1：定义每个箭头的PathData、填充色和对应点击操作。
• 步骤2：在onSizeChanged中根据View的尺寸计算Path的缩放矩阵。
• 步骤3：在onDraw中绘制所有箭头；在onTouchEvent中判断触摸点是否落在目标Path内，执行对应操作。

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