50個Android開發技巧(11 為文字添加特效)

問題：如何構建一個類比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：

public class LedTextView extends TextView {       private static final String FONTS_FOLDER = "fonts";       private static final String FONT_DIGITAL_7 = FONTS_FOLDER + File.separator                   + "digital-7.ttf";        private void init(Context context) {             AssetManager assets = context. getAssets();             final Typeface font = Typeface . createFromAsset( assets, FONT_DIGITAL_7);            setTypeface (font );// 設定字型       }       public LedTextView (Context context) {             super(context );             init( context);       }       public LedTextView (Context context, AttributeSet attrs) {             super(context , attrs );             init( context);       }       public LedTextView (Context context, AttributeSet attrs, int defStyle) {             super(context , attrs , defStyle );             init( context);       }}

代碼很簡單，首先指定了字型檔，然後寫了一個init()方法用來為LedTextView設定字型，最後重寫了TextView類的所有建構函式，並調用init()方法。接下來需要在XML布局中使用這樣LedTextView。main.xml:

<merge xmlns:android ="http://schemas.android.com/apk/res/android" >    <com.vectoryi.hack011.view.LedTextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:text="@string/default_time"        android:textColor="#3300ff00"        android:textSize="80sp" />    <com.vectoryi.hack011.view.LedTextView        android:id="@+id/main_clock_time"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:textColor="#00ff00"        android:textSize="80sp" /></merge>

在這裡定義了兩個LedTextView控制項,其中@string/default_time值為"88:88:88"。還有一點需要注意，這裡用到了<merge/>標籤，博主在前文《消極式載入和避免重複渲染》中已經介紹過<include/>標籤的使用。試想一下，當你<include />這個布局main.xml時，如果main.xml是這樣的：

<<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"          android:layout_height="fill_parent">    <com.vectoryi.hack011.view.LedTextView        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:layout_gravity ="center"        android:text ="@string/default_time"        android:textColor ="#3300ff00"        android:textSize ="80sp" />    <com.vectoryi.hack011.view.LedTextView        android:id ="@+id/main_clock_time"        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:layout_gravity ="center"        android:textColor ="#00ff00"        android:textSize ="80sp" /></FrameLayout>

是不是增加了View樹的Hierarchy層級呢？這樣會顯得View樹更加複雜，如果<include/>這樣的布局使用多了，會影響效能。
二、即時更新LedTextView顯示的內容接下來看MainActivity:

public class MainActivity extends Activity {       private static final String DATE_FORMAT = "%02d:%02d:%02d" ;       private static final int REFRESH_DELAY = 500;       // 由於Android不允許其他線程操作UI,所以在此建立了一個Handler       private final Handler mHandler = new Handler();      //用來即時更新LedTextView顯示的線程       private final Runnable mTimeRefresher = new Runnable() {             @Override             public void run() {                   Calendar calendar = Calendar. getInstance (TimeZone                               . getTimeZone( "GMT+8")); // 設定時區                   final Date d = new Date();                  calendar .setTime (d );                   mTextView. setText( String. format (DATE_FORMAT ,                              calendar .get (Calendar .HOUR ), calendar. get( Calendar. MINUTE),                              calendar .get (Calendar .SECOND )));                   mHandler. postDelayed (this , REFRESH_DELAY );             }       };       private TextView mTextView ;       @Override       public void onCreate(Bundle savedInstanceState ) {             super .onCreate (savedInstanceState );            setContentView (R .layout .main );             mTextView = (TextView ) findViewById (R .id .main_clock_time );       }       @Override       protected void onResume() {             super .onResume ();             mHandler. post( mTimeRefresher );       }       @Override       protected void onStop() {             super .onStop ();             mHandler. removeCallbacks (mTimeRefresher );       }}

代碼同樣也不複雜，主要注意一下多線程的使用。
至此，我們已經建立了一個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改為：

<com.vectoryi.hack011.view.LedTextView        android:id ="@+id/main_clock_time"        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:layout_gravity ="center"        android:shadowColor ="#00ff00"        android:shadowDx ="0"        android:shadowDy ="0"        android:shadowRadius ="10"        android:textColor ="#00ff00"        android:textSize ="80sp" />

這樣就能顯示和問題要求一樣的效果了。