Android附带涨潮动画效果的曲线报表绘制

写在前面

本文属于部分原创，实现安卓平台正弦曲线类报表绘制功能介绍，基于网络已有的曲线报表绘制类（LineGraphicView）自己添加了涨潮的渐变动画算法

最终效果图

废话少说，直接上源码

一、自定义View LineGraphicView，本类注释不算多，能搜到这篇文章的朋友看懂代码应该不会有障碍

import java.util.ArrayList;import android.content.Context;import android.content.res.Resources;import android.graphics.Canvas;import android.graphics.Color;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;import android.view.animation.Animation;import android.view.animation.Transformation;class LineGraphicView extends View {/** * 公共部分 */private static final int CIRCLE_SIZE = 10;private static int yPos = 0;private float aniProgress;// 实现动画的值private HistogramAnimation ani;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 = 10;private int marginBottom = 40;/** * 曲线上总点数 */private Point[] mPoints;/** * 纵坐标值 */private ArrayList<Double> yRawData;/** * 横坐标值 */private ArrayList<String> xRawDatas;private ArrayList<Integer> xList = new ArrayList<Integer>();// 记录每个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);ani = new HistogramAnimation();ani.setDuration(1000);startAnimation(ani);}@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(Color.GRAY);drawAllXLine(canvas);// 画直线（纵向）drawAllYLine(canvas);// 点的操作设置mPoints = getPoints();mPaint.setColor(Color.RED);mPaint.setStrokeWidth(dip2px(0.2f));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++) {if (i == 0) {yPos = bheight - (bheight / spacingHeight) * i + marginTop;}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(18), canvas);// X坐标}}private void drawScrollLine(Canvas canvas) {// 画曲线int sh = 0;int eh = 0;Point startp = new Point();Point endp = new Point();for (int i = 0; i < mPoints.length - 1; i++) {startp = mPoints[i];endp = mPoints[i + 1];if (aniProgress <= 0) {sh = yPos;eh = yPos;} else if (aniProgress >= 1) {sh = startp.y;eh = endp.y;} else {sh = (int) ((int) startp.y + (yPos - startp.y) * (1 - aniProgress));eh = (int) ((int) endp.y + (yPos - endp.y) * (1 - aniProgress));}startp.y = sh;endp.y = eh;int wt = (startp.x + endp.x) / 2;Point p3 = new Point();Point p4 = new Point();p3.x = wt;p3.y = sh;p4.x = wt;p4.y = eh;Path path = new Path();path.moveTo(startp.x, startp.y);// (51, 991),(172, 670)path.cubicTo(p3.x, p3.y, p4.x, p4.y, endp.x, endp.y);// canvas.drawPath(path, mPaint);path.lineTo(endp.x, yPos);path.lineTo(startp.x, yPos);path.lineTo(startp.x, endp.y);Paint paint = new Paint();paint.setColor(Color.CYAN);paint.setStyle(Paint.Style.FILL);// 设置抗锯齿。paint.setAntiAlias(true);canvas.drawPath(path, paint);}}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(Color.BLACK);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;}/** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */private int dip2px(float dpValue) {return (int) (dpValue * dm.density + 0.5f);}private class HistogramAnimation extends Animation {@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {super.applyTransformation(interpolatedTime, t);aniProgress = interpolatedTime;postInvalidate();}}

二、入口页面调用这个自定义控件

import java.util.ArrayList;import java.util.Random;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;@SuppressLint("ClickableViewAccessibility")public class MainActivity extends Activity {LineGraphicView tu;ArrayList<Double> yList;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();}private void initViews() {tu = (LineGraphicView) findViewById(R.id.histogram);yList = new ArrayList<Double>();Random random = new Random();for (int i = 0; i < 16; i++) {yList.add(random.nextDouble() * 10);}ArrayList<String> xRawDatas = new ArrayList<String>();for (int i = 0; i < 16; i++) {xRawDatas.add(String.valueOf(i));}tu.setData(yList, xRawDatas, 10, 1);}}

三、Mainactivity引用的activity_main.xml如下

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <com.style.histogram.LineGraphicView        android:id="@+id/histogram"        android:layout_width="wrap_content"        android:layout_height="match_parent" >    </com.style.histogram.LineGraphicView></LinearLayout>

结束语

上述代码亲测有效，但也只是实现了基本功能，封装有待完善，欢迎宝宝们来学习交流~