持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

之前浏览掘金的时候看到一位大兄弟使用CSS绘制了一个时钟，便想着在Android上实现一下。

实现的效果图如下

绘制刻度线

首先我们需要绘制刻度线，在表盘上一共有60个刻度线，所以每两个刻度线之间相差6度。我们边绘制边旋转画布。

这里为了更加真实，每第五个刻度线都用黑色凸显，而且他的宽度和长度与其他的不一致。

绘制数字

绘制数字与刻度线一样，表盘一共有12个数字，所以没个360/12=30度绘制一个。

绘制指针

绘制指针的时候一开始想的是使用drawLine()函数进行绘制，但是实现的结果感觉有点生硬，所以最后采用了使用drawPath()函数。

由于三个指针绘制方法其实差别不大，就抽取了个函数。

//绘制时针
drawLine(canvas, Color.BLACK, 360 / 12F * hour, max * 0.4F, max * 0.8F,radius*0.5F)
//绘制分针
drawLine(canvas, Color.BLACK, 360 / 60F * minute, max * 0.3F, max * 0.4F,radius*0.7F)
//绘制秒针
drawLine(canvas, Color.RED, 360 / 60F * second, max * 0.3F, max * 0.3F,radius*0.8F)

max默认设置了10dp，通过改变它的大小改变指针的宽度，通过改变lineLength控制指针的长度。

绘制中心枢纽

在时钟的中心还需要一个中心枢纽连接三个指针，这里直接以两个圆代替。

paint.color = Color.BLACK
canvas.drawCircle(center.x, center.y, max * 1.5F, paint)
paint.color = Color.WHITE
canvas.drawCircle(center.x, center.y, max*0.8F, paint)

到目前为止，时钟基本成型了，只不过还是静态的，我们需要让他动起来。

private fun run() {
    val milliSecond: Int = calendar.get(Calendar.MILLISECOND)
    second = calendar.get(Calendar.SECOND) + milliSecond / 1000
    minute = calendar.get(Calendar.MINUTE) + second / 60
    hour = calendar.get(Calendar.HOUR) + minute / 60
    invalidate()
    android.os.Handler(Looper.myLooper()!!).postDelayed({ run() }, 1000)
}

使用Calendar获取当前的时间，然后获取出时分秒然后换算出需要旋转的角度，每隔1s重新绘制一次，指针就动起来了。