廢話少說，咱們先上效果圖：
github地址：https://github.com/niniloveyou/GradeProgressView
歡迎前去點(diǎn)個(gè)贊（star）
這個(gè)效果的使用場景并不多，主要是各種檢測的時(shí)候，比如垃圾清理，手機(jī)安全檢測， 當(dāng)然如果你不嫌棄這個(gè)效果丑， 也可以用作進(jìn)度條。哈哈。
下面說點(diǎn)干貨分析下這個(gè)效果怎么實(shí)現(xiàn)：
拿到這個(gè)效果首先想想主要有哪些技術(shù)難點(diǎn)：
1.進(jìn)度條
2.中間的指針怎么弄
.
.
.
.
1.進(jìn)度條
有人說進(jìn)度條還不容易嗎？ 就這樣寫：
mPaint.setPathEffect(newDashPathEffect(newfloat[]{dashWith, dashSpace}, 。。。));
canvas.drawArc(mRectF,135,270, false,mPaint);
mPaint.setColor(Color.WHITE);canvas.drawArc(mRectF,135, degree, false, mPaint);
設(shè)置個(gè)PathEffect
然后畫個(gè)圓弧，給畫筆設(shè)置顏色然后根據(jù)進(jìn)度，算出角度， 然后再畫出一個(gè)圓弧，覆蓋第一個(gè)圓弧的部分不就行了。廢話這么多。
不過我想說的too young too simple. 當(dāng)時(shí)我也是這樣想的，于是就實(shí)現(xiàn)吧！ 做好了先畫個(gè)50% （也就是第二個(gè)圓弧覆蓋第一個(gè)圓弧的一半）試試，不錯(cuò)啊perfect看來是這樣的， 再來個(gè)30%試試尼瑪不對啊， 怎么小格子沒有重合，有點(diǎn)錯(cuò)位啊。MDZZ
后來想了一個(gè)簡單點(diǎn)的辦法，不覆蓋，畫兩個(gè)圓弧， 但是這兩個(gè)圓弧是對接起來的。 比如第一個(gè)圓弧，畫一半，第二個(gè)畫一半。
//draw background arc
canvas.drawArc(mRectF,135+ degree,270- degree,false, mPaint);
//draw progress arc
canvas.drawArc(mRectF,135, degree,false, mProgressPaint);
2.中間的指針怎么弄
先畫出指針的路徑
mPointerPath = new Path();
mPointerPath.moveTo(centerX + pointRadius, centerY -7);
mPointerPath.lineTo(centerX + pointRadius, centerY +7);
mPointerPath.lineTo(mRectF.right- pointGap - lineWidth /2,centerY);
mPointerPath.lineTo(centerX + pointRadius, centerY -7);
mPointerPath.close();
在中心draw一個(gè)小圓
然后draw指針,這樣當(dāng)畫布旋轉(zhuǎn)時(shí)指針自然也就旋轉(zhuǎn)了，不懂得要去看看canvas.save(), canvas.restore()的作用
//draw pointer
canvas.drawCircle(centerX, centerY, pointRadius,mInnerCirclePaint);
canvas.save();
canvas.rotate(135+ degree, centerX, centerY);
canvas.drawPath(mPointerPath, mPointerPaint);
canvas.restore();
github地址：https://github.com/niniloveyou/GradeProgressView
歡迎前去點(diǎn)個(gè)贊（star）
