模仿小米安全中心检测效果(进度条效果)

模仿小米安全中心检测效果

废话少说,咱们先上效果图:

github地址: https://github.com/niniloveyou/GradeProgressView

欢迎前去点个赞(star)
这里写图片描述

这个效果的使用场景并不多,主要是各种检测的时候,比如垃圾清理,手机安全检测, 当然如果你不嫌弃这个效果丑, 也可以用作进度条。哈哈。

下面说点干货分析下这个效果怎么实现:
拿到这个效果首先想想主要有哪些技术难点:

1.进度条
2.中间的指针怎么弄

.
.
.
.

1.进度条

有人说进度条还不容易吗? 就这样写:

mPaint.setPathEffect(new DashPathEffect(new float[]{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();

下面上完整代码:

package deadline.grade;

import android.animation.ValueAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值