Android之场景桌面(二)----模拟时钟实现

之前关于场景桌面Android之场景桌面(一)作了一个大概的描述，总体实现比较简单。今天跟大家分享一下一个自定义View ----模拟时钟的具体实现，先来看看效果图吧，单独提取出来的，相比场景桌面中的模拟时钟，多加了一个秒针、多显示了日期和星期。在场景桌面中，为了桌面的整体效率，就忍痛割爱，把秒针去掉了，因为一秒刷新一次界面实在是有点没必要，而且还比较影响桌面的流畅性。这里仅是一个简单的例子，加上亦无伤大雅。

关于自定义View，不得不说说几个经常使用的函数了：

①.三个构造器：需要特别注意的一点是：这里在有三个参数的构造器里面做了所有的初始化工作，因此，另外两个构造器必须直接或间接的调用最后一个构造器，比如，在单个参数的构造器中调用this(context, null);即调用双参数的构造，再在双参数构造器中调用this(context, attrs, 0);最后实际上调用的第三个构造器。

另外，我们来详细分析一下第三个构造器，主要是自定义属性attrs。

[java] view plaincopy

1. public AnalogClock(Context context, AttributeSet attrs, int defStyle) {  
2.         super(context, attrs, defStyle);  
3.         Resources r = getContext().getResources();  
4.         // 下面是从layout文件中读取所使用的图片资源，如果没有则使用默认的  
5.         TypedArray a = context.obtainStyledAttributes(attrs,  
6.                 R.styleable.AnalogClock, defStyle, 0);  
7.         mDial = a.getDrawable(R.styleable.AnalogClock_dial);  
8.         mHourHand = a.getDrawable(R.styleable.AnalogClock_hand_hour);  
9.         mMinuteHand = a.getDrawable(R.styleable.AnalogClock_hand_minute);  
10.         mSecondHand = a.getDrawable(R.styleable.AnalogClock_hand_second);  
11.   
12.         // 为了整体美观性，只要缺少一张图片，我们就用默认的那套图片  
13.         if (mDial == null || mHourHand == null || mMinuteHand == null  
14.                 || mSecondHand == null) {  
15.             mDial = r.getDrawable(R.drawable.appwidget_clock_dial);  
16.             mHourHand = r.getDrawable(R.drawable.appwidget_clock_hour);  
17.             mMinuteHand = r.getDrawable(R.drawable.appwidget_clock_minute);  
18.             mSecondHand = r.getDrawable(R.drawable.appwidget_clock_second);  
19.         }  
20.         a.recycle();// 不调用这个函数，则上面的都是白费功夫  
21.   
22.         // 获取表盘的宽度和高度  
23.         mDialWidth = mDial.getIntrinsicWidth();  
24.         mDialHeight = mDial.getIntrinsicHeight();  
25.   
26.         // 初始化画笔  
27.         mPaint = new Paint();  
28.         mPaint.setColor(Color.parseColor("#3399ff"));  
29.         mPaint.setTypeface(Typeface.DEFAULT_BOLD);  
30.         mPaint.setFakeBoldText(true);  
31.         mPaint.setAntiAlias(true);  
32.   
33.         // 初始化Time对象  
34.         if (mCalendar == null) {  
35.             mCalendar = new Time();  
36.         }  
37.     }  

大家都知道，我们在layout中放一个TextView时，可以在布局中使用的 android:text="" 等属性，但我们又知道，这些属性是Android自带的，都是以android:打头的，其实，我们可以自定义一些属性，比如说这个模拟时钟，他有表盘、时针、分针、秒针等图片资源，如果我们通过自定义这些属性，就可以动态的更换一整套皮肤了，灵活性更大，下面是具体步骤：

首先，我们需要在res/values目录下新建一个attrs.xml文件，然后在其中声明我们需要自定义的属性，例如：

[html] view plaincopy

1. <declare-styleable name="AnalogClock">  
2.     <attr name="dial" format="reference" />  
3.     <attr name="hand_hour" format="reference" />  
4.     <attr name="hand_minute" format="reference" />  
5.     <attr name="hand_second" format="reference" />  
6. </declare-styleable>  

其次，在上述3参数的构造器中读取这些参数值：

[java] view plaincopy

1. // 下面是从layout文件中读取所使用的图片资源，如果没有则使用默认的  
2. TypedArray a = context.obtainStyledAttributes(attrs,  
3.         R.styleable.AnalogClock, defStyle, 0);  
4. mDial = a.getDrawable(R.styleable.AnalogClock_dial);  
5. mHourHand = a.getDrawable(R.styleable.AnalogClock_hand_hour);  
6. mMinuteHand = a.getDrawable(R.styleable.AnalogClock_hand_minute);  
7. mSecondHand = a.getDrawable(R.styleable.AnalogClock_hand_second);  
8. a.recycle();// 不调用这个函数，则上面的都是白费功夫  

最后，就是给我们声明的这些属性赋值了，有两种方法，类似TextView，可以在layout中，也可以在style中，比如我这里就是在style中做的，

总共有两套图片资源，使用起来灵活性更高。

[html] view plaincopy

1. <!--first style -->  
2.    <style name="AppWidget">  
3.        <item name="dial">@drawable/appwidget_clock_dial</item>  
4.        <item name="hand_hour">@drawable/appwidget_clock_hour</item>  
5.        <item name="hand_minute">@drawable/appwidget_clock_minute</item>  
6.        <item name="hand_second">@drawable/appwidget_clock_second</item>  
7.    </style>  
8. <!-- second style -->  
9.    <style name="AppWidget2">  
10.        <item name="dial">@drawable/appwidget_clock_dial2</item>  
11.        <item name="hand_hour">@drawable/appwidget_clock_hour2</item>  
12.        <item name="hand_minute">@drawable/appwidget_clock_minute2</item>  
13.        <item name="hand_second">@drawable/appwidget_clock_second2</item>  
14.    </style>  

最最后是在layout中引用该style了：

[html] view plaincopy

1. <com.way.clock.AnalogClock xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:clock="http://schemas.android.com/apk/res-auto"  
3.     android:id="@+id/analog_appwidget"  
4.     style="@style/AppWidget2"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent" />  

②.onMeasure：onMeasure方法在控件的父元素正要放置它的子控件时调用，它会问一个问题：“你想要用多大地方啊？”，然后传入两个参数——widthMeasureSpec和heightMeasureSpec。它们指明控件可获得的空间以及关于这个空间描述的元数据。比返回一个结果要好的方法是你传递View的高度和宽度到setMeasuredDimension方法里。

边界参数——widthMeasureSpec和heightMeasureSpec ，效率的原因以整数的方式传入。

 MeasureSpec这个类封装了父布局传递给子布局的布局要求，每个MeasureSpec代表了一组宽度和高度的要求。一个MeasureSpec由大小和模式组成。它有三种模式：

UNSPECIFIED(未指定),     父元素不对自元素施加任何束缚，子元素可以得到任意想要的大小；

        EXACTLY(完全)，父元素决定自元素的确切大小，子元素将被限定在给定的边界里而忽略它本身大小；

        AT_MOST(至多)，子元素至多达到指定大小的值。

   它常用的三个函数：

　　static int getMode(int measureSpec):根据提供的测量值(格式)提取模式(上述三个模式之一)

　　static int getSize(int measureSpec):根据提供的测量值(格式)提取大小值(这个大小也就是我们通常所说的大小)

　　static int makeMeasureSpec(int size,int mode):根据提供的大小值和模式创建一个测量值(格式)

这个类的使用呢，通常在view组件的onMeasure方法里面调用但也有少数例外(这里不多说例外情况)，在它们使用之前，首先要做的是使用MeasureSpec类的静态方法getMode和getSize来译解，如下面的片段所示：

int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);

依据specMode的值，如果是AT_MOST，specSize 代表的是最大可获得的空间；如果是EXACTLY，specSize 代表的是精确的尺寸；如果是UNSPECIFIED，对于控件尺寸来说，没有任何参考意义。
　　当以EXACT方式标记测量尺寸，父元素会坚持在一个指定的精确尺寸区域放置View。在父元素问子元素要多大空间时，AT_MOST指示者会说给我最大的范围。在很多情况下，你得到的值都是相同的。
　　在两种情况下，你必须绝对的处理这些限制。在一些情况下，它可能会返回超出这些限制的尺寸，在这种情况下，你可以让父元素选择如何对待超出的View，使用裁剪还是滚动等技术。

我这个模拟时钟View的处理方式就是： 如果模式不是UNSPECIFIED，并且父元素提供的宽度比图片宽度小，就需要压缩一下子元素的宽度。

③.onDraw：很大一部分自定义View都需要实现这个函数，很多Android自带的空间满足不了我们需求的时候，我们就得自己来画这个控件，比如这个模拟时钟，我们是一层一层画上去的，首先在三个构造器函数中作一些初始化工作，获取所有的图片资源，然后通过onMeasure函数计算该控件所占的位置，最后再调用onDraw函数将所以图片根据当前时间画在View上，从而实现一个满足我们需求的自定义控件。

从上面截图，我们可以发现，最先画上去的肯定是表盘，因为他必须显示在最底层，紧接着我们把日期和星期画在表盘上，最后一次画时针、分针、秒针，然后通过注册一个线程，每一秒更新一次，即调用一次onDraw函数，从而实现秒针时时在动的效果。

值得一提的是，画时针、分针和秒针的时候，经常调用canvas.restore();和canvas.save();它们到底是干什么用的呢？

save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。

restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error。

我们看看下面这段代码，在画分针之前，我们先调用save函数，把之前所作的操作保存起来，因为我们紧接着要调用canvas.rotate(mMinutes / 60.0f * 360.0f, x, y);把画板旋转一定角度来画分针，调用minuteHand.draw(canvas);将分针画在画板之后，我们需要canvas.restore();来释放画板，因为我们之前不是旋转此画板嘛，释放之后才能将画板还原到旋转之前状态，再执行画秒针的操作。

[java] view plaincopy

1. canvas.save();  
2. // 然后画分针  
3. canvas.rotate(mMinutes / 60.0f * 360.0f, x, y);  
4. final Drawable minuteHand = mMinuteHand;  
5. if (changed) {  
6.     w = minuteHand.getIntrinsicWidth();  
7.     h = minuteHand.getIntrinsicHeight();  
8.     minuteHand.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y  
9.             + (h / 2));  
10. }  
11. minuteHand.draw(canvas);  
12. canvas.restore();  

OK，分步分析就到这里了，下面是完整的自定义View代码，注释什么的算比较详细吧，完整工程代码就不分享出来了，可以去下载我那个场景UI提取，多谢合作！

[java] view plaincopy

1. /** 
2.  *  
3.  * This widget display an analogic clock with three hands for hours minutes and 
4.  * seconds. 
5.  *  
6.  * @author way 
7.  */  
8. @SuppressLint("NewApi")  
9. public class AnalogClock extends View {  
10.     private Time mCalendar;  
11.   
12.     private Drawable mHourHand;// 时针  
13.     private Drawable mMinuteHand;// 分针  
14.     private Drawable mSecondHand;// 秒针  
15.     private Drawable mDial;// 表盘  
16.   
17.     private String mDay;// 日期  
18.     private String mWeek;// 星期  
19.   
20.     private int mDialWidth;// 表盘宽度  
21.     private int mDialHeight;// 表盘高度  
22.   
23.     private final Handler mHandler = new Handler();  
24.     private float mHour;// 时针值  
25.     private float mMinutes;// 分针之  
26.     private float mSecond;// 秒针值  
27.     private boolean mChanged;// 是否需要更新界面  
28.   
29.     private Paint mPaint;// 画笔  
30.   
31.     private Runnable mTicker;// 由于秒针的存在，因此我们需要每秒钟都刷新一次界面，用的就是此任务  
32.   
33.     private boolean mTickerStopped = false;// 是否停止更新时间，当View从窗口中分离时，不需要更新时间了  
34.   
35.     public AnalogClock(Context context) {  
36.         this(context, null);  
37.     }  
38.   
39.     public AnalogClock(Context context, AttributeSet attrs) {  
40.         this(context, attrs, 0);  
41.     }  
42.   
43.     public AnalogClock(Context context, AttributeSet attrs, int defStyle) {  
44.         super(context, attrs, defStyle);  
45.         Resources r = getContext().getResources();  
46.         // 下面是从layout文件中读取所使用的图片资源，如果没有则使用默认的  
47.         TypedArray a = context.obtainStyledAttributes(attrs,  
48.                 R.styleable.AnalogClock, defStyle, 0);  
49.         mDial = a.getDrawable(R.styleable.AnalogClock_dial);  
50.         mHourHand = a.getDrawable(R.styleable.AnalogClock_hand_hour);  
51.         mMinuteHand = a.getDrawable(R.styleable.AnalogClock_hand_minute);  
52.         mSecondHand = a.getDrawable(R.styleable.AnalogClock_hand_second);  
53.   
54.         // 为了整体美观性，只要缺少一张图片，我们就用默认的那套图片  
55.         if (mDial == null || mHourHand == null || mMinuteHand == null  
56.                 || mSecondHand == null) {  
57.             mDial = r.getDrawable(R.drawable.appwidget_clock_dial);  
58.             mHourHand = r.getDrawable(R.drawable.appwidget_clock_hour);  
59.             mMinuteHand = r.getDrawable(R.drawable.appwidget_clock_minute);  
60.             mSecondHand = r.getDrawable(R.drawable.appwidget_clock_second);  
61.         }  
62.         a.recycle();// 不调用这个函数，则上面的都是白费功夫  
63.   
64.         // 获取表盘的宽度和高度  
65.         mDialWidth = mDial.getIntrinsicWidth();  
66.         mDialHeight = mDial.getIntrinsicHeight();  
67.   
68.         // 初始化画笔  
69.         mPaint = new Paint();  
70.         mPaint.setColor(Color.parseColor("#3399ff"));  
71.         mPaint.setTypeface(Typeface.DEFAULT_BOLD);  
72.         mPaint.setFakeBoldText(true);  
73.         mPaint.setAntiAlias(true);  
74.   
75.         // 初始化Time对象  
76.         if (mCalendar == null) {  
77.             mCalendar = new Time();  
78.         }  
79.     }  
80.   
81.     /** 
82.      * 时间改变时调用此函数，来更新界面的绘制 
83.      */  
84.     private void onTimeChanged() {  
85.         mCalendar.setToNow();// 时间设置为当前时间  
86.         // 下面是获取时、分、秒、日期和星期  
87.         int hour = mCalendar.hour;  
88.         int minute = mCalendar.minute;  
89.         int second = mCalendar.second;  
90.         mDay = String.valueOf(mCalendar.year) + "-"  
91.                 + String.valueOf(mCalendar.month + 1) + "-"  
92.                 + String.valueOf(mCalendar.monthDay);  
93.         mWeek = this.getWeek(mCalendar.weekDay);  
94.   
95.         mHour = hour + mMinutes / 60.0f + mSecond / 3600.0f;// 小时值，加上分和秒，效果会更加逼真  
96.         mMinutes = minute + second / 60.0f;// 分钟值，加上秒，也是为了使效果逼真  
97.         mSecond = second;  
98.   
99.         mChanged = true;// 此时需要更新界面了  
100.   
101.         updateContentDescription(mCalendar);// 作为一种辅助功能提供,为一些没有文字描述的View提供说明  
102.     }  
103.   
104.     @Override  
105.     protected void onAttachedToWindow() {  
106.         mTickerStopped = false;// 添加到窗口中就要更新时间了  
107.         super.onAttachedToWindow();  
108.   
109.         /** 
110.          * requests a tick on the next hard-second boundary 
111.          */  
112.         mTicker = new Runnable() {  
113.             public void run() {  
114.                 if (mTickerStopped)  
115.                     return;  
116.                 onTimeChanged();  
117.                 invalidate();  
118.                 long now = SystemClock.uptimeMillis();  
119.                 long next = now + (1000 - now % 1000);// 计算下次需要更新的时间间隔  
120.                 mHandler.postAtTime(mTicker, next);// 递归执行，就达到秒针一直在动的效果  
121.             }  
122.         };  
123.         mTicker.run();  
124.     }  
125.   
126.     @Override  
127.     protected void onDetachedFromWindow() {  
128.         super.onDetachedFromWindow();  
129.         mTickerStopped = true;// 当view从当前窗口中移除时，停止更新  
130.     }  
131.   
132.     @Override  
133.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
134.         // 模式： UNSPECIFIED(未指定),父元素不对子元素施加任何束缚，子元素可以得到任意想要的大小；  
135.         // EXACTLY(完全)，父元素决定自元素的确切大小，子元素将被限定在给定的边界里而忽略它本身大小；  
136.         // AT_MOST(至多)，子元素至多达到指定大小的值。  
137.         // 根据提供的测量值(格式)提取模式(上述三个模式之一)  
138.         int widthMode = MeasureSpec.getMode(widthMeasureSpec);  
139.         // 根据提供的测量值(格式)提取大小值(这个大小也就是我们通常所说的大小)  
140.         int widthSize = MeasureSpec.getSize(widthMeasureSpec);  
141.         // 高度与宽度类似  
142.         int heightMode = MeasureSpec.getMode(heightMeasureSpec);  
143.         int heightSize = MeasureSpec.getSize(heightMeasureSpec);  
144.   
145.         float hScale = 1.0f;// 缩放值  
146.         float vScale = 1.0f;  
147.   
148.         if (widthMode != MeasureSpec.UNSPECIFIED && widthSize < mDialWidth) {  
149.             hScale = (float) widthSize / (float) mDialWidth;// 如果父元素提供的宽度比图片宽度小，就需要压缩一下子元素的宽度  
150.         }  
151.   
152.         if (heightMode != MeasureSpec.UNSPECIFIED && heightSize < mDialHeight) {  
153.             vScale = (float) heightSize / (float) mDialHeight;// 同上  
154.         }  
155.   
156.         float scale = Math.min(hScale, vScale);// 取最小的压缩值，值越小，压缩越厉害  
157.         // 最后保存一下，这个函数一定要调用  
158.         setMeasuredDimension(  
159.                 resolveSizeAndState((int) (mDialWidth * scale),  
160.                         widthMeasureSpec, 0),  
161.                 resolveSizeAndState((int) (mDialHeight * scale),  
162.                         heightMeasureSpec, 0));  
163.     }  
164.   
165.     @Override  
166.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
167.         super.onSizeChanged(w, h, oldw, oldh);  
168.         mChanged = true;  
169.     }  
170.   
171.     @Override  
172.     protected void onDraw(Canvas canvas) {  
173.         super.onDraw(canvas);  
174.   
175.         boolean changed = mChanged;  
176.   
177.         if (changed) {  
178.             mChanged = false;  
179.         }  
180.   
181.         int availableWidth = getRight() - getLeft();// view可用宽度，通过右坐标减去左坐标  
182.         int availableHeight = getBottom() - getTop();// view可用高度，通过下坐标减去上坐标  
183.   
184.         int x = availableWidth / 2;// view宽度中心点坐标  
185.         int y = availableHeight / 2;// view高度中心点坐标  
186.   
187.         final Drawable dial = mDial;// 表盘图片  
188.         int w = dial.getIntrinsicWidth();// 表盘宽度  
189.         int h = dial.getIntrinsicHeight();  
190.   
191.         // int dialWidth = w;  
192.         int dialHeight = h;  
193.         boolean scaled = false;  
194.         // 最先画表盘，最底层的要先画上画板  
195.         if (availableWidth < w || availableHeight < h) {// 如果view的可用宽高小于表盘图片，就要缩小图片  
196.             scaled = true;  
197.             float scale = Math.min((float) availableWidth / (float) w,  
198.                     (float) availableHeight / (float) h);// 计算缩小值  
199.             canvas.save();  
200.             canvas.scale(scale, scale, x, y);// 实际上是缩小的画板  
201.         }  
202.   
203.         if (changed) {// 设置表盘图片位置。组件在容器X轴上的起点； 组件在容器Y轴上的起点； 组件的宽度；组件的高度  
204.             dial.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));  
205.         }  
206.         dial.draw(canvas);// 这里才是真正把表盘图片画在画板上  
207.         canvas.save();// 一定要保存一下  
208.         // 其次画日期  
209.         if (changed) {  
210.             w = (int) (mPaint.measureText(mWeek));// 计算文字的宽度  
211.             canvas.drawText(mWeek, (x - w / 2), y - (dialHeight / 8), mPaint);// 画文字在画板上，位置为中间两个参数  
212.             w = (int) (mPaint.measureText(mDay));  
213.             canvas.drawText(mDay, (x - w / 2), y + (dialHeight / 8), mPaint);// 同上  
214.         }  
215.         // 再画时针  
216.         canvas.rotate(mHour / 12.0f * 360.0f, x, y);// 旋转画板，第一个参数为旋转角度，第二、三个参数为旋转坐标点  
217.         final Drawable hourHand = mHourHand;  
218.         if (changed) {  
219.             w = hourHand.getIntrinsicWidth();  
220.             h = hourHand.getIntrinsicHeight();  
221.             hourHand.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y  
222.                     + (h / 2));  
223.         }  
224.         hourHand.draw(canvas);// 把时针画在画板上  
225.         canvas.restore();// 恢复画板到最初状态  
226.   
227.         canvas.save();  
228.         // 然后画分针  
229.         canvas.rotate(mMinutes / 60.0f * 360.0f, x, y);  
230.         final Drawable minuteHand = mMinuteHand;  
231.         if (changed) {  
232.             w = minuteHand.getIntrinsicWidth();  
233.             h = minuteHand.getIntrinsicHeight();  
234.             minuteHand.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y  
235.                     + (h / 2));  
236.         }  
237.         minuteHand.draw(canvas);  
238.         canvas.restore();  
239.   
240.         canvas.save();  
241.         // 最后画秒针  
242.         canvas.rotate(mSecond / 60.0f * 360.0f, x, y);  
243.         final Drawable secondHand = mSecondHand;  
244.         if (changed) {  
245.             w = secondHand.getIntrinsicWidth();  
246.             h = secondHand.getIntrinsicHeight();  
247.             secondHand.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y  
248.                     + (h / 2));  
249.         }  
250.         secondHand.draw(canvas);  
251.         canvas.restore();  
252.   
253.         if (scaled) {  
254.             canvas.restore();  
255.         }  
256.     }  
257.   
258.     /** 
259.      * 对这个view描述一下， 
260.      *  
261.      * @param time 
262.      */  
263.     private void updateContentDescription(Time time) {  
264.         final int flags = DateUtils.FORMAT_SHOW_TIME | DateUtils.FORMAT_24HOUR;  
265.         String contentDescription = DateUtils.formatDateTime(getContext(),  
266.                 time.toMillis(false), flags);  
267.         setContentDescription(contentDescription);  
268.     }  
269.   
270.     /** 
271.      * 获取当前星期 
272.      *  
273.      * @param week 
274.      * @return 
275.      */  
276.     private String getWeek(int week) {  
277.         switch (week) {  
278.         case 1:  
279.             return this.getContext().getString(R.string.monday);  
280.         case 2:  
281.             return this.getContext().getString(R.string.tuesday);  
282.         case 3:  
283.             return this.getContext().getString(R.string.wednesday);  
284.         case 4:  
285.             return this.getContext().getString(R.string.thursday);  
286.         case 5:  
287.             return this.getContext().getString(R.string.friday);  
288.         case 6:  
289.             return this.getContext().getString(R.string.saturday);  
290.         case 0:  
291.             return this.getContext().getString(R.string.sunday);  
292.         default:  
293.             return "";  
294.         }  
295.     }  
296.   
297. }