如果给你一张这样的图片,要求你点击到黑色圆圈时改变点击的圆圈颜色(选中状态)
设计UI会给一套选中图,尺寸一致,只有选中的圆圈不同
直观的实现方案,使用三个透明View,固定在三个圆圈上方位置,点击时设置点击选中的状态
弊端就是如果圆圈多了,需要固定多个View,并且如果圆圈位置发生了改变,每个固定在圆圈上方的View都要跟着修改
优化方案实现
通过 getPixel api拿到 Bitmap 的像素信息,在通过颜色值判断,你点击的区域是否为选中区域,如果只是改变颜色,比较简单,都不用选中的状态图片,直接修改图片的rgb就能实现
这里做个demo,点击时判断区域,如果是圆圈位置,就弹个toast
mBinding.ivImg.setOnTouchListener { _, event -> if (event.action == MotionEvent.ACTION_DOWN) { click(event.x.toInt(), event.y.toInt()) } true } private fun click(x: Int, y: Int) { resources.getDrawable(R.drawable.ic_test_click_bg, requireContext().theme)?.toBitmap()?.let { checkClick(it, x, y) { Toast.makeText(requireContext(), "click", Toast.LENGTH_SHORT).show() } } } private inline fun checkClick(it: Bitmap, x: Int, y: Int, clickBack: () -> Unit) { val pixel = it.getPixel(x, y) Log.d("click", "x $x y $y,pixel $pixel") if (pixel != 0) { clickBack.invoke() } }