一、前言
2010年JetBrains推出kotlin语言，次年将其开源，在2017年Google I/O大会上，官宣kotlin成为Android开发第一编程语言。这就像当年Google官宣使用Android Studio成为Android官方支持的IDE一样，刚开始很多人还是继续使用Eclipse，觉得AS不好用，可是慢慢的，随着AS的不断迭代完善，基本上大部分人都转过来使用AS了。
2017/6的时候，也写过一篇kotlin入门博客，Kotlin入门配置与简单实战，不过之后就不了了之了，因为那时候的工作重点在大数据。所以，很惭愧，作为一名Android开发人员，现在才开始真正学习kotlin！
二、需求来源
某一天，去图书馆看小说的时候无意中发现书架上有一本书《Android自定义控件开发入门与实战》，拿回去学习了一天后发现还是做出点案例比较实在，正好想到最近在做地图有关的项目，界面上会以数字形式显示实时速度信息，那么能不能做出一个类似汽车码表的自定义View来代替数字显示实时速度呢，答案是肯定的
三、自定义View
1、效果图展示
2、思路分析
第一步，画一个半圆，这里我假设这个半圆是一个正方形的圆弧，使用path路径arcTo方法即可完成
第二步，画一个中心白点，就是上面说的那个正方形的圆心，drawCircle搞定
第三步，画半圆上的大刻度，首先我们一眼就能看出这个刻度肯定是用drawLine画出来的，所以只要知道起终点坐标就ok了。
先说起点坐标，起点就是半圆上的点，半圆上那么多点，我只取其中的十三个点，就好像弱水三千我只取一瓢饮一样。那么为什么取十三个点呢，因为我看正常的汽车码表都是从0到240，每个格子20，那就是十二个格子，换成点那就是十三，我们首先可以算出每个格子占用的角度，那就是180/12 = 15，这样就知道每个点的角度，那就是180、195、210、225、240…，然后开始计算坐标，首先要把角度转换为弧度，因为接下来要用的正余弦函数，他们是要使用弧度作为参数的，我们来看下面这张图
B点的坐标(c,d)、圆的半径r、角度m都是已知的，现在要求A点的坐标，我们知道如下公式
cosm = f / r
sinm = e / r
所以A点坐标(x,y)就分别是
x = c + cosm * r
y = d + sinm * r
注意这里的m实际度数是180+m，所以cosm或者sinm算出来的应该是负数，所以最终就可以拿到起点坐标(x,y)了
OK，我们已经拿到了起点坐标，接下来计算终点坐标，这条线其实就是从半径这条线上截取了一小段，所以我们依然可以使用正余弦函数来获取目标值，只不过原来正余弦函数里面的斜边r，换成我们想要的偏移量即可
finalx = x - cosm * 偏移量即刻度的长度
finaly = y - sinm * 偏移量即刻度的长度
最后使用drawLine画出所有大刻度
第四步，画出小刻度，同理上一步，只不过角度和长度不一样而已，此处不再赘述
第五步，画数字，其实和上一步差不多，只不过这里要注意的是，文字不像线条或者点，文字本身是横线扩展的，所以我们要根据索引来动态调整最终的xy坐标
第六步，画单位km/h，也是调用drawText方法，这里就根据270度这个角度来画，这样才会把文字画在中间，同时把偏移量调大一点，最后把文字设置成斜体即可
第七步，画指针，原理和画大小刻度差不多，重点在于把数字速度转换成角度，这样做的目的是为了计算出指针终点的坐标，指针起点坐标就是圆心
3、代码实现
（1）定义全局变量
/**
* 当前速度，单位km/h
*/
private var curSpeed: Int = -1
/**
* 画笔
*/
private val paint = Paint()
/**
* 画外层圆弧，路径和椭圆
*/
private var rectF: RectF? = null
private var arcPath: Path? = null
/**
* 中心点坐标、半径
*/
private var centerX: Float? = null
private var centerY: Float? = null
private var radius: Float? = null
/**
* 码表外层RectF
*/
private var left = -1F
private var top = -1F
private var right = -1F
private var bottom = -1F
/**
* 偏移量
*/
private val pointerOffset = 20
private val unitOffset = 140
private val numberOffset = 70
private val smallOffset = 25
private val bigOffset = 40
/**
* 码表表盘数组
*/
private val bigMarkArr: MutableList<Double> = mutableListOf()
private val smallMarkArr: MutableList<Double> = mutableListOf()
private val numberArr: MutableList<String> = mutableListOf()
（2）初始化数组
init {
// 大刻度数组
for (i in 180..360 step 15)
bigMarkArr.add(i.toDouble())
// 小刻度数组
for (i in 187..352 step 15)
smallMarkArr.add(i + 0.5)
// 速度数字数组 12组 需要和刻度数组数量相等
for (i in 0..60 step 5)
numberArr.add(i.toString())
}
（3）获取控件宽高，计算圆心半径
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
centerX = width / 2.toFloat()
centerY = height * 5 / 6.toFloat()
radius = height * 3 / 4.toFloat()
left = centerX!! - radius!!
top = centerY!! - radius!!
right = centerX!! + radius!!
bottom = centerY!! + radius!!
rectF = RectF(left, top, right, bottom)
arcPath = Path()
}
（4）画外层半圆
/**
* 画外层半圆
*/
private fun drawHalf(canvas: Canvas?) {
paint.isAntiAlias = true
paint.color = Color.WHITE
paint.style = Paint.Style.STROKE
paint.strokeWidth = 10F
arcPath!!.rewind() // 清除直线数据，保留数据结构，方便快速重用
arcPath!!.arcTo(rectF, 178F, 184F)// 多截取一点弧会好看点
canvas?.drawPath(arcPath!!, paint)
}
（5）画圆点
/**
* 画圆点
*/
private fun drawCenter(canvas: Canvas?) {
val centerRadius = 3F
paint.color = Color.WHITE
paint.style = Paint.Style.FILL_AND_STROKE
canvas?.drawCircle(centerX!!, centerY!!, centerRadius, paint)
}
（6）画大刻度
/**
* 画大刻度
*/
private fun drawBig(canvas: Canvas?) {
paint.color = Color.WHITE
paint.strokeWidth = 10F
paint.style = Paint.Style.FILL_AND_STROKE
for (item in bigMarkArr) {
val radian = toRadians(item) // 角度转弧度
val firstX = getRoundX(radian).toFloat()
val firstY = getRoundY(radian).toFloat()
val secondX = (firstX - cos(radian) * bigOffset).toFloat()
val secondY = (firstY - sin(radian) * bigOffset).toFloat()
canvas?.drawLine(firstX, firstY, secondX, secondY, paint)
}
}
（7）画小刻度
/**
* 画小刻度
*/
private fun drawSmall(canvas: Canvas?) {
paint.color = Color.WHITE
paint.strokeWidth = 5F
paint.style = Paint.Style.FILL_AND_STROKE
for (item in smallMarkArr) {
val radian = toRadians(item) // 角度转弧度
val firstX = getRoundX(radian).toFloat()
val firstY = getRoundY(radian).toFloat()
val secondX = (firstX - cos(radian) * smallOffset).toFloat()
val secondY = (firstY - sin(radian) * smallOffset).toFloat()
canvas?.drawLine(firstX, firstY, secondX, secondY, paint)
}
}
（8）画数字速度
/**
* 画数字
*/
private fun drawNumber(canvas: Canvas?) {
paint.textSize = 25F
paint.strokeWidth = 5F
paint.textSkewX = 0F // 倾斜度设置为0，就是非斜体
paint.style = Paint.Style.FILL
for (index in numberArr.indices) {
val radian = toRadians(bigMarkArr[index]) // 角度转弧度
val firstX = getRoundX(radian)
val firstY = getRoundY(radian)
val secondX = (firstX - cos(radian) * numberOffset - index * 3).toFloat()//距离微调
val secondY = (firstY - sin(radian) * numberOffset + index).toFloat()//距离微调
canvas?.drawText(numberArr[index], secondX, secondY, paint)
}
}
（9）画单位
/**
* 画单位 km/h
*/
private fun drawUnit(canvas: Canvas?) {
paint.textSize = 20F
paint.textSkewX = -0.25F // 斜体
val one = toRadians(270.0) // 角度转弧度 最顶端的圆点
val testX = getRoundX(one)
val testY = getRoundY(one)
val finalX = (testX - cos(one) * unitOffset - 27).toFloat()//距离微调
val finalY = (testY - sin(one) * unitOffset + 9).toFloat()//距离微调
canvas?.drawText("km/h", finalX, finalY, paint)
}
（10）画指针
/**
* 画指针
*/
private fun drawPointer(canvas: Canvas?) {
paint.color = Color.RED
paint.strokeWidth = 8F
// (180 + 3 * curSpeed)的意义在于把速度转换为角度
val pointerDegree = (180 + 3 * curSpeed).toDouble()
val radian = toRadians(pointerDegree)
val firstX = getRoundX(radian)
val firstY = getRoundY(radian)
val secondX = (firstX - cos(radian) * pointerOffset).toFloat()
val secondY = (firstY - sin(radian) * pointerOffset).toFloat()
canvas?.drawLine(centerX!!, centerY!!, secondX, secondY, paint)
}
4、代码发布
代码已开源在github上，可直接查看https://github.com/xmliu/SpeedView，同时代码已发布到jitpack上，可直接gradle依赖使用到项目中去，具体方法可查看项目主页介绍或者Android发布开源控件到jitpack给他人使用使用案例
四、后续优化
1、指针动画均匀移动
2、表盘带有3d层次感