写在前面

本文属于部分原创，实现安卓平台正弦曲线类报表绘制功能介绍，基于网络已有的曲线报表绘制类(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 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);

ani = new HistogramAnimation();

ani.setDuration(1000);

startAnimation(ani);

}

@Override

protected 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;

}

}

@Override

protected 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 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);

}

private class HistogramAnimation extends Animation {

@Override

protected 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 yList;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initViews();

}

private void initViews() {

tu = (LineGraphicView) findViewById(R.id.histogram);

yList = new ArrayList();

Random random = new Random();

for (int i = 0; i < 16; i++) {

yList.add(random.nextDouble() * 10);

}

ArrayList xRawDatas = new ArrayList();

for (int i = 0; i < 16; i++) {

xRawDatas.add(String.valueOf(i));

}

tu.setData(yList, xRawDatas, 10, 1);

}

}三、Mainactivity引用的activity_main.xml如下

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:id="@+id/histogram"

android:layout_width="wrap_content"

android:layout_height="match_parent" >

结束语

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