自定义控件 实现曲线加载数据

最近项目里要做一个简单的曲线图来标识数据，开始以为很简单，android已经有那么多的开源图表库了，什么achartenginee,hellochart，mpandroidchart等等，下载Demo一找，都强大到有点不适合我这个小小的展示功能了，直是无语了。于是只能自已去画了，继承自View去重绘。

　下面先看一下效果图：

　思路：根据点的数量将Canvas等分，等分后先绘制图表的所有横轴和纵轴。再将数据转化为点坐标，绘制到屏幕上，最后将相邻两点连成线即可。

　源码如下：

 

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;/********************************************************** * @文件名称：LineGraphicView.java * @文件作者：rzq * @创建时间：2015年5月27日 下午3:05:19 * @文件描述：自定义简单曲线图 * @修改历史：2015年5月27日创建初始版本 **********************************************************/class LineGraphicView extends View{/** * 公共部分 */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;/** * Y轴最大值 */private int maxValue;/** * Y轴间距值 */private int averageValue;private int marginTop = 20;private int marginBottom = 40;/** * 曲线上总点数 */private Point[] mPoints;/** * 纵坐标值 */private ArrayList yRawData;/** * 横坐标值 */private ArrayList xRawDatas;private ArrayList xList = new ArrayList();// 记录每个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.getDefaultDisplay().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);// 画直线（纵向）drawAllYLine(canvas);// 点的操作设置mPoints = getPoints();mPaint.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);}}/** *  画所有横向表格，包括X轴 */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坐标drawText(String.valueOf(averageValue * i), blwidh / 2, bheight - (bheight / spacingHeight) * i + marginTop,canvas);}}/** * 画所有纵向表格，包括Y轴 */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坐标}}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 yRawData, ArrayList 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;}/** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */private int dip2px(float dpValue){return (int) (dpValue * dm.density + 0.5f);}}

使用：

 

 

package com.example;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity{LineGraphicView tu;ArrayList yList;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);tu = (LineGraphicView) findViewById(R.id.line_graphic);yList = new ArrayList();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 xRawDatas = new ArrayList();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);}}