Android实战简易教程<六十五>（自定义控件实现数字液晶时钟Demo）

下面我们研究一下如何实现一个数字液晶时钟，本质属于特效一种哈。
首先创建一个布局文件：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.       <TextView    
6.         android:id ="@+id/ledview_clock_time"    
7.         android:layout_width ="wrap_content"    
8.         android:layout_height ="wrap_content"    
9.         android:layout_centerInParent="true"  
10.         android:shadowColor ="#00ff00"    
11.         android:shadowDx ="0"    
12.         android:shadowDy ="0"    
13.         android:shadowRadius ="10"    
14.         android:textColor ="#00ff00"    
15.         android:textSize ="80sp" />    
16.           
17.     <TextView  
18.         android:id ="@+id/ledview_clock_bg"     
19.         android:layout_width="wrap_content"    
20.         android:layout_height="wrap_content"    
21.         android:layout_centerInParent="true"  
22.         android:layout_gravity="center"    
23.         android:text="@string/default_time"    
24.         android:textColor="#3300ff00"    
25.         android:textSize="80sp" />    
26.     
27.   
28. </RelativeLayout>  

对于阴影的几个属性我们引用一下别人博客里的内容：（http://blog.csdn.net/whoispo/article/details/8061907）
Android的TextView的XML属性中有关于阴影的几条属性
shadowDX、shadowDy、shadowRadius，说明分别是阴影的横、纵坐标偏移，以及阴影的半径，这个不太好理解。一下的图可以实际说明这些的参数的内容。
shadowDx,shadowDy从下面三幅图可以看出是是什么
DX=20,Dy=0

DX=0,DY=20

DX=20,DY=20

shadowRadius可以从下面三幅图看出是什么
R=3

R=10

R=40

通过这些效果可以直观的看出每个属性的含义。
下面自定义一个控件：

[java]  view plain copy

1. package com.yayun.leddemo;  
2.   
3. import java.io.File;  
4. import java.util.Calendar;  
5. import java.util.Date;  
6. import java.util.TimeZone;  
7.   
8. import android.annotation.SuppressLint;  
9. import android.content.Context;  
10. import android.content.res.AssetManager;  
11. import android.graphics.Typeface;  
12. import android.os.Handler;  
13. import android.util.AttributeSet;  
14. import android.view.LayoutInflater;  
15. import android.view.View;  
16. import android.widget.LinearLayout;  
17. import android.widget.TextView;  
18.   
19. public class LEDView extends LinearLayout {  
20.   
21.     private TextView timeView;  
22.     private TextView bgView;  
23.     private static final String FONT_DIGITAL_7 = "fonts" + File.separator  
24.             + "digital-7.ttf";//字体  
25.   
26.     private static final String DATE_FORMAT = "%02d:%02d:%02d";//日期格式  
27.     private static final int REFRESH_DELAY = 500;//刷新延迟  
28.   
29.     private final Handler mHandler = new Handler();  
30.     private final Runnable mTimeRefresher = new Runnable() {  
31.   
32.         @Override  
33.         public void run() {  
34.             Calendar calendar = Calendar.getInstance(TimeZone  
35.                     .getTimeZone("GMT+8"));//时区  
36.             final Date d = new Date();  
37.             calendar.setTime(d);  
38.   
39.             timeView.setText(String.format(DATE_FORMAT,  
40.                     calendar.get(Calendar.HOUR), calendar.get(Calendar.MINUTE),  
41.                     calendar.get(Calendar.SECOND)));  
42.             mHandler.postDelayed(this, REFRESH_DELAY);  
43.         }  
44.     };  
45.   
46.     @SuppressLint("NewApi")  
47.     public LEDView(Context context, AttributeSet attrs, int defStyle) {  
48.         super(context, attrs, defStyle);  
49.         init(context);  
50.     }  
51.   
52.     public LEDView(Context context, AttributeSet attrs) {  
53.         super(context, attrs);  
54.         init(context);  
55.     }  
56.   
57.     public LEDView(Context context) {  
58.         super(context);  
59.         init(context);  
60.     }  
61.   
62.     private void init(Context context) {  
63.         LayoutInflater layoutInflater = LayoutInflater.from(context);  
64.   
65.         View view = layoutInflater.inflate(R.layout.ledview, this);  
66.         timeView = (TextView) view.findViewById(R.id.ledview_clock_time);  
67.         bgView = (TextView) view.findViewById(R.id.ledview_clock_bg);  
68.         AssetManager assets = context.getAssets();//字体管家类  
69.         final Typeface font = Typeface.createFromAsset(assets, FONT_DIGITAL_7);  
70.         timeView.setTypeface(font);// 设置字体  
71.         bgView.setTypeface(font);  
72.   
73.     }  
74.   
75.     public void start() {  
76.         mHandler.post(mTimeRefresher);  
77.     }  
78.   
79.     public void stop() {  
80.         mHandler.removeCallbacks(mTimeRefresher);  
81.     }  
82. }  

新建一个Activity调用这个控件：

[html]  view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context=".LEDActivity"  
6.     android:background="@color/black" >  
7.   
8.    <com.yayun.leddemo.LEDView   
9.         android:id="@+id/ledview"  
10.         android:layout_width="wrap_content"    
11.         android:layout_height="wrap_content"    
12.         android:layout_centerInParent="true"  
13.         android:layout_gravity="center"  />    
14.   
15. </RelativeLayout>  

[java]  view plain copy

1. package com.yayun.leddemo;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.annotation.TargetApi;  
5. import android.app.ActionBar;  
6. import android.app.Activity;  
7. import android.os.Build;  
8. import android.os.Bundle;  
9. import android.view.Menu;  
10.   
11. @TargetApi(Build.VERSION_CODES.HONEYCOMB)  
12. public class LEDActivity extends Activity {  
13.   
14.     private LEDView ledView;  
15.   
16.     @SuppressLint("NewApi")  
17.     @Override  
18.     protected void onCreate(Bundle savedInstanceState) {  
19.         super.onCreate(savedInstanceState);  
20.         setContentView(R.layout.activity_led);  
21.         ledView = (LEDView) findViewById(R.id.ledview);  
22.           
23.           ActionBar actionBar = getActionBar();    
24.           actionBar.setDisplayHomeAsUpEnabled(true);   
25.     }  
26.   
27.     @Override  
28.     protected void onResume() {  
29.         super.onResume();  
30.         ledView.start();//调用开始  
31.     }  
32.   
33.     @Override  
34.     protected void onStop() {  
35.         super.onStop();  
36.         ledView.stop();//暂停  
37.     }  
38.       
39.     @Override  
40.     public boolean onCreateOptionsMenu(Menu menu) {  
41.         getMenuInflater().inflate(R.menu.activity_led, menu);  
42.         return true;  
43.     }  
44.   
45. }  

运行实例如下：

录制显示问题，不知道为什么，大家可以自行运行查看效果。

喜欢的朋友关注我，谢谢！

源码下载