模仿小米的进度控件
废话少说，咱们先上效果图：
github地址：https://github.com/niniloveyou/GradeProgressView
欢迎前去点个赞（star）
这个效果的使用场景并不多，主要是各种检测的时候，比如垃圾清理，手机安全检测， 当然如果你不嫌弃这个效果丑， 也可以用作进度条。哈哈。
下面说点干货分析下这个效果怎么实现：
拿到这个效果首先想想主要有哪些技术难点：
1.进度条
2.中间的指针怎么弄
.
.
.
.
1.进度条
有人说进度条还不容易吗？ 就这样写：
mPaint.setPathEffect(newDashPathEffect(newfloat[]{dashWith, dashSpace}, 。。。));
canvas.drawArc(mRectF,135,270, false,mPaint);
mPaint.setColor(Color.WHITE);canvas.drawArc(mRectF,135, degree, false, mPaint);
设置个PathEffect
然后画个圆弧，给画笔设置颜色然后根据进度，算出角度， 然后再画出一个圆弧，覆盖第一个圆弧的部分不就行了。废话这么多。
不过我想说的too young too simple. 当时我也是这样想的，于是就实现吧！ 做好了先画个50% （也就是第二个圆弧覆盖第一个圆弧的一半）试试，不错啊perfect看来是这样的， 再来个30%试试尼玛不对啊， 怎么小格子没有重合，有点错位啊。MDZZ
后来想了一个简单点的办法，不覆盖，画两个圆弧， 但是这两个圆弧是对接起来的。 比如第一个圆弧，画一半，第二个画一半。
//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一个小圆
然后draw指针,这样当画布旋转时指针自然也就旋转了，不懂得要去看看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
欢迎前去点个赞（star）
文／_deadline
关键字：产品经理, centery
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
