android 自定义折线图

最新推荐文章于 2024-06-15 19:15:07 发布

zhouzhangcheng123

最新推荐文章于 2024-06-15 19:15:07 发布

阅读量7.1k

点赞数 1

分类专栏： Android-基本资料文章标签： android 动画效果折线图

本文链接：https://blog.csdn.net/zhouzhangcheng123/article/details/51013034

版权

Android-基本资料专栏收录该内容

11 篇文章 0 订阅

订阅专栏

转载请标明出处：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;
	// 左上角x
	private int LEFTUPX = 50;
	// 左上角Y
	private int LEFTUPY = 50;
	// 左下角Y
	private int LEFTDOWNY = 400;
	// 右下角x
	private 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; // 最大10

	private 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);
	}

	@Override
	protected 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();
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub 点击效果没有写了
		System.out.println("==========" + event.getX() + "===" + event.getY());
		return super.onTouchEvent(event);
	}
}