[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开源图表库（一）之折线图