一:準備工作:

今天我們就來學習一下 ,怎麼用自定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裡面什麼都不寫。

這樣我們的動態時鐘就繪製好了哦!