android 自定义折线图

转载请标明出处：http://blog.csdn.net/zhouzhangcheng123/article/details/51013034

先不多说，直接先看效果图。

思路：

1.什么都不管，先把折线图表格画出来再说

2.画出折线

3.做出动画效果

4.最后做的阴影效果

代码解释：

1：自定义view，重写 onDraw方法。

先使用画笔画出折线图表格。

/** * 外框线 */// 设置颜色getPaint().setColor(Color.parseColor("#A5A5A5"));// 设置宽度getPaint().setStrokeWidth(2);// 线的坐标点 （四个为一条线）float[] pts = { LEFTUPX, LEFTUPY - 20, LEFTUPX, LEFTDOWNY, LEFTUPX, LEFTDOWNY, RIGHTDOWNX + 20, LEFTDOWNY };// 画线canvas.drawLines(pts, getPaint());/** * 箭头 */// 通过路径画三角形Path path = new Path();getPaint().setStyle(Paint.Style.FILL);// 设置为空心path.moveTo(LEFTUPX - 5, LEFTUPY - 20);// 此点为多边形的起点path.lineTo(LEFTUPX + 5, LEFTUPY - 20);path.lineTo(LEFTUPX, LEFTUPY - 35);path.close(); // 使这些点构成封闭的多边形canvas.drawPath(path, getPaint());// 第二个箭头path.moveTo(RIGHTDOWNX + 20, LEFTDOWNY - 5);// 此点为多边形的起点path.lineTo(RIGHTDOWNX + 20, LEFTDOWNY + 5);path.lineTo(RIGHTDOWNX + 35, LEFTDOWNY);canvas.drawPath(path, getPaint());/** *  中间虚线 */int updownlines = (LEFTDOWNY - LEFTUPY) / UPDOWNSPACE;float[] pts2 = new float[(updownlines + leftrightlines) * 4];// 计算位置for (int i = 0; i < updownlines; i++) {float x1 = LEFTUPX;float y1 = LEFTDOWNY - (i + 1) * UPDOWNSPACE;float x2 = RIGHTDOWNX;float y2 = LEFTDOWNY - (i + 1) * UPDOWNSPACE;pts2[i * 4 + 0] = x1;pts2[i * 4 + 1] = y1;pts2[i * 4 + 2] = x2;pts2[i * 4 + 3] = y2;getPaint().setColor(Color.BLACK);getPaint().setTextSize(25);canvas.drawText(String.valueOf(i), x1 - 25, y1 + 10, getPaint());}// 计算位置for (int i = 0; i < leftrightlines; i++) {float x1 = LEFTUPX + (i + 1) * LEFTRIGHTSPACE;float y1 = LEFTUPY;float x2 = LEFTUPX + (i + 1) * LEFTRIGHTSPACE;float y2 = LEFTDOWNY;pts2[(i + updownlines) * 4 + 0] = x1;pts2[(i + updownlines) * 4 + 1] = y1;pts2[(i + updownlines) * 4 + 2] = x2;pts2[(i + updownlines) * 4 + 3] = y2;canvas.drawText(String.valueOf(i), x2 - 10, y2 + 30, getPaint());}getPaint().setColor(Color.parseColor("#E0E0E0"));getPaint().setStrokeWidth(1);canvas.drawLines(pts2, getPaint());

2.画出折线就更简单了，只需要画出多条线就行了，讲解就把画线动画效果一起讲解

// 线的路径Path path2 = new Path();// 共几个转折点for (int i = 0; i < count; i++) {if (i == 0) {path2.moveTo(listX.get(i), listY.get(i));} else {path2.lineTo(listX.get(i), listY.get(i));}}// 上一个点  减去 下一个点的位置 计算中间点位置path2.lineTo(listX.get(count - 1) + (listX.get(count) - listX.get(count - 1)) / 50 * number,listY.get(count - 1) + (listY.get(count) - listY.get(count - 1)) / 50 * number);getPaint().setColor(Color.parseColor("#FF7A00"));getPaint().setStrokeWidth(3);getPaint().setStyle(Paint.Style.STROKE);// 设置为空心canvas.drawPath(path2, getPaint());

定时器 handler写的，习惯用这个了

private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {if (number < 50) {number++;invalidate();handler.sendEmptyMessageDelayed(1, 80);} else if (count < leftrightlines - 1) {number = 1;count++;invalidate();handler.sendEmptyMessageDelayed(1, 80);} else {isFinish = true;invalidate();}};};

4.阴影效果

主要修改画笔

// 修改笔的颜色private Paint getShadeColorPaint() {Shader mShader = new LinearGradient(300, 50, 300, 400,new int[] { Color.parseColor("#55FF7A00"), Color.TRANSPARENT }, null, Shader.TileMode.CLAMP);// 新建一个线性渐变，前两个参数是渐变开始的点坐标，第三四个参数是渐变结束的点的坐标。连接这2个点就拉出一条渐变线了，玩过PS的都懂。然后那个数组是渐变的颜色。下一个参数是渐变颜色的分布，如果为空，每个颜色就是均匀分布的。最后是模式，这里设置的是循环渐变getPaint().setShader(mShader);return getPaint();}

最后整个view代码，我也是无聊的时候写出来。很多错误地方，大神勿喷！！！

package com.example.draw.view;import java.util.ArrayList;import java.util.Arrays;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.Path;import android.graphics.RadialGradient;import android.graphics.Shader;import android.os.Handler;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.widget.LinearLayout;public class BrokenLineChartView extends View {private Paint paint;// 左上角xprivate int LEFTUPX = 50;// 左上角Yprivate int LEFTUPY = 50;// 左下角Yprivate int LEFTDOWNY = 400;// 右下角xprivate int RIGHTDOWNX = 600;// 上下间隔private int UPDOWNSPACE = 50;// 左右间隔private int LEFTRIGHTSPACE = 50;private int leftrightlines = (RIGHTDOWNX - LEFTUPX) / LEFTRIGHTSPACE;;private boolean isOne;private ArrayList<Float> listX = new ArrayList<>();private ArrayList<Float> listY = new ArrayList<>();private int count = 1;private int number = 1; // 最大10private boolean isFinish;private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {if (number < 50) {number++;invalidate();handler.sendEmptyMessageDelayed(1, 80);} else if (count < leftrightlines - 1) {number = 1;count++;invalidate();handler.sendEmptyMessageDelayed(1, 80);} else {isFinish = true;invalidate();}};};public BrokenLineChartView(Context context) {super(context);}public BrokenLineChartView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public BrokenLineChartView(Context context, AttributeSet attrs) {super(context, attrs);for (int i = 0; i < leftrightlines; i++) {float x1 = LEFTUPX + (i + 1) * LEFTRIGHTSPACE;float y1 = (float) ((Math.random() * 350) + 50);listX.add(x1);listY.add(y1);}// String layoutWidth =// attrs.getAttributeValue("http://schemas.android.com/apk/res/android",// "layout_width");// String layoutHeight =// attrs.getAttributeValue("http://schemas.android.com/apk/res/android",// "layout_height");// System.out.println("========="+layoutWidth+"===layoutHeight=="+layoutHeight);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);getPaint().reset();/** * 外框线 */// 设置颜色getPaint().setColor(Color.parseColor("#A5A5A5"));// 设置宽度getPaint().setStrokeWidth(2);// 线的坐标点 （四个为一条线）float[] pts = { LEFTUPX, LEFTUPY - 20, LEFTUPX, LEFTDOWNY, LEFTUPX, LEFTDOWNY, RIGHTDOWNX + 20, LEFTDOWNY };// 画线canvas.drawLines(pts, getPaint());/** * 箭头 */// 通过路径画三角形Path path = new Path();getPaint().setStyle(Paint.Style.FILL);// 设置为空心path.moveTo(LEFTUPX - 5, LEFTUPY - 20);// 此点为多边形的起点path.lineTo(LEFTUPX + 5, LEFTUPY - 20);path.lineTo(LEFTUPX, LEFTUPY - 35);path.close(); // 使这些点构成封闭的多边形canvas.drawPath(path, getPaint());// 第二个箭头path.moveTo(RIGHTDOWNX + 20, LEFTDOWNY - 5);// 此点为多边形的起点path.lineTo(RIGHTDOWNX + 20, LEFTDOWNY + 5);path.lineTo(RIGHTDOWNX + 35, LEFTDOWNY);canvas.drawPath(path, getPaint());/** *  中间虚线 */int updownlines = (LEFTDOWNY - LEFTUPY) / UPDOWNSPACE;float[] pts2 = new float[(updownlines + leftrightlines) * 4];// 计算位置for (int i = 0; i < updownlines; i++) {float x1 = LEFTUPX;float y1 = LEFTDOWNY - (i + 1) * UPDOWNSPACE;float x2 = RIGHTDOWNX;float y2 = LEFTDOWNY - (i + 1) * UPDOWNSPACE;pts2[i * 4 + 0] = x1;pts2[i * 4 + 1] = y1;pts2[i * 4 + 2] = x2;pts2[i * 4 + 3] = y2;getPaint().setColor(Color.BLACK);getPaint().setTextSize(25);canvas.drawText(String.valueOf(i), x1 - 25, y1 + 10, getPaint());}// 计算位置for (int i = 0; i < leftrightlines; i++) {float x1 = LEFTUPX + (i + 1) * LEFTRIGHTSPACE;float y1 = LEFTUPY;float x2 = LEFTUPX + (i + 1) * LEFTRIGHTSPACE;float y2 = LEFTDOWNY;pts2[(i + updownlines) * 4 + 0] = x1;pts2[(i + updownlines) * 4 + 1] = y1;pts2[(i + updownlines) * 4 + 2] = x2;pts2[(i + updownlines) * 4 + 3] = y2;canvas.drawText(String.valueOf(i), x2 - 10, y2 + 30, getPaint());}getPaint().setColor(Color.parseColor("#E0E0E0"));getPaint().setStrokeWidth(1);canvas.drawLines(pts2, getPaint());if (isOne) {// 线的路径Path path2 = new Path();// 共几个转折点for (int i = 0; i < count; i++) {if (i == 0) {path2.moveTo(listX.get(i), listY.get(i));} else {path2.lineTo(listX.get(i), listY.get(i));}}// 上一个点  减去 下一个点的位置 计算中间点位置path2.lineTo(listX.get(count - 1) + (listX.get(count) - listX.get(count - 1)) / 50 * number,listY.get(count - 1) + (listY.get(count) - listY.get(count - 1)) / 50 * number);getPaint().setColor(Color.parseColor("#FF7A00"));getPaint().setStrokeWidth(3);getPaint().setStyle(Paint.Style.STROKE);// 设置为空心canvas.drawPath(path2, getPaint());path2.lineTo(listX.get(count - 1) + (listX.get(count) - listX.get(count - 1)) / 50 * number, LEFTDOWNY);path2.lineTo(listX.get(0), LEFTDOWNY);path2.lineTo(listX.get(0), listY.get(0));getPaint().setStyle(Paint.Style.FILL);// 设置为空心canvas.drawPath(path2, getShadeColorPaint());getPaint().reset();// 画出转折点圆圈for (int i = 0; i < count; i++) {// 画外圆getPaint().setColor(Color.parseColor("#FF7A00"));getPaint().setStyle(Paint.Style.FILL);// 设置为空心canvas.drawCircle(listX.get(i), listY.get(i), 7, getPaint());// 画中心点为白色getPaint().setColor(Color.WHITE);getPaint().setStyle(Paint.Style.FILL);canvas.drawCircle(listX.get(i), listY.get(i), 4, getPaint());}if (isFinish) {getPaint().setColor(Color.parseColor("#FF7A00"));getPaint().setStyle(Paint.Style.FILL);// 设置为空心canvas.drawCircle(listX.get(count), listY.get(count), 7, getPaint());getPaint().setColor(Color.WHITE);getPaint().setStyle(Paint.Style.FILL);canvas.drawCircle(listX.get(count), listY.get(count), 4, getPaint());}handler.sendEmptyMessage(1);}}public void drawBrokenLine() {isOne = true;number = 1;count = 1;isFinish = false;invalidate();}// 获取笔private Paint getPaint() {if (paint == null)paint = new Paint();return paint;}// 修改笔的颜色private Paint getShadeColorPaint() {Shader mShader = new LinearGradient(300, 50, 300, 400,new int[] { Color.parseColor("#55FF7A00"), Color.TRANSPARENT }, null, Shader.TileMode.CLAMP);// 新建一个线性渐变，前两个参数是渐变开始的点坐标，第三四个参数是渐变结束的点的坐标。连接这2个点就拉出一条渐变线了，玩过PS的都懂。然后那个数组是渐变的颜色。下一个参数是渐变颜色的分布，如果为空，每个颜色就是均匀分布的。最后是模式，这里设置的是循环渐变getPaint().setShader(mShader);return getPaint();}@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stub 点击效果没有写了System.out.println("==========" + event.getX() + "===" + event.getY());return super.onTouchEvent(event);}}