50 Android Development Tips (11 for text add effects)

question: How do I build a page that simulates an LED digital clock? Effects such as those seen in:
(Original address: http://blog.csdn.net/vector_yi/article/details/24460227)


Analysis: We can use two TextView to display, the first TextView display the LED screen on the default non-illuminated 88:88:88. There is also a display of time in real time and added glow and shadow effects.

But we also need to solve the problem of font display, so that it looks more like a real led digital clock.
Resolution steps: (1) define a Ledtextview class yourself, inheriting from TextView.                This class is primarily used to set and display fonts.                (2) A new thread is opened in mainactivity to update the Ledtextview display time. (3) Add shadow effect to Ledtextview. Looks more real.
I. Define your own Ledtextview class
When we create a androidproject, we generate a assets directory at the same time. Used to store resources that need to be used.
Here we first need to put a font file that we need to use in the assets directory: Digital-7.ttf
What you see:

Then write the Ledtextview class and set the font to the font digital-7 we introduced in the class.

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);//Set 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, defst             YLE);       Init (context); }}

The code is very easy, first specifying a font file, then writing an init () method to set the font for Ledtextview, and finally overriding all constructors of the TextView class and calling the Init () method. Next you need to use such ledtextview in the XML layout. 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 >

There are two Ledtextview controls defined here, with a value of @string/default_time of "88:88:88". Another point to note is that the <merge/> tag is used here.。 Bloggers have described the use of <include/> tags in the previous article, "deferred loading and avoidance of repeated rendering."

Imagine when you <include/> This layout main.xml, assuming that Main.xml is this:

<< Framelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Fill_parent" Android oid:layout_height= "Fill_parent" > <com.vectoryi.hack011.view.ledtextview android:layout_width = "Wrap_conten T "android:layout_height =" wrap_content "android:layout_gravity =" center "android:text =" @string/defa Ult_time "Android:textcolor =" #3300ff00 "android:textsize =" 80sp "/> <com.vectoryi.hack011.view.led TextView android:id = "@+id/main_clock_time" android:layout_width = "Wrap_content" Android:layout_heigh t = "wrap_content" android:layout_gravity = "center" android:textcolor = "#00ff00" android:textsize = "80 SP "/></FRAMELAYOUT> 

did you add the hierarchy level of the view tree ? This will make the view tree more complex. Suppose <include/> This layout is used much more. can affect performance.
second, the real-time update ledtextview display contentnext look at mainactivity:

public class Mainactivity extends Activity {private static final String Date_format = "%02d:%02d:%02d";       private static final int refresh_delay = 500;      Because Android does not agree with other threads to manipulate the UI, a Handler private final Handler Mhandler = new Handler () is created here.             The thread used to update the Ledtextview display in real time private final Runnable mtimerefresher = new Runnable () {@Override public void Run () {Calendar calendar = Calendar. getinstance (TimeZone. getTimeZone ("gmt+8"));                  Set the time zone 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); }}

The same code is not complicated. Focus on multi-threaded use .
at this point, we have created an LED digital clock. Effects such as the following:

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvdmvjdg9yx3lp/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast ">
But always think and the problem demand a little. Yes, and the shadow effect is missing.
third, add shadow effect to clockThe TextView class provides methods such as the following to set the shadow effect:Public void Setshadowlayer (float radius, float dx, float dy, int color)the corresponding to XML attribute is:Android:shadowradius,ANDROID:SHADOWDX , Android:shadowdy ,Android: Shadowcolor
in Main.xml, we change the second Ledtextview to:

<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 = "Ten"        Android: TextColor = "#00ff00"        android:textsize = "80sp"/>

This will show the same effect as the problem requirement.

Finally, attach the GitHub related information (https://github.com/VectorYi/LedTextView.git) and source code download link (source code point I).

50 Android Development Tips (11 for text add effects)