本文内容为从0-1开发一个颜色选择器，先上效果图

相关源码文件，将会在文末附上。

效果如图所示。本文将讲述如何自定义一个这样的控件，代码在文末。

思考

（一）实现方式
（二）传递给业务层的数据格式
（三）实现细节

上面三个点，是需要我们去思考的。
（一），这里选择的实现方法，推荐是自定义view，因为这种布局，一般普通的控件，是不支持的。
（二）对于业务层来说，应该做的是，传递颜色数据进入我们的控件，然后控件选择了颜色后，把颜色数据原封不动的传回给业务层，这里选择了String格式作为色值传递，如“#ffffff”。
（三）实现中，使用canvas如何正确绘制圆弧，如何计算真实的角度，象限区间的数据转换，以及坐标数据的转换，点击事件的坐标计算，都是值得思考的问题。

好了，思考完以后，就开始干活。

实现过程

#####（一）定义类
做类似的控件，都是需要有一个大纲思维，就是我这个控件库，给外部暴露了什么方法，我内部又需要如何处理外部传入的数据。所以，要先定义好抽象方法：

（1）控件抽象类：

 interface LibColorCirclePickerApi {fun setColor(color: Array>)fun setLibColorCirclePickerListener(listener: LibColorCirclePickerListener)fun removeLibColorCirclePickerListener()
}

（2）外部监听类：

interface LibColorCirclePickerListener {fun selInfo(info: LibColorSelInfo)}

定义好这些方法，就可以通过继承，具体实现了。

#####（二）自定义view实现绘制色值

这里涉及到canvas绘制的知识，请提前了解。
而如图所示，绘制分为两个层级。一个就是中心圆，另外一个就是色块。

在绘制之前，需要确定以下的变量，方便后续的绘制：
（一）绘制的中心坐标点，x,y点。这里取x/2,y/2。
（二）绘制的半径，这里取最短边的一般作为绘制的半径。
（三）绘制中心圆的半径，通过一定的比率和（二）相乘，得出中心圆的半径。
（四）除中心圆外，剩余的半径长度，这里后续会做平均划分，计算除每层色块的半径长度。
（五）初始化相关中间变量值（如色块坐标集合）

初始相关变量后后，就开始绘制：

绘制中心圆

对于中心圆，这里直接调用canvas的画圆圈方法就行，不再啰嗦

绘制色块

对于色块，首先要明确，你的色块有多少层，这里就决定了每层色块的半径长度。这里的多少层，是通过外部传入的二维数组决定的。对于传入的二维数组，一维决定层级，二维就是一维下的色块数组。

通过上述的了解，就可以通过 “剩余半径” 除以 “色块层数” 即可得出 “每层色块半径长度”。

再通过 360 除以 “每层色块数量”，即可得出每个色块所占的角度。

最后通过设置画笔的strokeWidth，就可以进行绘制。

最后，把绘制过程中产生的“半径范围值”，“角度范围值”，“色值”通过中间变量保存，供以后续的触摸事件调用。

ps:

这里有个实现细节，就是关于Paint的strokeWidth。实际是基于绘制坐标两端扩展的。例如，绘制一条直线，那就会在Y坐标两端拓展，如 (x,y)(0,10)，strokeWidth是10，那么直角边宽度就会基于(0,5)-(0,15)中间。

所以，设置strokeWidth后绘制，需要预留绘制实现中的位置。

触摸事件

对于触摸事件，需要在onTouchEvent中进行处理，父类方法重新如下：

    override fun onTouchEvent(event: MotionEvent?): Boolean {when (event?.action) {MotionEvent.ACTION_DOWN -> {}MotionEvent.ACTION_MOVE -> {}MotionEvent.ACTION_UP -> {val currentX = event.xval currentY = event.ydealWithUpEvent(currentX, currentY)}MotionEvent.ACTION_CANCEL -> {}}return true}

这里通过return true，把所有事件都拦截到本view进行处理了。

设想一下，有了中心坐标，和点击时候的x,y坐标。是不是可以得出一个“象限区间”的逻辑？然后再通过数学公式tan方法，即可得出对应的角度。

角度有了，象限有了，就可以换算出最后的真正点击角度，还有点击坐标点的半径。核心代码如下：

    /*** 处理手势抬起事件* */private fun dealWithUpEvent(currentX: Float, currentY: Float) {//判断象限val trainX = (currentX - mCenterX)val trainY = (mCenterY - currentY)//求半径长度val x = abs(abs(currentX) - abs(mCenterX)).toDouble()val y = abs(abs(mCenterY) - abs(currentY)).toDouble()//半径val trainRadius = sqrt((x.pow(2.0) + y.pow(2.0)))//角度val angle = atan(abs(x) / abs(y)) * 180 / PI//计算后，再根据象限，转换最终的角度var trainAngle = 0fif (trainX <= 0 && trainY >= 0) {trainAngle = (90 - angle + 270).toFloat()} else if (trainX >= 0 && trainY >= 0) {trainAngle = angle.toFloat()} else if (trainX <= 0 && trainY <= 0) {trainAngle = (angle + 180).toFloat()} else if (trainX >= 0 && trainY <= 0) {trainAngle = (90 - angle + 90).toFloat()} else {return}
//        Log.d("dealWithUpEvent", "angle $angle + 转换角度  $trainAngle 半径： $trainRadius")//通过象限，角度，半径，三个条件，确定具体的位置val filterList: MutableList = ArrayList()this.mColorPosInfo.filter {it.startAngle <= trainAngle && it.endAngle >= trainAngle}.filter {it.startRadius >= trainRadius && it.endRadius <= trainRadius}.filter {!it.color.isNullOrBlank()}.toCollection(filterList)if (filterList.size != 1) {return}mListener?.selInfo(LibColorSelInfo().apply {this.colorStr = filterList.first().color})}

至此，全部流程已经说完了，还有不懂的地方，请下载源码了解：

源码
提取码: naf2

that’s all--------------------------------------------------------------