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坐标的间隔和总数，循环的drawLine 、drawText即可。

2、画Y轴

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

3、画虚线

虚线是用DashPathEffect、drawPath来实现，然后只需要通过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