Android繪制鐘表的方法

更新時(shí)間：2020年09月24日 11:28:20 作者：UserNamezhangxi

這篇文章主要為大家詳細(xì)介紹了Android繪制鐘表的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android繪制鐘表的具體代碼，供大家參考，具體內(nèi)容如下

首先要畫一個(gè)表，我們要先知道步驟如何：

1、儀表盤----外面最大的圓盤

2、刻度線----四個(gè)長(zhǎng)刻度和剩下的短刻度

3、刻度值----對(duì)應(yīng)的刻度下的數(shù)字

4、指針------鐘表的三個(gè)指針

5、指針動(dòng)起來

明確思路，下來就是畫圖了

1、儀表盤，畫圓

outCirclePaint = new Paint();
outCirclePaint.setStrokeWidth(2);
outCirclePaint.setAntiAlias(true);
outCirclePaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(mWidth/2,mHeight/2,mWidth/2,outCirclePaint);

2、畫刻度，同時(shí)寫刻度值

畫刻度的思路是每次畫一個(gè)刻度（短的線段）完成之后，旋轉(zhuǎn)畫布30°，因?yàn)?60/12。遇到3、6、9、12 把刻度線畫粗，畫稍長(zhǎng)一點(diǎn)。

for (int i = 0; i <= 12;i++){
  if (i==3||i==6||i==9 || i==12){
    degreePaint.setStrokeWidth(3);
    degreePaint.setTextSize(30);
    canvas.drawLine(mWidth/2,mHeight/2-mWidth/2,mWidth/2,mHeight/2-mWidth/2+30,degreePaint);
    String degree = String.valueOf(i);
    canvas.drawText(degree,
        mWidth/2-degreePaint.measureText(degree)/2,
        mHeight/2-mWidth/2 + 60,
        degreePaint);
    }else{
      if (i!=0){ //遇到0不考慮劃線 寫刻度值
       degreePaint.setStrokeWidth(2);
       degreePaint.setTextSize(20);
        canvas.drawLine(mWidth/2,mHeight/2-mWidth/2,mWidth/2,mHeight/2-mWidth/2+15,degreePaint);
        String degree = String.valueOf(i);
        canvas.drawText(degree,
          mWidth/2-degreePaint.measureText(degree)/2,
          mHeight/2-mWidth/2 + 40,
          degreePaint);
      }
    }
    canvas.rotate(30,mWidth/2,mHeight/2);
}

3、畫指針

canvas.translate(mWidth/2,mHeight/2);
canvas.drawLine(0,0,hx,hy,hourPaint); // 小時(shí)
canvas.drawLine(0,0,mx,my,minPaint); // 分鐘
canvas.drawLine(0,0,sx,sy,sPaint);  // 秒

4、指針動(dòng)起來

指針動(dòng)起來也就是說讓指針的一端固定，另外一端需要通過sin計(jì)算Y值，cos計(jì)算X值，指針長(zhǎng)度自己確定好即可。

這樣秒針每次動(dòng)一下就是6°，以這個(gè)為秒針單位。

Math.PI/30 //π/30

分針同理

時(shí)針不一樣，每次動(dòng)一下是要30°

Math.PI/6 //π/6

Calendar calendar = Calendar.getInstance();
hcount = calendar.get(Calendar.HOUR_OF_DAY);
mcount = calendar.get(Calendar.MINUTE);
scount = calendar.get(Calendar.SECOND);
int hx = (int) (70*Math.cos(Math.PI*(hcount%12-15) / 6));
 int hy = (int) (70*Math.sin(Math.PI*(hcount%12-15) / 6));
 int mx = (int) (90*Math.cos(Math.PI*(mcount-15) / 30));
 int my = (int) (90*Math.sin(Math.PI*(mcount-15) / 30));
 int sx = (int) (110*Math.cos(Math.PI*(scount-15) / 30)); // -15 是為了調(diào)整時(shí)差(角度差)
 int sy = (int) (110*Math.sin(Math.PI*(scount-15) / 30));

最后和畫指針的結(jié)合起來進(jìn)行繪制就可以讓指針動(dòng)起來。

附加一個(gè)功能顯示上午下午的功能

//繪制 上午下午
APMPaint.setTextSize(20);
APMPaint.setStrokeWidth(2);
canvas.rotate(-30,mWidth/2,mHeight/2);
String apm ;
if (hcount < 12){
  apm = "AM";
}else{
  apm = "PM";
}
 
canvas.drawText(apm,
    mWidth/2-degreePaint.measureText(apm)/2,
    mHeight/2+100,
    APMPaint);

大家還可以繼續(xù)拓展，添加星期，和每個(gè)月的日期，做成一個(gè)屬于你自己的表。

效果圖：