Android自定义折线图

最近学习了一波自定义View,顺便做了一个demo,是按照另一篇文章来实现的。我这里主要分析一下思路,最后会附上全部代码。
https://www.jianshu.com/p/baa08e3200bc

系列文章
Android自定义曲线图

效果图

原图去他的文章看,可以左右滑动。

思路解析

1、画X轴
2、画Y轴
3、画虚线
4、画折线和节点圆圈
5、滑动手势

先给不太熟悉自定义View的朋友打打气,以前我也以为这很难,但是一步步拆解开之后,真的不难。里面无非就是绘制基本的图形,画线,滑动手势监听,绘制图形的时候把位置确定后就行。

1、画X轴

X轴由2部分组成,有刻度的地方+延伸出的箭头。所以只需要确定折线图的坐标原点和x轴的终点即可。x轴上的刻度线和下方对应的文字也不难,只要确定x坐标的间隔和总数,循环的drawLinedrawText即可。

2、画Y轴

和画X轴同理,只是方向变了而已。

3、画虚线

虚线是用DashPathEffectdrawPath来实现,然后只需要通过y轴的间隔来确定虚线的起点和终点即可

4、画折线和节点圆圈

画折线最重要的是确定2个点的位置,折线上的点的x坐标是很好确定的,因为第一个点的x坐标是定死的,后面的只需要知道是第几个点和x坐标间隔就可以算出;而y坐标要麻烦一点,具体思路如下:

//y轴最小单位的距离
float aver = (lableCountY - 1) * intervalY / (maxValueY - minValueY); 

 Path path = new Path();
        //先移动到第一个点的位置
        path.moveTo(firstPointX, mHeight - paddingBottom - leftRightExtra - yValues.get(0) * aver + minValueY * aver);
        //绘制折线
        for (int i = 0; i < yValues.size(); i++) {
            path.lineTo(firstPointX + i * intervalX, mHeight - paddingBottom - leftRightExtra - yValues.get(i) * aver + minValueY * aver);
        }
        canvas.drawPath(path, paintBlue);

画连接2条线段的圆圈

// 折线中的圆点
        for (int i = 0; i < yValues.size(); i++) {
            canvas.drawCircle(firstPointX + i * intervalX,
                    mHeight - paddingBottom - leftRightExtra - yValues.get(i) * aver + minValueY * aver, bigCircleR, paintBlue);
            //小圆的颜色和view背景颜色相同,这样看上去折线是没有穿透圆的
            canvas.drawCircle(firstPointX + i * intervalX,
                    mHeight - paddingBottom - leftRightExtra - yValues.get(i) * aver + minValueY * aver, smallCircleR, paintBack);
        }

注意:这里我用了2个圆圈,第二个小圆的目的是为了遮盖圆圈中被折线穿过的那部分,你可以把第二个圆圈注释掉看看效果就清楚了。

5、滑动手势
不多讲了,就是通过滑动监听,改变折线上第一个点的位置就好。滑动的过程。


但是滑动过程,会有一部分超出坐标原点了,那怎么办呢?其实没那么复杂,我用了一个最简单的方式,画一个矩形,范围如图所示,颜色和View的背景颜色相同,就可以遮挡住超出的这部分了,

        Paint paintBack = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintBack.setColor(Color.parseColor("#272727"));
        paintBack.setStyle(Paint.Style.FILL);

        //将折线超出x轴坐标的部分截取掉(左边)
        paintBack.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
        RectF rectF = new RectF(0, 0, originX, mHeight);
        canvas.drawRect(rectF, paintBack);

Github代码:
https://github.com/zhouxu88/BrokeLineView

你可能感兴趣的:(Android自定义折线图)