Android指针时钟的实现代码

1. 最近写了个指针时钟的小程序，拿出来和大家分享一下。
2. 指针时钟控件实现：
3. 关键点：
4. 1、Android自定义控件实现
5. 2、Android自定义控件命名空间
6. 3、Android自定义控件从布局文件中获取参数，让自己的控件更具有灵活性、可用性
7. 4、Android图形绘制（点、线、圆和矩形）
8. 5、Android Handler消息机制
9. 主要思想：
10. 自定义一个控件，继承自View类，实现onMeasuredDimension()方法指定控件大小；实现onDraw()方法计算圆心和偏移角度，来绘制圆心、时针和分针。然后需要做的就是在布局文件中指定钟表背景图、长宽距圆心比例和缩放比例即可。
11. 一、 实现效果
12. 
16. 二、代码实现
17. public class HandClockView extends View implements Runnable {
18. private static final String NAMESPACE = "http://www.pro.dev.com/common";
19. private static final String CLOCK_FACE="colckFace";
20. private static final String HAND_CENTER_WIDTH_SCALE = "handCenterWidthScale";
21. private static final String HAND_CENTER_HEIGHT_SCALE = "handCenterHeightScale";
22. private static final String SCALE = "scale";
23. private static final String HOUR_HAND_SIZE = "hourHandSize";
24. private static final String MINUTE_HAND_SIZE = "minuteHandSize";
25. private Bitmap clockFace;
26. private int clockFaceId;
27. private float centerX;
28. private float centerY;
29. private float handCenterWidthScale;
30. private float handCenterHeightScale;
31. private float scale;
32. private int hourHandSize;
33. private int minuteHandSize;
34. private Handler handler = new Handler();

 

1. public HandClockView(Context context) {
2. super(context);
3. }
5. public HandClockView(Context context, AttributeSet attrs) {
6. super(context, attrs);
7. init(attrs);
8. }
10. public HandClockView(Context context, AttributeSet attrs, int defStyle) {
11. super(context, attrs, defStyle);
12. init(attrs);
13. }
15. private void init(AttributeSet attrs) {
16. clockFaceId = attrs.getAttributeResourceValue(NAMESPACE, CLOCK_FACE, 0);
17. Log.e("zhang.xiao", "clockFaceId=" + clockFaceId);
18. if (clockFaceId > 0) {
19. clockFace = BitmapFactory.decodeResource(getResources(), clockFaceId);
20. }
21. Log.e("zhang.xiao", "clockFace is null " + String.valueOf(clockFace == null));
22. handCenterWidthScale = attrs.getAttributeFloatValue(NAMESPACE, HAND_CENTER_WIDTH_SCALE, clockFace.getWidth() / 2);
23. handCenterHeightScale = attrs.getAttributeFloatValue(NAMESPACE, HAND_CENTER_HEIGHT_SCALE, clockFace.getHeight() / 2);
24. scale = attrs.getAttributeFloatValue(NAMESPACE, SCALE, 0);
25. hourHandSize = (int) (scale * attrs.getAttributeIntValue(NAMESPACE, HOUR_HAND_SIZE, 0));
26. minuteHandSize = (int) (scale * attrs.getAttributeIntValue(NAMESPACE, MINUTE_HAND_SIZE, 0));
27. }
30. @Override
31. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
32. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
33. setMeasuredDimension((int)(clockFace.getWidth() * scale), (int)(clockFace.getHeight() * scale));
34. }
36. @Override
37. public void run() {
38. invalidate();
39. handler.postDelayed(this, 60 * 1000);
40. }
42. @Override
43. protected void onDraw(Canvas canvas) {
44. super.onDraw(canvas);
46. Paint paint = new Paint();
47. Rect src = new Rect();
48. src.left = 0;
49. src.top = 0;
50. src.right = clockFace.getWidth();
51. src.bottom = clockFace.getHeight();
53. Rect target = new Rect();
54. target.left = 0;
55. target.top = 0;
56. target.right = (int) (src.right * scale);
57. target.bottom = (int) (src.bottom * scale);
59. canvas.drawBitmap(clockFace, src, target, paint);
61. centerX = clockFace.getWidth() * handCenterWidthScale * scale;
62. centerY = clockFace.getHeight() * handCenterHeightScale * scale;
64. canvas.drawCircle(centerX, centerY, 5, paint);
65. paint.setStrokeWidth(3);
67. Calendar cal = Calendar.getInstance();
68. int minute = cal.get(Calendar.MINUTE);
69. int hour = cal.get(Calendar.HOUR);
70. int second = cal.get(Calendar.SECOND);
71. Log.e("zhang.xiao", "hour=" + hour);
72. Log.e("zhang.xiao", "minute=" + minute);
73. double minuteRadian = Math.toRadians((360 - ((minute * 6) - 90)) % 360);
74. double hourRadian = Math.toRadians(((360 - ((hour * 30) - 90)) % 360) - (30 * minute / 60));
76. canvas.drawLine(centerX, centerY, (int) (centerX + minuteHandSize * Math.cos(minuteRadian)),
77. (int) (centerY - Math.sin(minuteRadian) * minuteHandSize), paint);
79. paint.setStrokeWidth(4);
80. canvas.drawLine(centerX, centerY, (int) (centerX + hourHandSize * Math.cos(hourRadian)),
81. (int) (centerY - Math.sin(hourRadian) * hourHandSize), paint);
82. handler.postDelayed(this, (60 - second) * 1000);
83. }
85. @Override
86. protected void onDetachedFromWindow() {
87. super.onDetachedFromWindow();
88. Log.e("zhang.xiao", "onDetachedFromWindow");
89.     }
90. }
91. 三、
92. 布局文件中使用<?xml version="1.0" encoding="utf-8"?>
93. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
94. xmlns:dev="http://www.pro.dev.com/common"
95.     android:orientation="vertical"
96.     android:layout_width="fill_parent"
97.     android:layout_height="fill_parent"
98.     >
99. <com.test.HandClockView
100.   android:layout_width="wrap_content"
101.   android:layout_height="wrap_content"
102.   dev:colckFace="@drawable/clock3"
103.   dev:handCenterWidthScale="0.5"
104.   dev:handCenterHeightScale="0.5"
105.   dev:scale="0.3"
106.   dev:hourHandSize="100"
107.   dev:minuteHandSize="178"
108.   >
110. </com.test.HandClockView>   
111. </LinearLayout>

标签说明：

dev：自定义控件命名空间

colckFace：钟表背景图

handCenterWidthScale：圆心和图宽缩放比例

handCenterHeightScale：圆心和图片高度缩放比例

scale：图片缩放比例

hourHandSize：时针长度

minuteHandSize：分钟长度 

时钟实现代码二：

前不久在网上看见Android实现的模拟时钟，感觉十分有意思，这里是地址：

极客学院http://www.eoeandroid.com/forum.php?mod=viewthread&tid=58324可惜的是这种方式没有秒表。笔者突然对其有了兴趣，也想去实现以下自己的模拟时钟。折腾了一阵子总算是弄出来了现在将实现方式共享出来，大家一些交流。不多说，先上效果图：

 

 

准备工作

首先我们应该准备相关的素材：时钟盘、时针、分针、秒针图片.

时钟盘：

       

 

时针：

            

 

分针：

           

 

秒针：    

           

 

源码部分

配置文件，比较简单：                    

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical"  
6.     tools:context=".MainActivity"  
7.     android:background="@color/bg">  
8.   
9.     <com.kiritor.mymodelclock.MyQAnalogClock  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_gravity="center"   />  
13. </LinearLayout>  

       MyQAnalogClock代码：用于构造时钟view以及其刷新显示：

1. package com.kiritor.mymodelclock;  
2.   
3. import android.util.AttributeSet;  
4. import com.kiritor.mymodelclock.R;  
5. import android.content.Context;  
6. import android.graphics.*;  
7. import android.graphics.drawable.BitmapDrawable;  
8. import android.os.Handler;  
9. import android.view.View;  
10. import java.util.Calendar;  
11. import java.util.TimeZone;  
12. /**
13.  * Created by Kiritor on 13-5-30.
14.  */  
15. public class MyQAnalogClock extends View {  
16.     //时钟盘，分针、秒针、时针对象  
17.   
18.     Bitmap mBmpDial;  
19.     Bitmap mBmpHour;  
20.     Bitmap mBmpMinute;  
21.     Bitmap mBmpSecond;  
22.   
23.     BitmapDrawable bmdHour;  
24.     BitmapDrawable bmdMinute;  
25.     BitmapDrawable bmdSecond;  
26.     BitmapDrawable bmdDial;  
27.   
28.     Paint mPaint;  
29.   
30.     Handler tickHandler;  
31.   
32.     int mWidth;  
33.     int mHeigh;  
34.     int mTempWidth = bmdSecond.getIntrinsicWidth();  
35.     int mTempHeigh;  
36.     int centerX;  
37.     int centerY;  
38.   
39.     int availableWidth = 100;  
40.     int availableHeight = 100;  
41.   
42.     private String sTimeZoneString;  
43.   
44.   
45.     public MyQAnalogClock(Context context,AttributeSet attr)  
46.     {  
47.        this(context,"GMT+8：00");  
48.   
49.     }  
50.     public MyQAnalogClock(Context context, String sTime_Zone) {  
51.         super(context);  
52.         sTimeZoneString = sTime_Zone;  

1.         mBmpHour = BitmapFactory.decodeResource(getResources(),  
2.                 R.drawable.shizhen);  
3.         bmdHour = new BitmapDrawable(mBmpHour);
4.    
5.         mBmpMinute = BitmapFactory.decodeResource(getResources(),  

                R.drawable.fenzhen);  

1.         bmdMinute = new BitmapDrawable(mBmpMinute);
3.         mBmpSecond = BitmapFactory.decodeResource(getResources(),  
4.                 R.drawable.miaozhen);  
5.         bmdSecond = new BitmapDrawable(mBmpSecond);  
6.   
7.         mBmpDial = BitmapFactory.decodeResource(getResources(),  
8.                 R.drawable.android_clock_dial);  
9.         bmdDial = new BitmapDrawable(mBmpDial);  
10.         mWidth = mBmpDial.getWidth();  
11.         mHeigh = mBmpDial.getHeight();  
12.         centerX = availableWidth / 2;  
13.         centerY = availableHeight / 2;  
14.   
15.         mPaint = new Paint();  
16.         mPaint.setColor(Color.BLUE);  
17.         run();  
18.     }  
19.   
20.     public void run() {  
21.         tickHandler = new Handler();  
22.         tickHandler.post(tickRunnable);  
23.     }  
24.   
25.     private Runnable tickRunnable = new Runnable() {  
26.         public void run() {  
27.             postInvalidate();  
28.             tickHandler.postDelayed(tickRunnable, 1000);  
29.         }  
30.     };  
31.   
32.     protected void onDraw(Canvas canvas) {  
33.         super.onDraw(canvas);  
34.   
35.         Calendar cal = Calendar.getInstance(TimeZone  
36.                 .getTimeZone(sTimeZoneString));  
37.         int hour = cal.get(Calendar.HOUR);  
38.         int minute = cal.get(Calendar.MINUTE);  
39.         int second = cal.get(Calendar.SECOND);  
40.         float hourRotate = hour * 30.0f + minute / 60.0f * 30.0f;  
41.         float minuteRotate = minute * 6.0f;  
42.         float secondRotate = second * 6.0f;  
43.   
44.         boolean scaled = false;  
45.   
46.         if (availableWidth < mWidth || availableHeight < mHeigh) {  
47.             scaled = true;  
48.             float scale = Math.min((float) availableWidth / (float) mWidth,  
49.                     (float) availableHeight / (float) mHeigh);  
50.             canvas.save();  
51.             canvas.scale(scale, scale, centerX, centerY);  
52.         }  
53.   
54.         bmdDial.setBounds(centerX - (mWidth / 2), centerY - (mHeigh / 2),  
55.                 centerX + (mWidth / 2), centerY + (mHeigh / 2));  
56.         bmdDial.draw(canvas);  
57.   
58.         mTempWidth = bmdHour.getIntrinsicWidth();  
59.         mTempHeigh = bmdHour.getIntrinsicHeight();  
60.         canvas.save();  
61.         canvas.rotate(hourRotate, centerX, centerY);  
62.         bmdHour.setBounds(centerX - (mTempWidth / 2), centerY  
63.                 - (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY  
64.                 + (mTempHeigh / 2));  
65.         bmdHour.draw(canvas);  
66.   
67.         canvas.restore();  
68.   
69.         mTempWidth = bmdMinute.getIntrinsicWidth();  
70.         mTempHeigh = bmdMinute.getIntrinsicHeight();  
71.         canvas.save();  
72.         canvas.rotate(minuteRotate, centerX, centerY);  
73.         bmdMinute.setBounds(centerX - (mTempWidth / 2), centerY  
74.                 - (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY  
75.                 + (mTempHeigh / 2));  
76.         bmdMinute.draw(canvas);  
77.   
78.         canvas.restore();  
79.   
80.         mTempWidth = bmdSecond.getIntrinsicWidth();  
81.         mTempHeigh = bmdSecond.getIntrinsicHeight();  
82.         canvas.rotate(secondRotate, centerX, centerY);  
83.         bmdSecond.setBounds(centerX - (mTempWidth / 2), centerY  
84.                 - (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY  
85.                 + (mTempHeigh / 2));  
86.         bmdSecond.draw(canvas);  
87.   
88.         if (scaled) {  
89.             canvas.restore();  
90.         }  
91.     }  
92. }  

     主Activity：

1. package com.kiritor.mymodelclock;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5.   
6. /**
7.  * Created by Kiritor on 13-5-30.
8.  */  
9. public class MainActivity extends Activity {  
10.     public void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.         setContentView(R.layout.activity_main);  
13.     }  
14. }  

好了一个简单的模拟时钟就完成了，不过通过观察运行效果可以看出的是，笔者对           时针、分针、秒针图片的设计不是太美观，看的不是太清楚，体验略差。不过这不是重点，读者可以自己去设计一下那4张图片，从而做出不同的效果!这里本实例使用Android Studio做的，完整项目源码就不上传了!Over！