前言

先看UI设计图

理论上应该自定义一个圆环View，但看到UI设计师已经将彩虹🌈圆环的图片切出来了，我陷入了沉思

我直接从图片上取色不就好了？

说干就干

准备素材：

1. 彩虹圆环png图片；

将圆环素材放进mipmap文件夹或drawable文件夹都可以；

编写布局

也就是装了两个ImageView，如果你不需要中间的圆形选中颜色显示，也可以只装一个ImageView

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

    <!-- 这个是彩虹圆环ImageView，必要 -->
    <ImageView
        android:id="@+id/img_color_picker"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/bg_color_picker" />
        
    <!-- 这个是选中颜色显示的圆形ImageView，非必要 -->
    <ImageView
        android:id="@+id/img_color_center"
        android:layout_width="40dp"
        android:layout_height="40dp"
        app:layout_constraintBottom_toBottomOf="@+id/img_color_picker"
        app:layout_constraintEnd_toEndOf="@+id/img_color_picker"
        app:layout_constraintStart_toStartOf="@+id/img_color_picker"
        app:layout_constraintTop_toTopOf="@+id/img_color_picker"
        app:srcCompat="@drawable/bg_color_center" />
</androidx.constraintlayout.widget.ConstraintLayout>

编写逻辑

1. 先声明一个bitmap矢量

/** 取色圆环的矢量 */
private var colorPickerBitmap: Bitmap? = null

2. 将bitmap矢量初始化

// 初始化圆环矢量，这个post函数，在imgColorPicker控件加载完毕以后调用
binding.imgColorPicker.post {
    // 从ImageView控件imgColorPicker中得到bitmap
    colorPickerBitmap = (binding.imgColorPicker.drawable as BitmapDrawable).bitmap
    // 得到ImageView控件imgColorPicker的布局
    val params = binding.imgColorPicker.layoutParams
    // 将bitmap调整一下缩放比例以满足真实绘制的大小
    colorPickerBitmap = colorPickerBitmap?.scale(params.width, params.height)
}

缩放方法如下：

/**
 * 调整bitmap大小
 * @receiver Bitmap
 * @param width Int 目标宽度
 * @param height Int 目标高度
 * @return Bitmap
 */
fun Bitmap.scale(width: Int, height: Int) : Bitmap {
    // 获得图片的宽高
    val bw = this.width
    val bh = this.height
    // 计算缩放比例
    val sw = width.toFloat() / bw
    val sh = height.toFloat() / bh
    // 取得想要缩放的matrix参数
    val m = Matrix()
    m.postScale(sw, sh)
    return Bitmap.createBitmap(this, 0, 0, bw, bh, m, true)
}

3. 监听圆环触摸事件

// 触摸取色圆环
binding.imgColorPicker.setOnTouchListener { _, event ->
    if (colorPickerBitmap != null) {
        // 获得触摸位置X轴坐标，并限制值在0到图片宽度大小
        val x = event.x.toInt().coerceAtLeast(0).coerceAtMost(colorPickerBitmap!!.width -1)
        // 获得触摸位置Y轴坐标，并限制值在0到图片高度大小
        val y = event.y.toInt().coerceAtLeast(0).coerceAtMost(colorPickerBitmap!!.height -1)
        // 获得触摸位置的颜色值
        val colorInt = colorPickerBitmap!!.getPixel(x, y)
        if (colorInt == 0) {
            LogUtils.d("触摸在透明区域")
        } else {
            // 设置选中颜色覆盖
            binding.imgColorCenter.setColorFilter(colorInt)
            ...
        }
    }
    true
}

完事

总体来说还是挺简单的，也可以当作是图片取色的一种想法。