Android custom View Graph and androidview Graph

Android custom View Graph and androidview Graph

Recently, a simple graph was created in the project to identify the data. At first, I thought it was very simple. android already has so many open-source chart libraries, such as achartenginee, hellochart, and mpandroidchart. Download the Demo and find it, it's so powerful that it's not suitable for my little presentation function. It's just speechless. Therefore, you can only reproduce the image from the View.

Let's take a look at it first:

Train of Thought: based on the number of vertices, the Canvas is classified and then all horizontal and vertical axes of the chart are drawn. Convert the data to the coordinate points, draw the data to the screen, and connect the adjacent two points to the line.

The source code is as follows:

Import android. content. context; import android. content. res. resources; import android. graphics. canvas; import android. graphics. paint; import android. graphics. paint. style; import android. graphics. path; import android. graphics. point; import android. util. attributeSet; import android. util. displayMetrics; import android. view. view; import android. view. windowManager; /*************************************** * ******************** @ File Name: lineGraphicView. java * @ file Author: rzq * @ Creation Time: 3:05:19, January 1, May 27, 2015 * @ file Description: Custom simple curve * @ modify history: create the initial version ************************************** on April 9, May 27, 2015 ************************************ * *******************/class LineGraphicView extends View {/*** public part */private static final int CIRCLE_SIZE = 10; private static enum Linestyle {Line, Curve} private Context mContext; private Paint mPaint; private Resources res; private DisplayMetrics dm;/*** data */private Linestyle mStyle = Linestyle. curve; private int canvasHeight; private int canvasWidth; private int bheight = 0; private int blwidh; private boolean isMeasure = true;/*** maximum Y axis */private int maxValue; /*** Y axis spacing value */private int averageValue; private int marginTop = 20; private int marginBottom = 40;/*** total points on the curve */private Point [] mPoints; /***** ordinate value */private ArrayList <Double> yRawData;/***** abscissa value */private ArrayList <String> xRawDatas; private ArrayList <Integer> xList = new ArrayList <Integer> (); // record the value of each x private int spacingHeight; public LineGraphicView (Context context) {this (context, null);} public LineGraphicView (Context context, AttributeSet attrs) {super (context, attrs); this. mContext = context; initView ();} private void initView () {this. res = mContext. getResources (); this. mPaint = new Paint (Paint. ANTI_ALIAS_FLAG); dm = new DisplayMetrics (); WindowManager wm = (WindowManager) mContext. getSystemService (Context. WINDOW_SERVICE); wm. getdefadisplay display (). getMetrics (dm) ;}@ Overrideprotected void onSizeChanged (int w, int h, int oldw, int oldh) {if (isMeasure) {this. canvasHeight = getHeight (); this. canvasWidth = getWidth (); if (bheight = 0) bheight = (int) (canvasHeight-marginBottom); blwidh = dip2px (30); isMeasure = false ;}} @ Overrideprotected void onDraw (Canvas canvas) {mPaint. setColor (res. getColor (R. color. color_f2f2f2); drawAllXLine (canvas); // draw a straight line (portrait) drawAllYLine (canvas); // set mPoints = getPoints (); mPaint for point operations. setColor (res. getColor (R. color. color_ff4631); mPaint. setStrokeWidth (dip2px (2.5f); mPaint. setStyle (Style. STROKE); if (mStyle = Linestyle. curve) {drawScrollLine (canvas);} else {drawLine (canvas);} mPaint. setStyle (Style. FILL); for (int I = 0; I <mPoints. length; I ++) {canvas. drawCircle (mPoints [I]. x, mPoints [I]. y, CIRCLE_SIZE/2, mPaint) ;}/ *** draw all horizontal tables, including X axis */private void drawAllXLine (Canvas canvas) {for (int I = 0; I <spacingHeight + 1; I ++) {canvas. drawLine (blwidh, bheight-(bheight/spacingHeight) * I + marginTop, (canvasWidth-blwidh), bheight-(bheight/spacingHeight) * I + marginTop, mPaint ); // Y coordinate drawText (String. valueOf (averageValue * I), blwidh/2, bheight-(bheight/spacingHeight) * I + marginTop, canvas);}/*** draw all vertical tables, including Y axis */private void drawAllYLine (Canvas canvas) {for (int I = 0; I <yRawData. size (); I ++) {xList. add (blwidh + (canvasWidth-blwidh)/yRawData. size () * I); canvas. drawLine (blwidh + (canvasWidth-blwidh)/yRawData. size () * I, marginTop, blwidh + (canvasWidth-blwidh)/yRawData. size () * I, bheight + marginTop, mPaint); drawText (xRawDatas. get (I), blwidh + (canvasWidth-blwidh)/yRawData. size () * I, bheight + dip2px (26), canvas); // X coordinate} private void drawScrollLine (Canvas canvas) {Point startp = new Point (); point endp = new Point (); for (int I = 0; I <mPoints. length-1; I ++) {startp = mPoints [I]; endp = mPoints [I + 1]; int wt = (startp. x + endp. x)/2; Point p3 = new Point (); Point p4 = new Point (); p3.y = startp. y; p3.x = wt; p4.y = endp. y; p4.x = wt; Path path = new Path (); path. moveTo (startp. x, startp. y); path. cubicTo (p3.x, p3.y, p4.x, p4.y, endp. x, endp. y); canvas. drawPath (path, mPaint) ;}} private void drawLine (Canvas canvas) {Point startp = new Point (); Point endp = new Point (); for (int I = 0; I <mPoints. length-1; I ++) {startp = mPoints [I]; endp = mPoints [I + 1]; canvas. drawLine (startp. x, startp. y, endp. x, endp. y, mPaint) ;}} private void drawText (String text, int x, int y, Canvas canvas) {Paint p = new Paint (Paint. ANTI_ALIAS_FLAG); p. setTextSize (dip2px (12); p. setColor (res. getColor (R. color. color_999999); p. setTextAlign (Paint. align. LEFT); canvas. drawText (text, x, y, p);} private Point [] getPoints () {Point [] points = new Point [yRawData. size ()]; for (int I = 0; I <yRawData. size (); I ++) {int ph = bheight-(int) (bheight * (yRawData. get (I)/maxValue); points [I] = new Point (xList. get (I), ph + marginTop);} return points;} public void setData (ArrayList <Double> yRawData, ArrayList <String> xRawData, int maxValue, int averageValue) {this. maxValue = maxValue; this. averageValue = averageValue; this. mPoints = new Point [yRawData. size ()]; this. xRawDatas = xRawData; this. yRawData = yRawData; this. spacingHeight = maxValue/averageValue;} public void setTotalvalue (int maxValue) {this. maxValue = maxValue;} public void setPjvalue (int averageValue) {this. averageValue = averageValue;} public void setMargint (int marginTop) {this. marginTop = marginTop;} public void setMarginb (int marginBottom) {this. marginBottom = marginBottom;} public void setMstyle (Linestyle mStyle) {this. mStyle = mStyle;} public void setBheight (int bheight) {this. bheight = bheight;}/*** convert the unit from dp to px (pixel) */private int dip2px (float dpValue) {return (int) based on the cell phone resolution) (dpValue * dm. density + 0.5f );}}

Usage:

package com.example;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity{LineGraphicView tu;ArrayList<Double> yList;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);tu = (LineGraphicView) findViewById(R.id.line_graphic);yList = new ArrayList<Double>();yList.add((double) 2.103);yList.add(4.05);yList.add(6.60);yList.add(3.08);yList.add(4.32);yList.add(2.0);yList.add(5.0);ArrayList<String> xRawDatas = new ArrayList<String>();xRawDatas.add("05-19");xRawDatas.add("05-20");xRawDatas.add("05-21");xRawDatas.add("05-22");xRawDatas.add("05-23");xRawDatas.add("05-24");xRawDatas.add("05-25");xRawDatas.add("05-26");tu.setData(yList, xRawDatas, 8, 2);}}

Download DEMO