之前写过一个简单的图表绘制demo：Android图表绘制，但是实际应用中只是简单的绘制数据并不能达到最好的效果。考虑到实际体验，在之前的demo基础上增加动态绘制动画以及图表各项属性设置。
下面看下的静态效果图：
这里写图片描述
整个布局分为三个部分，即上方的四个按钮区域，下方的线条说明区域，以及我们本次需要开发的图表区域。上部分的是四个自定义按钮，代码比较简单，此处不多做说明。
我们总体需要绘制2条折线和若干数量的柱状图，首先是绘制折线，参考一篇博文的方法：http://blog.csdn.net/tianjian4592/article/details/47067161，这篇博文通过PathMeasure和属性动画结合的方式绘制一个动态路径特效，由于我们这里并非是要动态绘制图表而非根据路径动态绘制一个圆，所以针对原博文做了一些修改。
首先是获取整个折线的path，然后将这个path设置给一个PathMeasure对象。
// 获取room temp绘线Path数据
private void initRoomTempPath(float[] data) {
mRoomTempPath.reset();
Path path = new Path();
float pointX;
float pointY;
mRoomTempPath.moveTo(Xpoint + xFirstPointOffset,
getDataY(data[0], Ylabel));
path.moveTo(Xpoint + xFirstPointOffset,
getDataY(data[0], Ylabel));
for (int i = 0; i < Xlabel.length; i++) {
float startX = Xpoint + i * Xscale + xFirstPointOffset;
if (i != 0) {
pointX = Xpoint + (i - 1) * Xscale + xFirstPointOffset;
pointY = getDataY(data[i - 1], Ylabel);
path.lineTo(pointX, pointY);
}
if (i == Xlabel.length - 1) {
pointX = startX;
pointY = getDataY(data[i], Ylabel);
path.lineTo(pointX, pointY);
}
}
mRoomTempPathMeasure = new PathMeasure(path, false);
}
然后创建一个ValueAnimator，在这个ValueAnimator中我们根据ValueAnimator计算出的当前point值来动态的更新一个新的path。
private void startRoomTempAnimation() {
if (roomTempValueAnimator != null) {
roomTempValueAnimator.cancel();
}
roomTempValueAnimator = ValueAnimator.ofFloat(0,
mRoomTempPathMeasure.getLength());
roomTempValueAnimator.setDuration(duration);
// 减速插值器
roomTempValueAnimator.setInterpolator(new DecelerateInterpolator());
roomTempValueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) animation.getAnimatedValue();
// 获取当前点坐标封装到mCurrentPosition
mRoomTempPathMeasure.getPosTan(value, mCurrentPosition, null);
mRoomTempPath.lineTo(mCurrentPosition[0], mCurrentPosition[1]);
postInvalidate();
}
});
roomTempValueAnimator.start();
}
最后再onDraw里面绘制path。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.BLACK);
drawGreyXLine(canvas, linePaint);
drawXLine(canvas, linePaint);
drawUnit(canvas);
canvas.drawPath(mRoomTempPath, roomTempPaint);
if (roomTempDataArray.length > 1) {
drawData(canvas, roomTempDataArray, roomTempLineColor);
}
}
然后我们看到了如下的效果：
这里写图片描述
看起来好像一切正常，似乎达到了我们需要的效果，但是将duration的值设置小一些之后，整个路径绘制都出错了。
这里写图片描述
具体原因是什么呢，其实也很简单，当duration值设置的比较大的时候，ValueAnimator中取到的点坐标自然比较密集，这样mRoomTempPath的路径值也比较平均，绘制起来自然看起来比较完善。然而当duration值设置的比较小的时候，ValueAnimator取到点坐标跨度比较大，如果是一条直线还没什么问题，但是一旦路径是折线，自然就出现问题了，因为我们的路径都是两点两点之间lineTo连接的。
由于上面的这种方法存在很大的问题，不得不想一个新的方法，一番查阅之后，发现了一种新的思路，通过DashPathEffect来实现，具体的思路也比较简单，可参考原博主：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0907/3429.html，稍微做了一些修整之后，我们的代码修改如下。
// 获取room temp绘线Path数据
private void initRoomTempPath(float[] data) {
mRoomTempPath.reset();
//Path path = new Path();
float pointX;
float pointY;
// 横向
mRoomTempPath.moveTo(Xpoint + xFirstPointOffset,
getDataY(data[0], Ylabel));
mRoomTempPath.moveTo(Xpoint + xFirstPointOffset, getDataY(data[0], Ylabel));
for (int i = 0; i < Xlabel.length; i++) {
float startX = Xpoint + i * Xscale + xFirstPointOffset;
if (i != 0) {
pointX = Xpoint + (i - 1) * Xscale + xFirstPointOffset;
pointY = getDataY(data[i - 1], Ylabel);
mRoomTempPath.lineTo(pointX, pointY);
}
if (i == Xlabel.length - 1) {
pointX = startX;
pointY = getDataY(data[i], Ylabel);
mRoomTempPath.lineTo(pointX, pointY);
}
}
mRoomTempPathMeasure = new PathMeasure(mRoomTempPath, false);
}
private void startAnimation() {
if (mValueAnimator != null) {
mValueAnimator.cancel();
}
final float targetTempLength = mTargetTempPathMeasure.getLength();
final float roomTempLength = mRoomTempPathMeasure.getLength();
mValueAnimator = ValueAnimator.ofFloat(1, 0);
mValueAnimator.setDuration(duration);
// 减速插值器
mValueAnimator.setInterpolator(new DecelerateInterpolator());
mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float fraction = (Float) animation.getAnimatedValue();
//更新mtargetTempEffect
mtargetTempEffect = new DashPathEffect(new float[]{targetTempLength,
targetTempLength}, fraction * targetTempLength);
targetTempPaint.setPathEffect(mtargetTempEffect);
//更新mRoomTempEffect
mRoomTempEffect = new DashPathEffect(new float[]{roomTempLength, roomTempLength},
fraction * roomTempLength);
roomTempPaint.setPathEffect(mRoomTempEffect);
//更新rect绘制fraction进度
mRectFration = 1 - fraction;//fraction是1->0 我们需要的柱形图绘制比例是0->1
postInvalidate();
}
});
mValueAnimator.start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.BLACK);
drawGreyXLine(canvas, linePaint);
drawUnit(canvas);
if (powerOnTimeDataArray.length > 1) {
drawRect(canvas, powerOnTimeDataArray, powerTimeLineColor);
}
canvas.drawPath(mRoomTempPath, roomTempPaint);
if (roomTempDataArray.length > 1) {
drawData(canvas, roomTempDataArray, roomTempLineColor);
}
canvas.drawPath(mTargetTempPath, targetTempPaint);
if (targetTempDataArray.length > 1) {
drawData(canvas, targetTempDataArray, targetTempLineColor);
}
drawXLine(canvas, linePaint);
}
最后很完美的实现了我们想要的折线动态绘制效果。
接下来是柱形图的动态绘制，一样根据valueAnimator中onAnimationUpdate的fraction来动态的更新每个rect的top值并绘制就可以了：
// 绘制矩形图
private void drawRect(Canvas canvas, float[] data, int dataColor) {
Paint p = new Paint();
float left;
float top;
float right;
float bottom;
float stopY = getDataY(Float.parseFloat(Ylabel[Ylabel.length - 1]),
Ylabel);// 灰色线Y轴位置
float rectYScale = (Ypoint - stopY) / 100;
p.setAntiAlias(true);
p.setStrokeWidth(dataStrokeWidth);
p.setColor(dataColor);
// 横向
for (int i = 0; i < Xlabel.length; i++) {
// 绘制柱形图
if (i != 0) {
left = Xpoint + (i - 1) * Xscale + xFirstPointOffset + Xscale
/ 6;
top = Ypoint - data[i - 1] * rectYScale + lineStrokeWidth;//要绘制的rect最终top值
//起点top + (起点top - 终点top) * mRectFration
rectCurrentTops[i] = Ypoint - (Ypoint - top) * mRectFration;//根据fraction动态更新top值
right = left + Xscale * 4 / 6;
bottom = Ypoint;
canvas.drawRect(left, rectCurrentTops[i], right, bottom, p);//每次valueAnimator更新时重绘最新top值
}
}
}
值得注意的一点是，由于本次demo是根据数据长度动态绘制，所以需要在view onLayout之后才能设置数据给view并正确的绘制，因此在view暴露一个接口给Activity，Activity实现这个接口，在View onLayout之后设置数据。
public interface OnViewLayoutListener {
public void onLayoutSuccess();
}
public void setOnViewLayoutListener(
OnViewLayoutListener onViewLayoutListener) {
this.onViewLayoutListener = onViewLayoutListener;
}
private OnViewLayoutListener onViewLayoutListener;
根据上面的方法将整个demo完成后，效果如下。
这里写图片描述
网友评论