七夕到了，祝大家七夕节快乐！
今天给大家讲解一个简单的进度条的自定义。首页呢，我们参考咪咕善跑APP的效果：
. 分析
从上面的效果图看呢，进度条的渐变色主要是在三个颜色上进行渐变。那我们先定义好三个渐变的颜色：
1privateintcolorGreen=0xff16FCD7;2privateintcolorYellow=0xffFECB55;3privateintcolorRed=0xffFF0054;
然后我们看到进度条的头是圆角的，所以我们会用到：
1circlePaint.setStrokeCap(Paint.Cap.ROUND);
显然整个进度的绘制就是在canvas上画弧的过程，只要我们进度的数据算出需要画的弧度然后配上动画效果基本上就能完成了。
. 实践
我们主要看画的逻辑和动画的逻辑就可以了。
先看下在画布上画弧和文字的过程：
1@Override2protectedvoidonDraw(Canvascanvas){3super.onDraw(canvas);4mPaint.setStyle(Paint.Style.STROKE);5mPaint.setStrokeWidth(mPaintWidth);6mPaint.setStrokeCap(Paint.Cap.ROUND);7mPaint.setColor(mBackgroundColor);8circlePaint.setStyle(Paint.Style.STROKE);9circlePaint.setStrokeWidth(mPaintWidth);10circlePaint.setStrokeCap(Paint.Cap.ROUND);11circleBackgroundPaint.setStyle(Paint.Style.STROKE);12circleBackgroundPaint.setStrokeWidth(mPaintWidth/2.0f);13circleBackgroundPaint.setStrokeCap(Paint.Cap.ROUND);14circleBackgroundPaint.setShader(radialGradient);15mPaint.setColor(mProgressColor);16if(isOver){17canvas.drawArc(rectF,-90,mBackgroundSweepAngle,false,circlePaint);18mPaint.setColor(mOverProgressColor);19canvas.drawArc(rectF,-90,360,false,mPaint);20}else{21circlePaint.setShader(sweepGradient);22if(mProgressSweepAngle==360){23canvas.drawArc(rectF,-88,355,false,circlePaint);24}else{25canvas.drawArc(rectF,-88,mProgressSweepAngle,false,circlePaint);26}27}2829if(!isHideCenterText){30//画中间数字31mPaint.setColor(mTextColor);32mPaint.setTextSize(DisplayUtils.sp2px(34));33mPaint.setStyle(Paint.Style.FILL);34mPaint.setTextAlign(Paint.Align.CENTER);35Paint.FontMetricsfontMetrics=mPaint.getFontMetrics();36floatbottom=fontMetrics.bottom;37intbaseLineY=(int)(mHeight/2+mPaint.getTextSize()/2-bottom);38if(Long.valueOf(mNumber)==mTotalKcal39&&mTakeKcal>mTotalKcal){40mNumber=String.valueOf(mTakeKcal);41}42canvas.drawText(mNumber,mWidth/2-offSet,baseLineY,mPaint);43mTextPaint.setColor(mTextColor);44mTextPaint.setTextSize(DisplayUtils.sp2px(11));45mTextPaint.setTextAlign(Paint.Align.CENTER);46mTextPaint.setStyle(Paint.Style.FILL);47inttopBaseLineY=(int)(mHeight/2-mPaint.getTextSize()/2-DisplayUtils.dp2px(19));48if(isOver){49canvas.drawText("多吃了/千卡",mWidth/2-offSet,topBaseLineY,mTextPaint);50}else{51canvas.drawText("还可以吃/千卡",mWidth/2-offSet,topBaseLineY,mTextPaint);52}53mTextPaint.setColor(mSmallTextColor);54mTextPaint.setTextSize(DisplayUtils.sp2px(9));55intbottomBaseLineY=(int)(mHeight/2+mPaint.getTextSize()/2+DisplayUtils.dp2px(25));56canvas.drawText("预算:"+mTotalKcal,mWidth/2-offSet,bottomBaseLineY,mTextPaint);57}58}
实现渐变效果的呢就是通过下面的API：
1sweepGradient=newSweepGradient(mWidth/2,mHeight/2,colors,positions);2circlePaint.setShader(sweepGradient);
然后我们用属性动画来做动画效果：
1/**2*@paramcurrent消耗的卡路里所占的比例（消耗的/总的预算*360）3*或者4*超出的卡路里5*@paramisOver是否超出预算6*/7privatevoidsetAnimation(intcurrent,booleanisOver){8this.isOver=isOver;9ValueAnimatorprogressAnimator=ValueAnimator.ofInt(0,current);10progressAnimator.setDuration(2000);11progressAnimator.setTarget(mProgressSweepAngle);12progressAnimator.addUpdateListener(animation->{13mProgressSweepAngle=((int)animation.getAnimatedValue());14if(isOver){15//超出部分直接绘制进度条16mNumber=String.valueOf(mTotalKcal*mProgressSweepAngle/360);17if(Integer.valueOf(mNumber)>mTakeKcal18||mProgressSweepAngle==mProgressSweepAngleTotal){19mNumber=String.valueOf(mTakeKcal);20}21}else{22//剩余部分作差绘制23mNumber=String.valueOf(mTotalKcal-mTotalKcal*mProgressSweepAngle/360);24if(Integer.valueOf(mNumber)>(mTotalKcal-mTakeKcal)25||mProgressSweepAngle==mProgressSweepAngleTotal){26mNumber=String.valueOf(mTotalKcal-mTakeKcal);27}28}29postInvalidate();30});31progressAnimator.start();32}
完整代码请微信搜索公众号：“南京Android部落” 后台私信邮箱地址获取哦~
