最近學(xué)習(xí)了一波自定義View，順便做了一個demo，是按照另一篇文章來實現(xiàn)的。我這里主要分析一下思路疚察，最后會附上全部代碼。
http://www.reibang.com/p/baa08e3200bc
系列文章
Android自定義曲線圖
效果圖
原圖去他的文章看仇奶，可以左右滑動貌嫡。
思路解析
1、畫X軸
2该溯、畫Y軸
3岛抄、畫虛線
4、畫折線和節(jié)點圓圈
5狈茉、滑動手勢
先給不太熟悉自定義View的朋友打打氣夫椭，以前我也以為這很難，但是一步步拆解開之后氯庆，真的不難蹭秋。里面無非就是繪制基本的圖形扰付，畫線，滑動手勢監(jiān)聽仁讨，繪制圖形的時候把位置確定后就行羽莺。
1、畫X軸
X軸由2部分組成洞豁，有刻度的地方+延伸出的箭頭禽翼。所以只需要確定折線圖的坐標(biāo)原點和x軸的終點即可。x軸上的刻度線和下方對應(yīng)的文字也不難族跛，只要確定x坐標(biāo)的間隔和總數(shù)，循環(huán)的drawLine 锐墙、drawText即可礁哄。
2、畫Y軸
和畫X軸同理溪北，只是方向變了而已桐绒。
3、畫虛線
虛線是用DashPathEffect之拨、drawPath來實現(xiàn)茉继，然后只需要通過y軸的間隔來確定虛線的起點和終點即可
4、畫折線和節(jié)點圓圈
畫折線最重要的是確定2個點的位置蚀乔，折線上的點的x坐標(biāo)是很好確定的烁竭，因為第一個點的x坐標(biāo)是定死的，后面的只需要知道是第幾個點和x坐標(biāo)間隔就可以算出吉挣；而y坐標(biāo)要麻煩一點派撕，具體思路如下：
//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氯哮、滑動手勢
不多講了际跪，就是通過滑動監(jiān)聽，改變折線上第一個點的位置就好喉钢∧反颍滑動的過程。
但是滑動過程出牧，會有一部分超出坐標(biāo)原點了穴肘，那怎么辦呢？其實沒那么復(fù)雜舔痕，我用了一個最簡單的方式评抚，畫一個矩形豹缀，范圍如圖所示，顏色和View的背景顏色相同慨代，就可以遮擋住超出的這部分了邢笙，
Paint paintBack = new Paint(Paint.ANTI_ALIAS_FLAG);
paintBack.setColor(Color.parseColor("#272727"));
paintBack.setStyle(Paint.Style.FILL);
//將折線超出x軸坐標(biāo)的部分截取掉（左邊）
paintBack.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
RectF rectF = new RectF(0, 0, originX, mHeight);
canvas.drawRect(rectF, paintBack);
