Android: Using surfaceview to draw stock sliding straight lines to solve latency problems

1. Background

You need to draw stock trend charts for recent projects and draw indicator lines that can slide with your fingers to precisely view stock prices and dates. As shown in:

The white line in is the stock indicator line, used to follow your fingers to precisely determine the Stock Time and stock price. Whether it is to draw a stock chart or draw an indicator line, the first thing we think of is to use a custom view in Android. Practice has proved that the use of view can achieve good static images, but the use of dynamic image rendering often has a delay. Such as the indicator line, which is actually implemented by the View class. When you move your finger, the indicator line will be delayed, seriously affecting the user experience, surfaceview is used to improve the performance and smoothness of sliding.

 

2. Comparison between view and surfaceview in Android

The differences between the two are as follows:

View surfaceview

You can only update the screen UI main line and new independent threads in the UI main thread.

The dual-buffering mechanism is adopted for non-dual buffering, which is fast

There are other differences I hope you can add.

 

3. Case studies

Below isProgramMain ImplementationCode, Hiding the data filling.

 Package  Com. Devin; Import  Android. content. context;  Import  Android. Graphics. Canvas;  Import  Android. Graphics. color;  Import  Android. Graphics. paint;  Import  Android. Graphics. pixelformat;  Import  Android. Graphics. porterduff. mode;  Import  Android. View. motionevent; Import  Android. View. surfaceholder;  Import  Android. View. surfaceholder. Callback;  Import  Android. View. surfaceview;  Public   Class Mystockindicatorview Extends Surfaceview Implements  Callback {  Private  Surfaceholder;  Private Paint paint;  Private   Float  Currentx;  Public Mystockindicatorview (context Context ){  Super  (Context );  //  Initialize surfaceholder  Surfaceholder = This  . Getholder (); surfaceholder. addcallback (  This );  //  Make the entire interface transparent  Surfaceholder. setformat (pixelformat. Transparent); setzorderontop (  True  );
// Initialize the paint brush. = New  Paint (); paint. setantialias (  True  ); Paint. setcolor (color. White );
// You can click setfocusable (  True  );}
// Touch-screen events. After each response, the coordinates are changed and re-drawn.  Public  Boolean  Ontouchevent (motionevent event ){  Int Eventaction = Event. getaction ();  Int X = ( Int  ) Event. getx ();  Switch  (Eventaction ){  Case  Motionevent. action_down: currentx = X ;  Paintindicator (); Break  ;  Case  Motionevent. action_up: receivavas ();  Break  ;  Case  Motionevent. action_move: currentx  ;  Paintindicator ();  Break  ;  Case  Motionevent. action_cancel: incluavas (); Break  ;}  Return   True  ;}
// Draw a straight line  Private   Void  Paintindicator () {canvas = Surfaceholder. lockcanvas ();
// The following two sentences are used to change the origin and convert the default coordinate system to the Cartesian coordinate system.// Canvas. Translate (chartleft, getheight (); // canvas. Scale (  1,-1  );Canvas. drawline (currentx, 0, Currentx, getheight (), paint); surfaceholder. unlockcanvasandpost (canvas );}
// Clear screen  Private   Void  Protected AVAs (){
// Lock the canvas before each paintingCanvas canvas = Surfaceholder. lockcanvas (); canvas. drawcolor (color. Transparent, mode. Clear );
// Unlock the canvas after paintingSurfaceholder. unlockcanvasandpost (canvas );}  Public   Void Surfacechanged (surfaceholder, Int Format, Int Width,Int  Height ){}  Public   Void  Surfacecreated (surfaceholder ){
// Initialize data hereInitdata ();}  Public   Void  Surfacedestroyed (surfaceholder holder ){}} 

Note the key points of the above Code. For surfaceview implementation, surfaceview must be inherited and callback interfaces must be implemented. At the same time, three methods must be implemented: surfacecreated, surfacedestroyed, and surfacechanged, the methods used to create, destroy, and change a surfaceview. Initialize surfaceholder In the constructor, lock the canvas before each drawing, and unlock the canvas after painting.