自定义view绘制动态钟表

首先附上源码地址:https://github.com/y-kaixin/Colock

一:准备工作:

今天我们就来学习一下 ,怎么用自定view绘制钟表?

在绘制钟表之前,我也看了好多博客,上面写的特别复杂,什么计算公式一大堆,其实并不用这么麻烦,只要我们了解了自定义view里面的几个属性我们就可以用特别简单的方法来绘制动态钟表,下面我们现在介绍一下这几个属性:

    canvas.save();
    canvas.rotate();
    canvas.restore();

save();  //保存之前所绘制的内容

rotate();  //一共有三个参数,第一个参数指的是画布旋转的度数,第二个和第三个参数则代表的是绕哪个点旋转

restore();  //我们在使用了save之后,如果还想要继续绘制,就得使用restore

好啦,下面我们正式开始绘制钟表啦!!!

二:开始啦:

我们现在看一下效果图:

我们可以看出来绘制钟表需要圆、数字、刻度。

如果我们不知道自定义view中有旋转画布的方法,那我们绘制刻度、数字就会非常困难,我们不建议使用纯计算绘制,毕竟自定义view有这个方法,我们为什么不用呢?

     paint.setStrokeWidth(5);  
     for(int i = 1;i<13 ; i++){
            canvas.save();//保存之前画布上的内容
            canvas.rotate(i*30,min/2,min/2);//绕圆心旋转30度
            canvas.drawText(i+"",x-20,y+80,paint);//添加数字
            canvas.drawLine(x,y,x,y+40,paint);//添加整点刻度
            canvas.restore();//开启画布
        }

    paint.setStrokeWidth(2);
        for (int i = 0;i<60;i++){
            canvas.save();
            canvas.rotate(i*6,min/2,min/2);
            canvas.drawLine(x,y,x,y+20,paint);
            canvas.restore();
        }

这样我们的刻度以及数字就添加完毕了哦!

下面我们该绘制指针,获取电脑上的时间然后让指针跟着转动:

        //得到当前时间
        calendar = Calendar.getInstance();

        int hours = calendar.get(Calendar.HOUR);
        int minute = calendar.get(Calendar.MINUTE);
        int second = calendar.get(Calendar.SECOND);
        
        //时针
        canvas.save();
        Float hoursDegree = (hours * 60 + minute) / 12f / 60 * 360;
        canvas.rotate(hoursDegree,min/2,min/2);
        canvas.drawLine(min/2,min / 2 - 80, min / 2, min / 2 + 30,paint);
        canvas.restore();

        //分针
        canvas.save();
        Float minutesDegree = minute / 60f * 360;
        canvas.rotate(minutesDegree,min/2,min/2);
        canvas.drawLine(min / 2, min / 2 -120, min / 2, min / 2 + 20,paint);
        canvas.restore();

        //秒针
        canvas.save();
        Float secondDegree = second/60f*360;
        canvas.rotate(secondDegree,min/2,min/2);
        canvas.drawLine(min / 2, min / 2 - 160, min / 2, min / 2 + 40,paint);
        canvas.restore();

这样我们的指针就绘制好啦

然后我们别忘了在最后添加

        invalidate();

这句话用于刷新视图。

然后我们将它在布局文件里面引用一下，在activity里面什么都不写。

这样我们的动态时钟就绘制好了哦!