android记账本折线图_Android 折线图 教你自定义折线图

先看图

BrokenLine.png

分析图表

首先我们根据上图我们可以看到如下几个元素

边框线

边框线数据值

BrokenLineData.png

边框线内折线

Line.png

折线上的圆

如上分析，我们所需要绘制的就是边框线，框线分段数据值，框内折线，折线上的圆

在画图之前 我们首先得 准备一些 必要参数

/**View宽度*/

private int mViewWidth;

/** View高度*/

private int mViewHeight;

/**边框线画笔*/

private Paint mBorderLinePaint;

/**文本画笔*/

private Paint mTextPaint;

/**要绘制的折线线画笔*/

private Paint mBrokenLinePaint;

/**圆画笔*/

private Paint mCirclePaint;

/**圆的半径*/

private float radius=5;

/**边框的左边距*/

private float mBrokenLineLeft=40;

/**边框的上边距*/

private float mBrokenLineTop=40;

/**边框的下边距*/

private float mBrokenLineBottom=40;

/**边框的右边距*/

private float mBrokenLinerRight=20;

/**需要绘制的宽度*/

private float mNeedDrawWidth;

/**需要绘制的高度*/

private float mNeedDrawHeight;

/**边框文本*/

private int[] valueText =new int[]{40,30,20,10,0};

/**数据值*/

private int[] value=new int[]{11,10,15,12,34,12,22,23,33,13};

/**图表的最大值*/

private int maxVlaue=40;

参数准备好 首先 重写onMeasure 初始化参数

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

mViewHeight = getMeasuredHeight();

mViewWidth = getMeasuredWidth();

initNeedDrawWidthAndHeight();

initPaint();

}

/**初始化绘制折线图的宽高*/

private void initNeedDrawWidthAndHeight(){

mNeedDrawWidth = mViewWidth-mBrokenLineLeft-mBrokenLinerRight;

mNeedDrawHeight = mViewHeight-mBrokenLineTop-mBrokenLineBottom;

}

/**初始化画笔*/

private void initPaint() {

/**初始化文本画笔*/

if(mTextPaint==null){

mTextPaint=new Paint();

}

initPaint(mTextPaint);

/**初始化边框线画笔*/

if(mBorderLinePaint==null){

mBorderLinePaint=new Paint();

mBorderLinePaint.setTextSize(20);

}

initPaint(mBorderLinePaint);

/**初始化折线画笔*/

if(mBrokenLinePaint==null){

mBrokenLinePaint=new Pa