Android自定义View：如何实现一个模拟时钟？

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 2.3k 阅读时长 ≈ 2 分钟

By Long Luo

Android中自定义控件一直都是Android开发中的一个难点。

最近看大牛 @Tomcat的猫 写的 《Android群英传》 里面的第六章Android绘图机制及处理技巧，里面通过Canvas实现了一个如下所示的仪表盘：

仪表盘

在书中详细描述了如何实现这个仪表盘，这里就不赘述了，可以参考其 具体实现代码 。

但是这个表盘的指针是静止不动的，如果我们能让这个表盘的指针展示当前时间，随着时间而转动，那么我们就可以一款模拟时钟了。

那么，问题就来了：

如何才能让时钟的指针动起来呢？

这个问题，我们可以考虑分为2步去实现，第一步先绘制出当前的时间，第二部再让指针动起来。通过这样我们就可以实现一款模拟时钟。

一、绘制当前时间

1.1 获取当前时间

要绘制当前时间，我们要先获取当前时间。

1
mTime.setToNow();

1.2 获取指针角度

当前时间可分为时，分，秒。

我们最终要获取的是时分秒3个指针对应的精确角度。

秒针角度：最简单，直接乘以6即可获得。 分针角度：当前分钟 * 6 + 6 * 秒 / 60F 时针角度：(当前小时 % 12) * 30 + 30 * 当前分钟角度 / 360F;

1.3 绘制指针

获取到指针角度之后，接下来就是在表盘绘制指针了。这里我们要利用canvas.rotate()这个方法来实现绘制指针，具体实现代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
private void drawTime(Canvas canvas) {
    // 当前时间
    mTime.setToNow();

    // 当前时间对应的角度
    float secRot = mTime.second * 6;
    float minRot = mTime.minute * 6 + 6 * mTime.second / 60F;
    float hrRot = (mTime.hour % 12) * 30 + 30 * minRot / 360F;

    Log.d(TAG, "hrRot=" + hrRot + ",minRot=" + minRot + ",secRot=" + secRot);

    // 画指针
    Paint paintHour = new Paint();
    paintHour.setStrokeWidth(20);
    Paint paintMinute = new Paint();
    paintMinute.setStrokeWidth(10);
    Paint paintSecond = new Paint();
    paintSecond.setStrokeWidth(5);

    canvas.save();

    // 时针
    canvas.rotate(hrRot, mWidth / 2, mHeight / 2);
    canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, mHeight / 2 - mWidth / 2 + 320,
            paintHour);
    canvas.rotate(-hrRot, mWidth / 2, mHeight / 2);

    // 分针
    canvas.rotate(minRot, mWidth / 2, mHeight / 2);
    canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, mHeight / 2 - mWidth / 2 + 230,
            paintMinute);
    canvas.rotate(-minRot, mWidth / 2, mHeight / 2);

    // 秒针
    canvas.rotate(secRot, mWidth / 2, mHeight / 2);
    canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, mHeight / 2 - mWidth / 2 + 150,
            paintSecond);
    canvas.rotate(-secRot, mWidth / 2, mHeight / 2);

    canvas.restore();
}

二、每一秒刷新界面

完成了第一步之后，我们要做的就是实现每隔1s去刷新界面。这个实现很简单，通过Handler就可以实现。

首先在自定义ViewClock中添加一个刷新界面的接口：

1
2
3
public void refreshClock() {
    postInvalidate();
}

添加接口之后，我们再在Activity中使用Handler实现1s调用一次该接口即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mClock = new Clock(this);

    mHandler = new Handler();

    mHandler.post(updateTime);

    setContentView(mClock);
}

private Runnable updateTime = new Runnable() {
    public void run() {
        mClock.refreshClock();
        mHandler.postDelayed(updateTime, 1000);
    }
};

运行效果图如下所示： 模拟时钟

通过以上方法，我们使用Android自定义View实现了一个模拟时钟了。

Modified By Long Luo at 2018年10月1日10点40分 in Shenzhen, China.