时钟窗口小部件实现

前言

Android自带的时钟AppWidget感觉特别的简单，只有一个圆盘加上时针和分针，看着也没有什么变化，这里就自己来实现一下简单的时钟小部件。

实现效果

时钟控件实现

时钟控件最外层的大圆只可以调用Canvas.drawCircle实现，这个很简单，事实上canvas对象除了那些直接画线、画圆等画图操作外，它还能够像真正的画布那样做各种移位、旋转等动作，为了保证这些操作不会影响其他元素的绘制，通常会先保存画布内容在做移位旋转等操作，最后在还原画布内容。了解了这些之后就可以轻松的绘制内部的刻度线了，圆形最上方的12点钟刻度线位置很容易确定，如果直接绘制12点前后的刻度需要用三角函数计算它们的位置，这样太麻烦了，可以旋转画布360 / (12 * 60)也就是每个最小刻度之间的角度值，然后再绘制，不停的旋转直到所有的刻度都画完，时钟的时间文案也是用同样的方式绘制。

 private void drawClock(Canvas canvas) {
    paint.setStrokeWidth(CommonUtils.dp2px(1));
    paint.setStyle(Paint.Style.STROKE);
    paint.setTextSize(CommonUtils.dp2px(13));
    int centerX = width / 2;
    int centerY = height / 2;
    canvas.save();
    canvas.drawCircle(centerX, centerY, centerX - CommonUtils.dp2px(5), paint);
    for (int i = 0; i < MINUTES_COUNT; i++) {
        if (i % 5 == 0) { // 画时
            canvas.drawLine(centerX, CommonUtils.dp2px(5), centerX, LONG_TICK, paint);
        } else { // 画分钟
            canvas.drawLine(centerX, CommonUtils.dp2px(5), centerX, SHORT_TICK, paint);
        }

        // 旋转画布，避免用三角函数计算位置
        canvas.rotate(360 / MINUTES_COUNT, centerX, centerY);
    }
    canvas.restore();

    // 画时刻
    canvas.save();
    paint.setStyle(Paint.Style.FILL);
    for (int i = 0; i < HOURS_COUNT; i++) {
        int textWidth = (int) paint.measureText(HOURS[i]);
        canvas.drawText(HOURS[i], centerX - textWidth / 2, CommonUtils.dp2px(5 + 13) + LONG_TICK, paint);
        canvas.rotate(360 / HOURS_COUNT, centerX, centerY);
    }
    canvas.restore();
    ...
}

画完刻度和文字之后就需要画时针，分针和秒针，实现方式类似前面的刻度画法，需要确定当前针与12点钟方向的角度值，旋转画布，画一条直线，然后还原转