神刀安全网

Android自定义圆形进度条

绘制自定义的圆形进度条,分为三个步骤,内圆、外圆、文字。
其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所以核心就是绘制外圆。

首先定义分别定义这三个画笔,两个Paint和一个TextPaint

mCirclePaint = new Paint(); mCirclePaint.setAntiAlias(true); mCirclePaint.setStrokeWidth(CIRCLE_LINE_WIDTH); mCirclePaint.setStyle(Paint.Style.STROKE); mCirclePaint.setColor(ContextCompat.getColor(context, R.color.circle_color));  mCircleInnerPaint = new Paint(); mCircleInnerPaint.setAntiAlias(true); mCircleInnerPaint.setStyle(Paint.Style.FILL); mCircleInnerPaint.setColor(ContextCompat.getColor(context, R.color.circle_inner_color));  mTextPaint = new TextPaint(); mTextPaint.setAntiAlias(true); mTextPaint.setStyle(Paint.Style.FILL); mTextPaint.setTypeface(Typeface.DEFAULT_BOLD); mTextPaint.setColor(ContextCompat.getColor(context, R.color.circle_text_color)); mTextPaint.setTextSize(TEXT_SIZE);

然后让我们分别绘制出这三个部分

获取自定义View的宽和高

float halfWidth = getMeasuredWidth() / 2; float halfHeight = getMeasuredHeight() / 2;

绘制外圆

canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint);

绘制内圆

canvas.drawCircle(halfWidth, halfHeight,CIRCLE_RADIUS - CIRCLE_LINE_WIDTH / 2,mCircleInnerPaint);

绘制文字

canvas.drawText(mProgressText,halfWidth - mTextPaint.measureText(mProgressText) / 2,halfHeight - (mTextPaint.ascent() + mTextPaint.descent()) / 2,mTextPaint);

最后的效果如下图

Android自定义圆形进度条
device-2016-10-11-180030.png

绘制完了基本的图案,下一步就是实现进度条的动画效果

进度条是实时变化的,所以需要不断的去更新进度,进度可以用圆弧开绘制

设置进度的方法

public void setProgress(float progress) {   if (progress > 100) {     progress = 100;   }   if (progress < 0) {     progress = 0;   }   mProgress = progress;   mProgressText = "Pause";   mStartProgress = true;   postInvalidate(); }

在Activity中开一个线程模拟网络请求后更新进度条的操作

没30毫秒更新一次数据,当进度超过100,停止刷新界面

private void startProgress() {   new Thread() {   @Override   public void run() {     super.run();     float currentProgress = mCustomView.getCurrentProgress();     ++currentProgress;     mCustomView.setProgress(currentProgress);     try {       sleep(30);       if (currentProgress <= 100) {         startProgress();       } else {         mCustomView.progressFinished();       }     } catch (InterruptedException e) {        e.printStackTrace();     }   }  }.start(); }

最核心的部分,进度更新后更新绘制圆形进度条

float halfWidth = getMeasuredWidth() / 2; float halfHeight = getMeasuredHeight() / 2; if (null == mCircleRectF) {     mCircleRectF = new RectF(halfWidth - CIRCLE_RADIUS, halfHeight - CIRCLE_RADIUS,            halfWidth + CIRCLE_RADIUS, halfHeight + CIRCLE_RADIUS); } if (mStartProgress) {     float swipeProgress = mProgress / 100f * 360;     LogUtils.e("swipeProgress = " + swipeProgress);     canvas.drawArc(mCircleRectF, -90, swipeProgress, true, mCirclePaint); } else {     canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint); }

绘制的思路就是把progress进度转换为圆弧的弧度,然后不断绘制出来,这里要注意,从-90开始,也就是时钟的0点时刻开始绘制。如果进度已经绘制完成,或者还没有开始,则直接绘制一个圆形。

大概思路就是这样,最后上两张效果图

Android自定义圆形进度条
device-2016-10-11-175952.png

Android自定义圆形进度条
device-2016-10-11-180110.png

如果有什么更好的实现思路,可以一起讨论学习。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Android自定义圆形进度条

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址