Android 自定义View（一）实现时钟表盘效果

一、前言

Android 自定义View是高级进阶不可或缺的内容，日常工作中，经常会遇到产品、UI设计出花里胡哨的界面。当系统自带的控件不能满足开发需求时，就只能自己动手撸一个效果。

本文就带自定义View初学者手动撸一个效果，通过自定义View实现钟表功能，每行代码都有注释，保证易懂，看不懂你留言打我！！！

二、实现效果

1、先看效果图

2、下载地址：点击下载

3、步骤分析

实现以上效果，主要分为四个步骤：

1. 绘制外层表盘
2. 绘制刻度线
3. 绘制刻度数字
4. 绘制指针

三、代码实现

1、绘制外层表盘

外层表盘就是一个空心圆，只要获取圆的x、y轴位置、圆的半径，使用Canvas.drawCircle()方法即可完成。

/**
 * 绘制表盘
 */
private fun drawClock(canvas: Canvas, centerX: Float, centerY: Float) {
   

    // 设置外层圆画笔宽度
    mPaint.strokeWidth = mCircleWidth
    // 设置画笔颜色
    mPaint.color = Color.BLACK
    // 设置画笔空心风格
    mPaint.style = Paint.Style.STROKE
    // 绘制圆方法
    canvas.drawCircle(centerX, centerY, radius, mPaint)
}

2、绘制刻度线

绘制思路分析

看到效果图上密密麻麻刻度线后，先不要着急上手，屡清楚绘制思路。绘制刻度线一定要结合Canvas几何变换思路完成，千万不要局限于效果图的表面（如果对Canvas相关API不熟悉的朋友，建议先了解下）。

1. 假设以12点钟为例，那么刻度线就是一条笔直的竖线，调用Canvas.drawLine()方法完成绘制。
2. 如果每绘制完成一个刻度，把表盘逆时针/顺时针旋转一定角度，将下次需要绘制刻度线的位置旋转到12点钟位置，那么每次绘制刻度线的startX、startY、stopX、stopY一致（一致仅代表所有长刻度一致，所有短刻度一致）。
3. 观察表盘共有60个刻度线（12长，48短），那么每次旋转角度degrees=360/60

听完以上分析，是否觉得绘制刻度线很简单，只要在60个刻度遍历判断长短，即可轻松出效果。

/**
 * 绘制表盘刻度
 */
private fun drawClockScale(canvas: Canvas, centerX: Float, centerY: Float) {
   
    for (index in 1..60) {
   
        // 刻度绘制以12点钟为准，每次将表盘旋转6°，后续绘制都以12点钟为基准绘制
        canvas.rotate(6F, centerX, centerY)
        // 绘制长刻度线
        if (index % 5 == 0) {
   
            // 设置长刻度画笔宽度
            mPaint.strokeWidth = 4.0F
            // 绘制刻度线
            canvas.drawLine(
                centerX,
                centerY - radius,
                centerX,
                centerY - radius + scaleMax,
                mPaint
            )
        }
        // 绘制短刻度线
        else {
   
            // 设置短刻度画笔宽度
            mPaint.strokeWidth = 2.0F
            canvas.drawLine(
                centerX,
                centerY - radius,
                centerX,
                centerY - radius + scaleMin,
                mPaint
            )
        }
    }
}

以上代码就完成了绘制刻度线的效果，下面插个题外话，第一次尝试在绘制刻度线的时候，表盘数字一并完成，后来发现数字如下图所示：

不知道有没有小伙伴遇到同样的问题，附上图表盘数字代码，

// 测量绘制数字
mPaint.strokeWidth = 1.0F
mPaint.style = Paint.Style.FILL
mPaint.getTextBounds((index / 5).toString(), 0, (index / 5).toString().length, mRect)
val width = mRect.width()
canvas.drawText(
    (index / 5).toString(),
    centerX - mRect.width() / 2,
    (centerY - radius + scaleMax + mRect.height() + 8),
    mPaint
)

3、绘制刻度数字

绘制数字方案已经更新，请向下查阅第四步骤！

由于第2步数字绘制有问题，所以采取了以下方式，个人觉得有些臃肿，如果有更简单的方式，请指教！

根据12个数字，使用三角函数关系分别计算出文本的坐标位置（x，y），然后完成文本绘制。其中3/6/9/12这四个数字比较简单，只需要在x轴或者y轴减去对应文本的宽或者高。其余数字计算方式，下面用图解方式举例：

以表盘数字2为例，因为表盘数字到圆心距离都是一样的（图上黑色斜线尺寸假设为h），

所以此时：x = hsin(60°) y = hcos(60°)

文本x轴位置 = centerX + x - 文本宽度

文本y轴位置 = centerY + y - 文本高度

/**
 * 绘制表盘数字
 */
private fun drawClockNumber(canvas: Canvas, centerX: Float, centerY: Float) {
   
    var x = 0.0F // 数字x坐标
    var y = 0.0F // 数字y坐标
    // 设置画笔宽度
    mPaint.strokeWidth = 1.0F
    // 设置画笔实心风格
    mPaint.style = Paint.Style.FILL

    // 数字距离表盘边界距离：半径-刻度线长度-数字距离刻度线间距
    var tempSpace = radius - scaleMax <