最近学习了一波自定义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);
