[MD]模仿百度手机助手动态折线图

最近下了个百度手机助手，看到里面有很炫酷的折现图，效果是这样的：



于是我自己想尝试做一下动态折线图，这里 我使用的是 helloCharts 这个开源项目, 可以到git上下载相关代码：http://github.com/lecho/hellocharts-android

在布局文Activity_main,xml中添加LineChartView

<lecho.lib.hellocharts.view.LineChartView
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent" />

在MainActivity.java中声明该View

mChart = (LineChartView)findViewById(R.id.chart);

接下去，就是对折线图的初始化

//设置缩放和平移
mChart.setInteractive(true);
mChart.setZoomType(ZoomType.HORIZONTAL);
mChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
mChart.setVisibility(View.VISIBLE);

//X-Y Axis Configure
axisX.setHasTiltedLabels(true);
axisX.setTextColor(Color.GRAY);
//设置X轴名称
axisX.setName("X-Axis");
//Update Axis Values
axisX.setValues(mAxisValues);
// 设置X轴和Y轴的位置
data.setAxisXBottom(axisX);
data.setAxisYLeft(axisY);

接下来是最重要的部分，怎样才能让我们的折线图动起来呢，其实我的想法很简单，就是折线一段一段的画出来，只要时间设置合理，利用人的视觉残留，就会有动起来的效果

这里，我们使用了定时任务，定时发送message更新UI

mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
updateChart();
super.handleMessage(msg);
}
};

mTimerTask = new TimerTask() {
@Override
public void run() {
mHandler.sendEmptyMessage(1);
}
};
// set the timer to post the line chart
timer.schedule(mTimerTask, 50, 100);

每100ms调用 updateChart 更新折线图

void updateChart() {

if( mCount < 30) {
//设置坐标值并加入值集合中
mPointValues.add(new PointValue(mCount, new Random().nextInt(10)));
//设置坐标点提示文字并加入点集合中
mAxisValues.add(new AxisValue(mCount).setLabel(mCount+""));
mCount++;
} else {
//超过30个点移除message并取消定时器
mHandler.removeMessages(1);
timer.cancel();
return;
}
//定义折线样式
Line line = new Line(mPointValues).setColor(Color.GREEN).setCubic(false);
//加入折线集合中
lines.add(line);
//设置折线图
data.setLines(lines);
mChart.setLineChartData(data);
}

效果如下图



源码请点击这里下载

实际上，这个并不是百度手机管家上的UI效果，我只是起了个有绰头的名字而已，如果你晓得具体怎么做，请告诉我，不胜感激！~

参考资料

hellocharts-android开源图表库（效果非常好）

HelloCharts开源图表库（一）之折线图