Android仿小米安全中心检测进度条效果

Android仿小米安全中心检测进度条效果,第1张

概述模仿小米安全中心检测效果废话少说,咱们先上效果图:github地址:https://github.com/niniloveyou/GradeProgressView

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

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

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

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

下面说点干货分析下这个效果怎么实现:

拿到这个效果首先想想主要有哪些技术难点:

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,degree,mPaint);

设置个PathEffect
然后画个圆弧,给画笔设置颜色然后根据进度,算出角度, 然后再画出一个圆弧,覆盖第一个圆弧的部分不就行了。废话这么多。
不过我想说的too young too simple. 当时我也是这样想的,于是就实现吧! 做好了先画个50% (也就是第二个圆弧覆盖第一个圆弧的一半)试试,不错啊perfect看来是这样的, 再来个30%试试尼玛不对啊, 怎么小格子没有重合,有点错位啊。MDZZ

后来想了一个简单点的办法,不覆盖,画两个圆弧, 但是这两个圆弧是对接起来的。 比如第一个圆弧,画一半,第二个画一半。

//draw background arccanvas.drawArc(mRectF,135 + degree,270 - degree,mPaint);//draw progress arccanvas.drawArc(mRectF,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 pointercanvas.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;import androID.os.Build;import androID.support.annotation.IntRange;import androID.util.AttributeSet;import androID.util.Log;import androID.vIEw.VIEw;import androID.vIEw.animation.AccelerateDecelerateInterpolator;/** * @author deadline * @time 2016/9/24 */public class GradeProgressVIEw extends VIEw { private static final String TAG = GradeProgressVIEw.class.getSimplename(); private static final int DEFAulT_PROGRESS_color = color.WHITE; private static final int DEFAulT_BACKGROUND_color = 0x5AFFFFFF; private int mBackgroundcolor = DEFAulT_BACKGROUND_color; private int mProgresscolor = DEFAulT_PROGRESS_color; //进度条的每格线宽,间距,长度 private int dashWith = 4; private int dashSpace = 6; private int linewidth = 60; //最外圈线的宽度和与进度条之间的间距 private int outlinewidth = 5; private int gapWIDth = 25; //指针的线宽度, 半径, 以及指针与进度条的间距 private int pointlinewidth = 10; private int poinTradius = 25; private int pointGap = 20; private int mProgress = 0; //外线 private RectF mOuterRectF; private Paint mOuterPaint; //进度条 private RectF mRectF; private Paint mPaint; private Paint mProgresspaint; //指针 private Paint mInnerCirclePaint; private Paint mPointerPaint; private Path mPointerPath; private float centerX; private float centerY; private ValueAnimator animator; private OnProgresschangelistener mListener; public GradeProgressVIEw(Context context) { this(context,null); } public GradeProgressVIEw(Context context,AttributeSet attrs) { this(context,attrs,0); } public GradeProgressVIEw(Context context,AttributeSet attrs,int defStyleAttr) { super(context,defStyleAttr); setup(); } @TargetAPI(Build.VERSION_CODES.LolliPOP) public GradeProgressVIEw(Context context,int defStyleAttr,int defStyleRes) { super(context,defStyleAttr,defStyleRes); } private voID setup() { mRectF = new RectF(); mOuterRectF = new RectF(); mOuterPaint = new Paint(Paint.ANTI_AliAS_FLAG); mOuterPaint.setstrokeWIDth(outlinewidth); mOuterPaint.setcolor(mBackgroundcolor); mOuterPaint.setStyle(Paint.Style.stroke); mPaint = new Paint(Paint.ANTI_AliAS_FLAG); mPaint.setstrokeWIDth(linewidth); mPaint.setcolor(mBackgroundcolor); mPaint.setStyle(Paint.Style.stroke); mPaint.setPathEffect(new DashPathEffect(new float[]{dashWith,dashSpace)); mProgresspaint = new Paint(Paint.ANTI_AliAS_FLAG); mProgresspaint.setstrokeWIDth(linewidth); mProgresspaint.setcolor(mProgresscolor); mProgresspaint.setStyle(Paint.Style.stroke); mProgresspaint.setPathEffect(new DashPathEffect(new float[]{dashWith,dashSpace)); mPointerPaint = new Paint(Paint.ANTI_AliAS_FLAG); mPointerPaint.setstrokeWIDth(pointlinewidth / 2); mPointerPaint.setcolor(mProgresscolor); mPointerPaint.setStyle(Paint.Style.FILL_AND_stroke); mPointerPaint.setstrokeCap(Paint.Cap.ROUND); mPointerPaint.setShadowLayer(4,3,0x20000000); mInnerCirclePaint = new Paint(Paint.ANTI_AliAS_FLAG); mInnerCirclePaint.setstrokeWIDth(pointlinewidth); mInnerCirclePaint.setcolor(mProgresscolor); mInnerCirclePaint.setStyle(Paint.Style.stroke); mInnerCirclePaint.setShadowLayer(4,0x20000000); } @OverrIDe protected voID onSizeChanged(int w,int h,int olDW,int oldh) { super.onSizeChanged(w,h,olDW,oldh); int value = outlinewidth / 2; mOuterRectF.set(value,value,w - value,h - value); int gap = linewidth / 2 + outlinewidth + gapWIDth; mRectF.set(mOuterRectF.left + gap,mOuterRectF.top + gap,mOuterRectF.right - gap,mOuterRectF.bottom - gap); centerX = mRectF.centerX(); centerY = mRectF.centerY(); 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(); } @OverrIDe protected voID onDraw(Canvas canvas) { super.onDraw(canvas); float degree = 2.7f * mProgress; //draw out arc canvas.drawArc(mOuterRectF,mOuterPaint); //draw background arc canvas.drawArc(mRectF,mPaint); //draw progress arc canvas.drawArc(mRectF,mProgresspaint); //draw pointer canvas.drawCircle(centerX,mInnerCirclePaint); canvas.save(); canvas.rotate(135 + degree,centerY); canvas.drawPath(mPointerPath,mPointerPaint); canvas.restore(); } @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) { super.onMeasure(wIDthMeasureSpec,heightmeasureSpec); int measureWIDth = MeasureSpec.getSize(wIDthMeasureSpec); int measureHeight = MeasureSpec.getSize(heightmeasureSpec); setMeasuredDimension(Math.min(measureHeight,measureWIDth),Math.min(measureHeight,measureWIDth)); } public voID setonProgresschangelistener(OnProgresschangelistener Listener){ this.mListener = Listener; } public int getProgresscolor() { return mProgresscolor; } public voID setProgresscolor(int progresscolor) { this.mProgresscolor = progresscolor; if(mProgresspaint != null){  mProgresspaint.setcolor(mProgresscolor); } if(mPointerPaint != null){  mPointerPaint.setcolor(mProgresscolor); } if(mInnerCirclePaint != null){  mInnerCirclePaint.setcolor(mProgresscolor); } postInvalIDate(); } public int getBackgroundcolor() { return mBackgroundcolor; } public voID setBackgroundcolor(int backgroundcolor) { this.mBackgroundcolor = backgroundcolor; if(mPaint != null){  mPaint.setcolor(mBackgroundcolor); } if(mOuterPaint != null){  mOuterPaint.setcolor(mBackgroundcolor); } postInvalIDate(); } public int getlinewidth() { return linewidth; } public voID setlinewidth(int linewidth) { this.linewidth = linewidth; if(mPaint != null){  mPaint.setstrokeWIDth(linewidth); } if(mProgresspaint != null){  mProgresspaint.setstrokeWIDth(linewidth); } postInvalIDate(); } public int getoutlinewidth() { return outlinewidth; } public voID setoutlinewidth(int outlinewidth) { this.outlinewidth = outlinewidth; if(mOuterPaint != null){  mOuterPaint.setstrokeWIDth(outlinewidth); } postInvalIDate(); } public int getGapWIDth() { return gapWIDth; } public voID setGapWIDth(int gapWIDth) { this.gapWIDth = gapWIDth; } public int getProgress() { return mProgress; } public voID setProgress(@IntRange(from = 0,to = 100) int progress) { if(progress > 100){  progress = 100; } if(progress < 0){  progress = 0; } this.mProgress = progress; if(mListener != null){  mListener.onProgressChanged(GradeProgressVIEw.this,mProgress); } postInvalIDate(); } public voID setProgressWIDthAnimation(@IntRange(from = 0,to = 100) int progress){ if(progress > 100){  progress = 100; } if(progress < 0){  progress = 0; } if(animator != null && animator.isRunning()){  animator.cancel();  animator = null; } animator = ValueAnimator.ofInt(mProgress,progress); int duration = 10 * Math.abs(progress - mProgress); animator.setDuration(duration); animator.setInterpolator(new AccelerateDecelerateInterpolator()); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  @OverrIDe  public voID onAnimationUpdate(ValueAnimator valueAnimator) {  int value = (int)valueAnimator.getAnimatedValue();  if(mProgress != value) {   mProgress = value;   if(mListener != null){   mListener.onProgressChanged(GradeProgressVIEw.this,mProgress);   }   postInvalIDate();  }  } }); animator.start(); } @OverrIDe protected voID onDetachedFromWindow() { super.onDetachedFromWindow(); if(animator != null){  animator.cancel();  animator = null; } } public interface OnProgresschangelistener{ voID onProgressChanged(GradeProgressVIEw gradeProgressVIEw,int progress); }}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android仿小米安全中心检测进度条效果全部内容,希望文章能够帮你解决Android仿小米安全中心检测进度条效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/1148012.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-31
下一篇2022-05-31

发表评论

登录后才能评论

评论列表(0条)

    保存