Draw a dynamic graph for Android

Recently preparing for the skill competition, we need to draw the data read from the sensor in the form of an image on the mobile client. Because there is very little drawing at ordinary times, it is barely possible to look up the materials.

The following are the theory (left) and Practice (right) of the competition. The ideal is really full, and the reality is very skinny!

　　　　

 

Overall production ideas:

 

Draw a basic table:

(Note: variables are used in the Code)

1. Draw a rectangle

　　　　 Paint paint = new Paint();        paint.setColor(Color.BLACK);        paint.setStyle(Paint.Style.STROKE);        Rect chartRec = new Rect(OFFSET_LEFT, OFFSET_TOP, CHARTW + OFFSET_LEFT,                CHARTH + OFFSET_TOP);        canvas.drawRect(chartRec, paint);

2. Draw the left-side numeric mark

canvas.drawText("100", OFFSET_LEFT - TEXT_OFFSET - 15, OFFSET_TOP + 5,                paint);        for (int i = 9; i > 0; i--) {            canvas.drawText("" + 10 * (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);

3. Draw a dotted line

DashPathEffect is a subclass of the PathEffect class. You can use the paint to draw a line like a dotted line, and you can specify the arrangement of the virtual reality.

The float array in the Code must be an even number of lengths and greater than or equal to 2. specify the length of the solid line and then draw a blank Number of lengths.

In this Code, draw a solid line of length 2, draw a blank line of length 2, draw a solid line of length 2, then draw a blank space of length 2, and repeat. 1 in turn is the offset

 PathEffect effects = new DashPathEffect(new float[] { 2, 2, 2, 2 }, 1);

Such a basic table is drawn.

 

 

How to dynamically change the interface:

Handler handler = new Handler (); Runnable runnable = new Runnable () {@ Override public void run () {// TODO Auto-generated method stub // handler. postDelayed (this, 1000 );}};

Here, we use the postDelayed (Runnable, long) method of Handler in the Message passing mechanism as a timer to send a Runnable object every second (this object will be encapsulated as a Message object) execute an operation in the subthread.

 

Finally, paste all the code:

Main. xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <LinearLayout        android:id="@+id/root"        android:orientation = "vertical"        android:layout_width="fill_parent"        android:layout_height="fill_parent">    </LinearLayout></LinearLayout>

MainActivity. class

public class MainActivity extends Activity {    private Handler handler;    private DrawTest dtest;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        init();    }    private void init() {        LinearLayout layout = (LinearLayout) findViewById(R.id.root);        dtest = new DrawTest(this);        dtest.invalidate();        layout.addView(dtest);        handler = new Handler();        handler.post(new Runnable() {            @Override            public void run() {                dtest.invalidate();                handler.postDelayed(this, 2000);            }        });    }}

DrawTest. class

Public class DrawTest extends View {private int CHARTH = 600; // The table's high private int CHARTW = 400; // The table's wide private int OFFSET_LEFT = 70; // The distance from the left boundary is private int OFFSET_TOP = 80; // The distance from the right boundary is private int TEXT_OFFSET = 20; // The distance from the text is private int X_INTERVAL = 20; // The X coordinate distance from the private List <Point> plist; // public DrawTest (Context context) {super (context); plist = new ArrayList <Point> ();} @ Override protected void onDra W (Canvas canvas) {super. onDraw (canvas); drawTable (canvas); preparePoint (); drawPoint (canvas);}/*** drawing table ** @ param canvas */private void drawTable (Canvas canvas) {Paint paint = new Paint (); paint. setColor (Color. BLACK); paint. setStyle (Paint. style. STROKE); Rect chartRec = new Rect (OFFSET_LEFT, OFFSET_TOP, CHARTW + OFFSET_LEFT, CHARTH + OFFSET_TOP); canvas. drawRect (chartRec, paint); Path textPath = New Path (); // select a region and prepare to write the text "Graph test" paint. setStyle (Paint. style. FILL); textPath. moveTo (200, 30); // The area starts textPath. lineTo (400, 30); // area end paint. setTextSize (20); paint. setAntiAlias (true); // specifies whether to use the anti-aliasing function, which consumes a large amount of resources and slows down the drawing speed. Canvas. drawTextOnPath ("Graph test", textPath, 0, 0, paint); // The left value indicates canvas. drawText ("100", OFFSET_LEFT-TEXT_OFFSET-15, OFFSET_TOP + 5, paint); for (int I = 9; I> 0; I --) {canvas. drawText ("" + 10 * (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 the dotted Path path = new Path ();/** * PathEffect is used to control the way to draw a contour (line. * DashPathEffect is a subclass of the PathEffect class. You can use the paint to draw a line like a dotted line, and you can specify the arrangement of the actual situation. * The float array in the Code must be an even number of lengths and must be greater than or equal to 2. Specify the actual number of lengths and then draw a blank Number of lengths. * In this Code, draw a solid line with a length of 2, draw a blank line with a length of 2, draw a solid line with a length of 2, and draw a blank space with a length of 2, repeating in sequence. 1 is the offset, */PathEffect effects = new DashPathEffect (new float [] {2, 2, 2}, 1); paint. setStyle (Paint. style. STROKE); paint. setAntiAlias (false); paint. setPathEffect (effects); // used to set the effect of the path when the path is drawn, such as a dot. For (int I = 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 for drawing point */private void preparePoint () {// set the Y coordinate of the vertex to 30-40 int py = (CHARTH/10) * 6 + OFFSET_TOP + (int) Math. rint (Math. random () * (CHARTH/10); Point p = new Point (OFFSET_LEFT + CHARTW, py); if (plist. size ()> 21) {plist. remove (0); // number of control points // change the X coordinate of each point for (int I = 0; I <20; I ++) {if (I = 0) plist. get (I ). x-= (X_INTERVAL-2); else plist. get (I ). x-= X_INTERVAL;} plist. add (p) ;}else {for (int I = 0; I <plist. size ()-1; I ++) {plist. get (I ). x-= X_INTERVAL;} plist. add (p) ;}}/*** draw point ** @ param canvas */private void drawPoint (Canvas canvas) {Paint paint = new Paint (); paint. setColor (Color. BLACK); paint. setStrokeWidth (3); // set the stroke width if (plist. size ()> = 2) {for (int I = 0; I <plist. size ()-1; I ++) {canvas. drawPoint (plist. get (I ). x, plist. get (I ). y, paint );}}}}

[Note: The invalidate () and postInvalidate () methods have been selected clearly in this document. To use invalidate (), it must be in the main UI thread, if it is not in the main UI thread, call postInValidate ()]

If you have any better methods or shortcomings in this article, I hope you can give us some advice.

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