Dynamically display lyrics

1. In Android, the layout cannot be updated in the main thread, which may throw a response exception.

You need to enable a thread to constantly update the dynamic view, so that it does not affect the running of the main thread.

Similarly, you cannot directly download network files in the main thread. If no response is received,

The main thread may crash directly and exit the program. The solution is to enable a thread.

 

2. to dynamically display the lyrics, you must customize a View class. (Note that most of the Code is referenced from the network and is modified to meet our needs)

For example, my code is defined as lrcsurfaceview, which inherits from surfaceview and implements the run method of the runnable interface.

Surfaceholder. Callback;

The Code is as follows:

Package COM. LRC. view; <br/> Import COM. LRC. model. lrcutil; <br/> Import COM. LRC. model. songinfor; <br/> Import android. content. context; <br/> Import android. graphics. canvas; <br/> Import android. graphics. color; <br/> Import android. graphics. paint; <br/> Import android. graphics. path; <br/> Import android. util. attributeset; <br/> Import android. view. surfaceholder; <br/> Import android. view. surfaceview; <br/>/** <br/> * Custom view, inherited from surfaceview <br/> * @ author SYN <br/> * @ note many codes from the Network <br/> * @ date 2011.4.20 <br/> */<br/> public class lrcsurfaceview extends surfaceview implements surfaceholder. callback, runnable {<br/> private int textsize = 15; <br/> Private Static int xadd = 0; <br/> private Boolean isplay = true; <br/> private paint mpaint; <br/> private path mpath; <br/> private int mcontentline = 0; <br/> float hoffset; <br/>{< br/> mpath = New Path (); <br/> mpaint = new paint (); // generate a paint <br/> mpaint. setantialias (true); // removes the Saw Tooth <br/> mpaint. settextsize (textsize); <br/>}</P> <p> // constructor <br/> Public lrcsurfaceview (context, attributeset attrs) <br/>{< br/> super (context, attrs); <br/> msurfaceholder = This. getholder (); // Get holder <br/> msurfaceholder. addcallback (this); // callback must be called <br/> This. setfocusable (false); // obtain the focus <br/> mbloop = true; <br/>}</P> <p> Boolean mbloop = false; <br/> surfaceholder msurfaceholder = NULL; // surfaceholder object </P> <p> // constructor <br/> Public lrcsurfaceview (context) <br/>{< br/> super (context); <br/> msurfaceholder = This. getholder (); // Get holder <br/> msurfaceholder. addcallback (this); <br/> This. setfocusable (false); <br/> mbloop = true; <br/>}< br/> @ override <br/> Public void surfacechanged (surfaceholder holder, int format, int width, <br/> int height) {<br/>}</P> <p> @ override <br/> Public void surfacecreated (surfaceholder holder) <br/>{< br/> New thread (this ). start (); // start a thread and update the Control <br/>}</P> <p> @ override <br/> Public void surfacedestroyed (surfaceholder holder) <br/>{< br/> mbloop = false; <br/>}</P> <p> @ override <br/> Public void run () // implement the runnable interface <br/>{< br/> while (mbloop) <br/>{< br/> try <br/>{< br/> thread. sleep (100); <br/>}catch (exception e) {}< br/> synchronized (msurfaceholder) <br/>{< br/> draw (); // plot our image (here we can use our imagination) <br/>}</P> <p> Public void draw () // display the lyrics <br/>{< br/> canvas = msurfaceholder. lockcanvas (); // create a canvas <br/> If (msurfaceholder = NULL | canvas = NULL) <br/>{< br/> return; <br/>}</P> <p> mpaint. setcolor (color. argb (, 80, 80, 80); // set the canvas color for mpaint <br/> canvas. drawrect (0, 0, getwidth (), getheight (), mpaint); // draw a rectangle to show the lyrics </P> <p> mpaint. setcolor (color. argb (150,150,); <br/> mpath. moveTo (2, getheight (); <br/> mpath. lineto (getwidth (), getheight (); <br/> If (isplay) <br/>{< br/> final float offsetcopy = hoffset; <br/> If (mcontentline> songinfor. getcontent (). length) <br/>{< br/> mcontentline = 0; <br/>}< br/> If (xadd + offsetcopy) <= getwidth ()) <br/>{</P> <p> canvas. drawtextonpath (songinfor. getcontent () [mcontentline]. trim (), mpath, xadd + offsetcopy,-5, mpaint); <br/> xadd = xadd + 6; <br/>}< br/> else <br/>{< br/> xadd =-songinfor. getcontent () [mcontentline]. trim (). length (); <br/> mcontentline ++; <br/> canvas. drawtextonpath (songinfor. getcontent () [mcontentline]. trim (), mpath, xadd + offsetcopy,-5, mpaint ); <br/>}< br/> else <br/> {<br/> canvas. drawtextonpath (songinfor. getcontent () [mcontentline]. trim (), mpath, 6,-5, mpaint); <br/>}</P> <p> msurfaceholder. unlockcanvasandpost (canvas); <br/>}</P> <p> Public void setplay (Boolean flag) <br/>{< br/> This. isplay = flag; <br/>}

The main idea is to enable a thread when creating the View class, and then overwrite the run method to continuously update the display of the lyrics.

A canvas is used to display the lyrics, and the canvas is constantly painted using the canvas. drawtextonpath method.

 

3. Then we reference this type in the XML file.

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> <textview <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: TEXT = "@ string/Hello" <br/> <COM. LRC. view. lrcsurfaceview <br/> Android: Id = "@ + ID/lrcview" <br/> Android: layout_width = "320px" <br/> Android: layout_height = "30px" <br/> </linearlayout>

 

4. In mainactivity, it is okay to call the view as usual.

The Code is as follows:

Public class mainactivity extends activity {<br/> @ suppresswarnings ("UNUSED") <br/> private lrcsurfaceview lrcview; <br/>/** called when the activity is first created. */<br/> @ override <br/> Public void oncreate (bundle savedinstancestate) {<br/> super. oncreate (savedinstancestate); <br/> songinfor. oncreate ("/sdcard/mm. LRC "); <br/> lrcview = new lrcsurfaceview (this); <br/> setcontentview (R. layout. main); <br/> lrcview = (lrcsurfaceview) findviewbyid (R. id. lrcview); <br/>}< br/>}

5. The following results will be displayed at the end.