50个Android开发技巧(11 为文字添加特效)

转自：http://blog.csdn.net/vector_yi/article/details/24460227

问题：如何构建一个模拟LED数字时钟的页面？效果如下图所示：

(原文地址：http://blog.csdn.net/vector_yi/article/details/24460227)

分析：我们可以利用两个TextView来显示，第一个TextView显示LED屏上默认不发光的88:88:88，另一个显示实时的时间并添加发光及阴影效果。但是我们还需要解决显示的字体问题，让它看起来更像是一个真实的LED数字时钟。

解决步骤：(1)自定义一个LedTextView类，继承自TextView，这个类主要用来设置和显示字体；

                (2)在MainActivity中新开启一个线程用来更新LedTextView显示的时间；

                (3)为LedTextView添加阴影效果，看起来更真实。

一、自定义LedTextView类
我们在创建一个Android工程时，会同时生成一个assets文件夹，用来存放需要利用到的资源。
在这里，我们首先需要在assets文件夹下放入一个我们需要用到的字体文件：digital-7.ttf
如图所示：

然后再编写LedTextView类，并在类中将字体设置为我们引入的字体digital-7.

LedTextView.java：

[java]  view plain copy

1. public class LedTextView extends TextView {  
2.   
3.        private static final String FONTS_FOLDER = "fonts";  
4.        private static final String FONT_DIGITAL_7 = FONTS_FOLDER + File.separator  
5.                    + "digital-7.ttf";  
6.         private void init(Context context) {  
7.              AssetManager assets = context. getAssets();  
8.              final Typeface font = Typeface . createFromAsset( assets, FONT_DIGITAL_7);  
9.             setTypeface (font );// 设置字体  
10.        }  
11.        public LedTextView (Context context) {  
12.              super(context );  
13.              init( context);  
14.        }  
15.   
16.        public LedTextView (Context context, AttributeSet attrs) {  
17.              super(context , attrs );  
18.              init( context);  
19.        }  
20.   
21.        public LedTextView (Context context, AttributeSet attrs, int defStyle) {  
22.              super(context , attrs , defStyle );  
23.              init( context);  
24.        }  
25. }  

代码很简单，首先指定了字体文件，然后写了一个init()方法用来为LedTextView设置字体，最后重写了TextView类的所有构造函数，并调用init()方法。

接下来需要在XML布局中使用这样LedTextView。

main.xml:

[html]  view plain copy

1. <merge xmlns:android ="http://schemas.android.com/apk/res/android" >  
2.   
3.     <com.vectoryi.hack011.view.LedTextView  
4.         android:layout_width="wrap_content"  
5.         android:layout_height="wrap_content"  
6.         android:layout_gravity="center"  
7.         android:text="@string/default_time"  
8.         android:textColor="#3300ff00"  
9.         android:textSize="80sp" />  
10.   
11.     <com.vectoryi.hack011.view.LedTextView  
12.         android:id="@+id/main_clock_time"  
13.         android:layout_width="wrap_content"  
14.         android:layout_height="wrap_content"  
15.         android:layout_gravity="center"  
16.         android:textColor="#00ff00"  
17.         android:textSize="80sp" />  
18.   
19. </merge>  

在这里定义了两个LedTextView控件,其中@string/default_time值为"88:88:88"。

还有一点需要注意，这里用到了<merge/>标签，博主在前文《延迟加载和避免重复渲染》中已经介绍过<include/>标签的使用。试想一下，当你<include />这个布局main.xml时，如果main.xml是这样的：

[html]  view plain copy

1. <<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="fill_parent"  
3.           android:layout_height="fill_parent">  
4.   
5.     <com.vectoryi.hack011.view.LedTextView  
6.         android:layout_width ="wrap_content"  
7.         android:layout_height ="wrap_content"  
8.         android:layout_gravity ="center"  
9.         android:text ="@string/default_time"  
10.         android:textColor ="#3300ff00"  
11.         android:textSize ="80sp" />  
12.   
13.     <com.vectoryi.hack011.view.LedTextView  
14.         android:id ="@+id/main_clock_time"  
15.         android:layout_width ="wrap_content"  
16.         android:layout_height ="wrap_content"  
17.         android:layout_gravity ="center"  
18.         android:textColor ="#00ff00"  
19.         android:textSize ="80sp" />  
20.   
21. </FrameLayout>  

是不是增加了View树的Hierarchy层级呢？这样会显得View树更加复杂，如果<include/>这样的布局使用多了，会影响性能。

二、实时更新LedTextView显示的内容

接下来看MainActivity:

[java]  view plain copy

1. public class MainActivity extends Activity {  
2.   
3.        private static final String DATE_FORMAT = "%02d:%02d:%02d" ;  
4.        private static final int REFRESH_DELAY = 500;  
5.   
6.        // 由于Android不允许其他线程操作UI,所以在此创建了一个Handler  
7.        private final Handler mHandler = new Handler();  
8.       //用来实时更新LedTextView显示的线程  
9.        private final Runnable mTimeRefresher = new Runnable() {  
10.              @Override  
11.              public void run() {  
12.                    Calendar calendar = Calendar. getInstance (TimeZone  
13.                                . getTimeZone( "GMT+8")); // 设置时区  
14.                    final Date d = new Date();  
15.                   calendar .setTime (d );  
16.                    mTextView. setText( String. format (DATE_FORMAT ,  
17.                               calendar .get (Calendar .HOUR ), calendar. get( Calendar. MINUTE),  
18.                               calendar .get (Calendar .SECOND )));  
19.                    mHandler. postDelayed (this , REFRESH_DELAY );  
20.              }  
21.        };  
22.   
23.        private TextView mTextView ;  
24.   
25.        @Override  
26.        public void onCreate(Bundle savedInstanceState ) {  
27.              super .onCreate (savedInstanceState );  
28.             setContentView (R .layout .main );  
29.   
30.              mTextView = (TextView ) findViewById (R .id .main_clock_time );  
31.        }  
32.   
33.        @Override  
34.        protected void onResume() {  
35.              super .onResume ();  
36.              mHandler. post( mTimeRefresher );  
37.        }  
38.   
39.        @Override  
40.        protected void onStop() {  
41.              super .onStop ();  
42.              mHandler. removeCallbacks (mTimeRefresher );  
43.        }  
44. }  

代码同样也不复杂，主要注意一下多线程的使用。

至此，我们已经创建了一个LED数字时钟，效果如下：

但是总觉得和问题要求的效果图差一些。没错，还少了阴影效果。

三、为时钟添加阴影效果

TextView类提供了如下方法来设置阴影效果：

public void setShadowLayer (float radius, float dx, float dy, int color)

对应到XML属性就是：

android:shadowRadius， android:shadowDx  ,  android:shadowDy  , android :shadowColor

我们在main.xml中把第二个LedTextView改为：

[html]  view plain copy

1. <com.vectoryi.hack011.view.LedTextView  
2.         android:id ="@+id/main_clock_time"  
3.         android:layout_width ="wrap_content"  
4.         android:layout_height ="wrap_content"  
5.         android:layout_gravity ="center"  
6.         android:shadowColor ="#00ff00"  
7.         android:shadowDx ="0"  
8.         android:shadowDy ="0"  
9.         android:shadowRadius ="10"  
10.         android:textColor ="#00ff00"  
11.         android:textSize ="80sp" />  

这样就能显示和问题要求一样的效果了。