Android Drawing Motion Diagram

Recently prepared skills contest, need to be read from the sensor data in the mobile client in the form of a diagram, because usually very little drawing, so a variety of search data, is reluctantly made.

The following is the contest theory (left) and the actual (right), really is the ideal is plump, the reality is very skinny!

　　　　

The overall idea of production:

1. Create a custom class that inherits from the view class
2. The OnDraw () method in which the custom class overrides
3. The invalidate () method in mainactivity calls the OnDraw () method to redraw the graphic.

Draw a basic table:

(Note: Variables are used in the code)

1. Draw a rectangle

New Paint ();        Paint.setcolor (color.black);        Paint.setstyle (Paint.Style.STROKE);         New Rect (Offset_left, offset_top, CHARTW + offset_left,                + offset_top);        Canvas.drawrect (Chartrec, paint);

2. Draw left value marker

Canvas.drawtext ("+", offset_left-text_offset-15, Offset_top + 5,                paint);          for (int i = 9; i > 0; i--) {            canvas.drawtext ("" + Ten * (10-i), offset_left-text_offset-15,                     + CHARTH/10 * i, paint);        }        Canvas.drawtext ("0", offset_left-text_offset-10, offset_top                + charth, paint);

3. Draw dashed Lines

Dashpatheffect is a subclass of the Patheffect class that makes paint look like a dashed line, and can arbitrarily specify how the actual situation is arranged.

The float array in the code must be an even length and >=2, specifying how many lengths of solid lines to draw and how many lengths of whitespace are drawn.

As in this code, draw a solid line of length 2, then draw a blank length of 2, then draw a solid line of length 2, and then draw a blank of length 2, repeat in turn. 1 is offset

New Dashpatheffect (newfloat[] {2, 2, 2, 2}, 1);

Such a basic table drawing is done.

Ways to dynamically change the interface:

Handler handler=New  Handler (); Runnable Runnable=new  Runnable () {   @Override   publicvoid  run () {    //  TODO auto-generated method stubs    // things    to do Handler.postdelayed (this, +);   }};

Here we use the handler postdelayed (Runnable, long) method in the messaging mechanism to do the timer, sending the Runnable object once every second (the object will eventually be encapsulated as a message object) to perform the operation once in the child thread.

Finally, put all the code on it:

Main.xml

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:orientation= "vertical" >    <LinearLayoutAndroid:id= "@+id/root"android:orientation= "vertical"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent">    </LinearLayout></LinearLayout>

Mainactivity.class

 Public classMainactivityextendsActivity {PrivateHandler Handler; Privatedrawtest dtest; @Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);        Setcontentview (R.layout.main);    Init (); }    Private voidinit () {linearlayout layout=(LinearLayout) Findviewbyid (r.id.root); Dtest=NewDrawtest ( This);        Dtest.invalidate ();        Layout.addview (dtest); Handler=NewHandler (); Handler.post (NewRunnable () {@Override Public voidrun () {dtest.invalidate (); Handler.postdelayed ( This, 2000);    }        }); }}

Drawtest.class

 Public classDrawtestextendsView {Private intCharth = 600;//Table of High    Private intCHARTW = 400;//the width of the table    Private intOffset_left = 70;//Distance from left border    Private intOffset_top = 80;//Distance from right boundary    Private intText_offset = 20;//Text distance Settings    Private intX_interval = 20;//x coordinate interval distance    PrivateList<point> plist;//Point Collection     PublicDrawtest (Context context) {Super(context); Plist=NewArraylist<point>(); } @Overrideprotected voidOnDraw (canvas canvas) {Super. OnDraw (canvas);        Drawtable (canvas);        Preparepoint ();    Drawpoint (canvas); }    /*** Draw Table *@paramCanvas*/    Private voiddrawtable (canvas canvas) {Paint Paint=NewPaint ();        Paint.setcolor (Color.Black);        Paint.setstyle (Paint.Style.STROKE); Rect Chartrec=NewRect (Offset_left, offset_top, CHARTW +Offset_left, Charth+offset_top);        Canvas.drawrect (Chartrec, paint); Path Textpath=NewPath ();//Select an area to prepare the text "curve test"Paint.setstyle (Paint.Style.FILL); Textpath.moveto (200, 30);//Zone StartTextpath.lineto (400, 30);//Area EndPaint.settextsize (20); Paint.setantialias (true);//Specifies whether anti-aliasing is used, consumes large resources, and the drawing speed slows. Canvas.drawtextonpath ("Curve test", Textpath, 0, 0, paint); //left numeric markerCanvas.drawtext ("offset_left-text_offset-15", Offset_top + 5, paint);  for(inti = 9; i > 0; i--) {Canvas.drawtext ("+ Ten * (10-i), offset_left-text_offset-15, Offset_top+ CHARTH/10 *I, paint); } canvas.drawtext ("0", offset_left-text_offset-10, Offset_top+Charth, paint); //Draw Dashed LinesPath PATH =NewPath (); /*** Patheffect is used to control how outlines (lines) are drawn.         * Dashpatheffect is a subclass of the Patheffect class that makes paint look like a dashed line, and can arbitrarily specify how the actual situation is arranged.         * The float array in the code must be an even length, and >=2, specify how many lengths of solid lines are drawn, and then how many lengths of white space. * As in this code, draw a solid line of length 2, then draw a blank length of 2, then draw a solid line of length 2, and then draw a blank length of 2, repeat. 1 is the offset,*/patheffect Effects=NewDashpatheffect (New float[] {2, 2, 2, 2}, 1);        Paint.setstyle (Paint.Style.STROKE); Paint.setantialias (false); Paint.setpatheffect (effects);//used to set the path effect when drawing a path, such as a dot dash.          for(inti = 1; I < 10; i++) {Path.moveto (offset_left, Offset_top+ CHARTH/10 *i); Path.lineto (Offset_left+ CHARTW, Offset_top + CHARTH/10 *i);        Canvas.drawpath (path, paint); }            }    /*** Prepare to draw points*/    Private voidPreparepoint () {//sets the y-coordinate of the point to 30-40        intPY = (CHARTH/10) *6+offset_top + (int) Math.rint ((Math.random () * (CHARTH/10))); Point P=NewPoint (Offset_left +chartw, py); if(Plist.size () > 21) {Plist.remove (0);//number of control points//change the x-coordinate of each point             for(inti = 0; I < 20; i++) {                if(i = = 0) Plist.get (i). x-= (X_interval-2); ElsePlist.get (i). x-=X_interval;        } plist.add (P); } Else {             for(inti = 0; I < Plist.size ()-1; i++) {plist.get (i). x-=X_interval;        } plist.add (P); }            }    /*** Draw Point * *@paramCanvas*/    Private voiddrawpoint (canvas canvas) {Paint Paint=NewPaint ();        Paint.setcolor (Color.Black); Paint.setstrokewidth (3);//set the width of a stroke        if(Plist.size () >= 2) {             for(inti = 0; I < Plist.size ()-1; i++) {Canvas.drawpoint (Plist.get (i). x, Plist.get (i). Y, paint); }        }    }}

Note: The selection of the Invalidate () and Postinvalidate () methods: The document has been written clearly, if you want to use invalidate () must be in the UI main thread, if not in the UI main thread, I'm going to call Postinvalidate () "

If you have any better method or the article has any shortcomings, I hope you point.

Demo Download http://download.csdn.net/detail/af74776/7440807