转载请注明出处:http://blog.csdn.net/baiyuliang2013/article/details/45535227

之前实现过html5版的钟表,html5也有一个画板属性Canvas,相对于安卓的Canvas来说html5的功能要强大的多,就拿钟表的实现,html5要方便简单的多,而安卓实现起来则非常复杂,像指针转动,html5可以画一条线,然后可以用这条线旋转一个弧度即可,而安卓必须是已知起点坐标和终点坐标,这就需要精确计算起始坐标了。先看下效果图,因为是图静态的,动态图也懒得做,所以看个大致效果即可,具体效果可以下载demo观看:

这个钟表并不算完美,正常的钟表,秒针每转动一格,分针和时针都会跟着转动相应的弧度,但本例中偷了个懒,只有秒针转一周时,分针才移动一小格,分针转一周时,时针移动一大格,不满一周的情况下不动,因为画线需要精确的坐标值,如果做到这种效果那工作量可就大了去了,因此我们知道原理即可。

实现思路:

1.重写View,并在ondraw方法中绘图;

2.定义边框宽度,刻度宽度,长度,指针宽度,长度,计算圆心坐标及表盘半径;

3.绘制边框:

  1. mPaint.setStrokeWidth(bordWidth); // 设置圆环的宽度
  2. mPaint.setColor(bordColor);
  3. canvas.drawCircle(getWidth()/2, getWidth()/2, r, mPaint);

4.绘制刻度:

  1. //画刻度
  2. //12
  3. mPaint.setStrokeWidth(timeLineB_W);
  4. mPaint.setColor(timeColor);
  5. canvas.drawLine(circleX,bordWidth, circleX, bordWidth+timeLineB_H, mPaint);
  6. //12-1
  7. mPaint.setStrokeWidth(timeLineS_W);
  8. for(int i=1;i<6;i++){
  9. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(90-i*6)) ),(float)(circleX-r*Math.cos(Math.toRadians(i*6))), (float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-i*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(i*6))),mPaint);
  10. }
  11. //1
  12. mPaint.setStrokeWidth(timeLineB_W);
  13. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(60)) ),(float)(circleX-r*Math.cos(Math.toRadians(30))), (float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(60))),(float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(30))),mPaint);
  14. //1-2
  15. mPaint.setStrokeWidth(timeLineS_W);
  16. for(int i=1;i<6;i++){
  17. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(90-30-i*6)) ),(float)(circleX-r*Math.cos(Math.toRadians(30+i*6))), (float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-i*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(30+i*6))),mPaint);
  18. }
  19. //2
  20. mPaint.setStrokeWidth(timeLineB_W);
  21. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(30)) ),(float)(circleX-r*Math.cos(Math.toRadians(60))), (float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(30))),(float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(60))),mPaint);
  22. //2-3
  23. mPaint.setStrokeWidth(timeLineS_W);
  24. for(int i=1;i<6;i++){
  25. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(90-60-i*6)) ),(float)(circleX-r*Math.cos(Math.toRadians(60+i*6))), (float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-i*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(60+i*6))),mPaint);
  26. }
  27. //3
  28. mPaint.setStrokeWidth(timeLineB_W);
  29. canvas.drawLine(getWidth()-bordWidth, circleX, getWidth()-bordWidth-timeLineB_H, circleX, mPaint);
  30. //3-4
  31. mPaint.setStrokeWidth(timeLineS_W);
  32. for(int i=1;i<6;i++){
  33. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(i*6)) ),(float)(circleX+r*Math.cos(Math.toRadians(90-i*6))), (float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(i*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-i*6))),mPaint);
  34. }
  35. //4
  36. mPaint.setStrokeWidth(timeLineB_W);
  37. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(30)) ),(float)(circleX+r*Math.cos(Math.toRadians(60))), (float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(30))),(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(60))),mPaint);
  38. //4-5
  39. mPaint.setStrokeWidth(timeLineS_W);
  40. for(int i=1;i<6;i++){
  41. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(30+i*6)) ),(float)(circleX+r*Math.cos(Math.toRadians(90-30-i*6))), (float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(30+i*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-i*6))),mPaint);
  42. }
  43. //5
  44. mPaint.setStrokeWidth(timeLineB_W);
  45. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(60)) ),(float)(circleX+r*Math.cos(Math.toRadians(30))), (float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(60))),(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(30))),mPaint);
  46. //5-6
  47. mPaint.setStrokeWidth(timeLineS_W);
  48. for(int i=1;i<6;i++){
  49. canvas.drawLine((float)(circleX+r*Math.cos(Math.toRadians(60+i*6)) ),(float)(circleX+r*Math.cos(Math.toRadians(90-60-i*6))), (float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(60+i*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-i*6))),mPaint);
  50. }
  51. //6
  52. mPaint.setStrokeWidth(timeLineB_W);
  53. canvas.drawLine(circleX,getWidth()-bordWidth, circleX, getWidth()-bordWidth-timeLineB_H,mPaint);
  54.  
  55. //6-7
  56. mPaint.setStrokeWidth(timeLineS_W);
  57. for(int i=1;i<6;i++){
  58. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(90-i*6)) ),(float)(circleX+r*Math.cos(Math.toRadians(i*6))), (float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-i*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(i*6))),mPaint);
  59. }
  60. //7
  61. mPaint.setStrokeWidth(timeLineB_W);
  62. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(60)) ),(float)(circleX+r*Math.cos(Math.toRadians(30))), (float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(60))),(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(30))),mPaint);
  63. //7-8
  64. mPaint.setStrokeWidth(timeLineS_W);
  65. for(int i=1;i<6;i++){
  66. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(90-30-i*6)) ),(float)(circleX+r*Math.cos(Math.toRadians(30+i*6))), (float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-i*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(30+i*6))),mPaint);
  67. }
  68. //8
  69. mPaint.setStrokeWidth(timeLineB_W);
  70. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(30)) ),(float)(circleX+r*Math.cos(Math.toRadians(60))), (float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(30))),(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(60))),mPaint);
  71. //8-9
  72. mPaint.setStrokeWidth(timeLineS_W);
  73. for(int i=1;i<6;i++){
  74. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(90-60-i*6)) ),(float)(circleX+r*Math.cos(Math.toRadians(60+i*6))), (float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-i*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(60+i*6))),mPaint);
  75. }
  76. //9
  77. mPaint.setStrokeWidth(timeLineB_W);
  78. canvas.drawLine(bordWidth,circleX, bordWidth+timeLineB_H, circleX,mPaint);
  79. //9-10
  80. mPaint.setStrokeWidth(timeLineS_W);
  81. for(int i=1;i<6;i++){
  82. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(i*6)) ),(float)(circleX-r*Math.cos(Math.toRadians(90-i*6))), (float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(i*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-i*6))),mPaint);
  83. }
  84. //10
  85. mPaint.setStrokeWidth(timeLineB_W);
  86. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(30)) ),(float)(circleX-r*Math.cos(Math.toRadians(60))), (float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(30))),(float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(60))),mPaint);
  87. //10-11
  88. mPaint.setStrokeWidth(timeLineS_W);
  89. for(int i=1;i<6;i++){
  90. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(30+i*6)) ),(float)(circleX-r*Math.cos(Math.toRadians(90-30-i*6))), (float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(30+i*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-i*6))),mPaint);
  91. }
  92. //11
  93. mPaint.setStrokeWidth(timeLineB_W);
  94. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(60)) ),(float)(circleX-r*Math.cos(Math.toRadians(30))), (float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(60))),(float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(30))),mPaint);
  95. //11-12
  96. mPaint.setStrokeWidth(timeLineS_W);
  97. for(int i=1;i<6;i++){
  98. canvas.drawLine((float)(circleX-r*Math.cos(Math.toRadians(60+i*6)) ),(float)(circleX-r*Math.cos(Math.toRadians(90-60-i*6))), (float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(60+i*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-i*6))),mPaint);
  99. }

刻度是逐一计算起始点坐标并绘制的,拿1点的刻度来说,

已知圆心坐标(x,y),半径r,AB长度为a,求A点B点坐标。这应该是初中的题目了吧,很好计算,只要求出A点到y轴和x轴的距离,B点到y轴和x轴的距离即可(最方便的办法就是利用正余玄函数了,而Java也提供了正余玄函数的算法:Math.cos(Math.toRadians(角度值),因为Math.cos传的是弧度,所以要将角度转化为弧度如Math.toRadians(60)),当然要注意屏幕坐标与数学中的象限坐标是不同的,所以AB点坐标要用求出的距离值结合圆的半径求出该点在屏幕中的实际坐标,然后画线即可。

5.绘制指针交点:

  1. mPaint.setStrokeWidth(2);
  2. mPaint.setStyle(Paint.Style.FILL);
  3. canvas.drawCircle(circleX,circleX, 10, mPaint);

6.秒针转动:

到这里,我们得思考下,钟表是要动的啊,那怎么实现打开应用钟表就开始走呢?很简单吧,初始化View时,在View的构造方法中开启个线程去不断重绘View即可,时间间隔当然为一秒,这也就给你视觉感是指针一秒转动一次,另外需要你对秒针分针时针转动时相互关联所走的角度有一个清晰的思路,如果你连他们之间的关系都搞不明白,那看代码就更不用说了:

  1. while (true){
  2. if (ss == 360){
  3. mm++;//秒针每转一圈,分针走一格,一格6度,一圈60格
  4. if(mm==60){
  5. hh++;//分针转一圈,时针走一格,一格30度,一圈12格
  6. if(hh==12){
  7. hh=0;
  8. }
  9. mm=0;
  10. }
  11. ss = 0;
  12. }
  13. postInvalidate(); //重绘
  14. try{
  15. Thread.sleep(1000); //暂停1秒
  16. } catch (InterruptedException e){
  17. e.printStackTrace();
  18. }
  19. ss+=6; //360度,分针每秒转动6度
  20. }

秒针转动:

  1. mPaint.setStrokeWidth(timeLineS_W-5);//设置秒针宽度
  2. mPaint.setColor(pointColor);
  3. r=r-timeLineB_H-5;//设置秒针长度
  4. //分针随秒针转动
  5. if(ss<=30){
  6. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-ss*1))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(ss*1))), mPaint);
  7. }else if(ss<=60){
  8. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(ss-30)*1))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(30+(ss-30)*1))), mPaint);
  9. }else if(ss<=90){
  10. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-(ss-60)*1))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(60+(ss-60)*1))), mPaint);
  11. }else if(ss<=120){
  12. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians((ss-90)*1))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-(ss-90)*1))), mPaint);
  13. }else if(ss<=150){
  14. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(30+(ss-120)*1))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(ss-120)*1))), mPaint);
  15. }else if(ss<=180){
  16. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(60+(ss-150)*1))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-(ss-150)*1))), mPaint);
  17. }else if(ss<=210){
  18. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-(ss-180)*1))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians((ss-180)*1))), mPaint);
  19. }else if(ss<=240){
  20. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(ss-210)*1))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(30+(ss-210)*1))), mPaint);
  21. }else if(ss<=270){
  22. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-(ss-240)*1))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(60+(ss-240)*1))), mPaint);
  23. }else if(ss<=300){
  24. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians((ss-270)*1))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-(ss-270)*1))),mPaint);
  25. }else if(ss<=330){
  26. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(30+(ss-300)*1))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(ss-300)*1))),mPaint);
  27. }else if(ss<=360){
  28. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(60+(ss-330)*1))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-(ss-330)*1))),mPaint);
  29. }

7.分针转动:

  1. mPaint.setStrokeWidth(timeLineS_W);//设置分针宽度
  2. r=circleX-bordWidth;//还原
  3. r=r-timeLineB_H-50;//设置分针长度
  4.  
  5. //分针随秒针转动
  6. if(mm<=5){
  7. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-mm*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(mm*6))), mPaint);
  8. }else if(mm<=10){
  9. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(mm-5)*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(30+(mm-5)*6))), mPaint);
  10. }else if(mm<=15){
  11. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-(mm-10)*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(60+(mm-10)*6))), mPaint);
  12. }else if(mm<=20){
  13. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians((mm-15)*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-(mm-15)*6))), mPaint);
  14. }else if(mm<=25){
  15. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(30+(mm-20)*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(mm-20)*6))), mPaint);
  16. }else if(mm<=30){
  17. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(60+(mm-25)*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-(mm-25)*6))), mPaint);
  18. }else if(mm<=35){
  19. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-(mm-30)*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians((mm-30)*6))), mPaint);
  20. }else if(mm<=40){
  21. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(mm-35)*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(30+(mm-35)*6))), mPaint);
  22. }else if(mm<=45){
  23. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-60-(mm-40)*6))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(60+(mm-40)*6))), mPaint);
  24. }else if(mm<=50){
  25. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians((mm-45)*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-(mm-45)*6))),mPaint);
  26. }else if(mm<=55){
  27. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(30+(mm-50)*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(mm-50)*6))),mPaint);
  28. }else if(mm<=60){
  29. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(60+(mm-55)*6))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-30-(mm-55)*6))),mPaint);
  30. }

8.时针转动:

  1. r=circleX-bordWidth;//还原
  2. r=r-timeLineB_H-120;//设置时针长度
  3.  
  4. //时针随分针转动
  5. if(hh<=3){
  6. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-hh*30))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(hh*30))), mPaint);
  7. }else if(hh<=6){
  8. canvas.drawLine(circleX,circleX,(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians((hh-3)*30))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians(90-(hh-3)*30))), mPaint);
  9. }else if(hh<=9){
  10. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-(hh-6)*30))),(float)(circleX+(r-timeLineS_H)*Math.cos(Math.toRadians((hh-6)*30))), mPaint);
  11. }else if(hh<=12){
  12. canvas.drawLine(circleX,circleX,(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians((hh-9)*30))),(float)(circleX-(r-timeLineS_H)*Math.cos(Math.toRadians(90-(hh-9)*30))),mPaint);
  13. }

9.绘制刻度值:

  1. //写时刻数字
  2. mPaint.setTextSize(26);
  3. mPaint.setStrokeWidth(2);
  4. mPaint.setColor(bordColor);
  5. canvas.drawText("12", circleX-timeLineB_W, bordWidth+timeLineB_H+30, mPaint);
  6. canvas.drawText("1", (float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(60)))-20,(float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(30)))+20, mPaint);
  7. canvas.drawText("2", (float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(30)))-20,(float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(60)))+20, mPaint);
  8. canvas.drawText("3", getWidth()-bordWidth-timeLineB_H-20, circleX+10, mPaint);
  9. canvas.drawText("4",(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(30)))-20,(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(60))), mPaint);
  10. canvas.drawText("5", (float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(60)))-15,(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(30)))-5, mPaint);
  11. canvas.drawText("6",circleX-10, getWidth()-bordWidth-timeLineB_H-10, mPaint);
  12. canvas.drawText("7", (float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(60))),(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(30)))-10, mPaint);
  13. canvas.drawText("8", (float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(30)))+10,(float)(circleX+(r-timeLineB_H)*Math.cos(Math.toRadians(60)))+5, mPaint);
  14. canvas.drawText("9", bordWidth+timeLineB_H+10, circleX+10, mPaint);
  15. canvas.drawText("10", (float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(30)))+10,(float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(60)))+20, mPaint);
  16. canvas.drawText("11", (float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(60))),(float)(circleX-(r-timeLineB_H)*Math.cos(Math.toRadians(30)))+25, mPaint);

在做的过程中会发现规律,就是每个大刻度(30度)即12点-1点,1点-2点......这之间所用的代码是相同的,只需要改变一下转动的角度值即可。秒针分为360,一次+6,转动一格为6度;分针分为60,在秒针到360时+1,转动一格为6度;时针分为12,在分针到60时+1,转动一格为30度;这也就是计算的时候有*1的,有*6的,有*30的原因,具体可以体会下代码中的算法,或者你有更好的算法欢迎分享出来!

demo下载地址:http://download.csdn.net/detail/baiyuliang2013/8668103

安卓自定义View实现钟表的更多相关文章

  1. 安卓自定义View教程目录

    基础篇 安卓自定义View基础 - 坐标系 安卓自定义View基础 - 角度弧度 安卓自定义View基础 - 颜色 进阶篇 安卓自定义View进阶 - 分类和流程 安卓自定义View进阶 - Canv ...

  2. 安卓自定义View进阶-Canvas之画布操作 转载

    安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...

  3. android自定义View之钟表诞生记

    很多筒子觉得自定义View是高手的象征,其实不然.大家觉得自定义View难很多情况下可能是因为自定义View涉及到了太多的类和API,把人搞得晕乎乎的,那么今天我们就从最简单的绘图API开始,带大家来 ...

  4. 安卓自定义View(一)自定义控件属性

    自定义View增加属性第一步:定义属性资源文件 在/res/values 文件夹下建立"Values XML layout",按照如下定义一个textview的属性 <?xm ...

  5. 安卓自定义View实现图片上传进度显示(仿QQ)

    首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看下图我们实现的效果: 实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方 ...

  6. 安卓自定义View实例-----跟随手指移动的鸟

    今天学习了一些安卓开发中的自定义布局,编写了简单一个实例,“跟随手指移动的鸟”,需要两张图片,背景图片和鸟的图片,鸟的图片可以在屏幕中跟随手指的移动而移动. 1.将两张图片导入到mipmap中: 2. ...

  7. 安卓自定义View基础 --坐标系,角度弧度,颜色

    转自:https://www.gcssloop.com/customview/CustomViewIndex/ 1.坐标系 2.角度弧度 3.颜色 一.屏幕坐标系和数学坐标系的区别 由于移动设备一般定 ...

  8. Android 自定义View合集

    自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/ ...

  9. Android自定义View之ProgressBar出场记

    关于自定义View,我们前面已经有三篇文章在介绍了,如果筒子们还没阅读,建议先看一下,分别是android自定义View之钟表诞生记.android自定义View之仿通讯录侧边栏滑动,实现A-Z字母检 ...

随机推荐

  1. codeforces 868C Qualification Rounds

    Snark and Philip are preparing the problemset for the upcoming pre-qualification round for semi-quar ...

  2. [SCOI2012]滑雪与时间胶囊

    题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着MMM条供滑行的轨道和NNN个轨道之间的交点(同时也是景点),而且每个景点都有一编号iii(1≤i≤N1 \le i \le N1≤i≤ ...

  3. 51 nod 1188 最大公约数之和 V2

    1188 最大公约数之和 V2 题目来源: UVA 基准时间限制:2 秒 空间限制:262144 KB 分值: 160 难度:6级算法题   给出一个数N,输出小于等于N的所有数,两两之间的最大公约数 ...

  4. POJ 3233 (矩阵)

    题意:对于矩阵A,求A^1 + ...... + A^k 按照矩阵十大经典题的思路大致做了下. 在k为奇数时:  A^( k / 2+1)+ 1) * (A^1 + ....... A^(k/2)) ...

  5. [bzoj1063][Noi2008]道路设计

    来自FallDream的博客,未经允许,请勿转载,谢谢. Z国坐落于遥远而又神奇的东方半岛上,在小Z的统治时代公路成为这里主要的交通手段.Z国共有n座城市,一些城市之间由双向的公路所连接.非常神奇的是 ...

  6. bzoj3675[Apio2014]序列分割 斜率优化dp

    3675: [Apio2014]序列分割 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 3508  Solved: 1402[Submit][Stat ...

  7. of_alias_get_id 函数与设备树中aliases节点的关系【转】

    转自:https://blog.csdn.net/qq_30145093/article/details/78053823?locationNum=10&fps=1 转自http://www. ...

  8. 某些情况下调用函数为什么要在函数名前加“(void)”

    我们知道,在定义函数时,加在函数名前的"void"表示该函数没有返回值.但在调用时,在函数名前加"(void)"的作用又是什么呢? 最明显的一点就是表示程序并不 ...

  9. Python中模块之re的功能介绍

    re模块的功能介绍 1. 方法 match 从开头开始查找 方法:re.match(pattern,string,flags=0) 返回值:<class '_sre.SRE_Match'> ...

  10. DCOM EXCE权限配置问题

    检索COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下错误: 80070005: 关于以上这个问题,博主在百度上 ...