源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Android 实现自定义圆形进度条的功能

  • 时间:2020-03-12 05:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Android 实现自定义圆形进度条的功能
[b]Android 实现自定义圆形进度条:[/b] [b]                [/b]Android 自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的来展示漂亮的界面,这里就对圆形进度条说下如何实现。 [b]绘制自定义的圆形进度条,分为三个步骤,内圆、外圆、文字。[/b] 其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所以核心就是绘制外圆。 首先定义分别定义这三个画笔,两个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);

[b]然后让我们分别绘制出这三个部分获取自定义View的宽和高[/b] float halfWidth = getMeasuredWidth() / 2; float halfHeight = getMeasuredHeight() / 2; [b]绘制外圆[/b] canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint); [b]绘制内圆 [/b] canvas.drawCircle(halfWidth, halfHeight,CIRCLE_RADIUS - CIRCLE_LINE_WIDTH / 2,mCircleInnerPaint); [b]绘制文字 [/b] canvas.drawText(mProgressText,halfWidth - mTextPaint.measureText(mProgressText) / 2,halfHeight - (mTextPaint.ascent() + mTextPaint.descent()) / 2,mTextPaint); 最后的效果如下图 [img]http://files.jb51.net/file_images/article/201611/20161115171437717.png?20161015171456[/img] [b]绘制完了基本的图案,下一步就是实现进度条的动画效果[/b] 进度条是实时变化的,所以需要不断的去更新进度,进度可以用圆弧开绘制 [b]设置进度的方法[/b]
public void setProgress(float progress) {
 if (progress > 100) {
  progress = 100;
 }
 if (progress < 0) {
  progress = 0;
 }
 mProgress = progress;
 mProgressText = "Pause";
 mStartProgress = true;
 postInvalidate();
}
[b]在Activity中开一个线程模拟网络请求后更新进度条的操作[/b] 没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();
}
[b]最核心的部分,进度更新后更新绘制圆形进度条[/b]
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点时刻开始绘制。如果进度已经绘制完成,或者还没有开始,则直接绘制一个圆形。 大概思路就是这样,最后上两张效果图 [img]http://files.jb51.net/file_images/article/201611/20161115171637560.png?20161015171652[/img] [img]http://files.jb51.net/file_images/article/201611/20161115171706001.png?20161015171721[/img] 如果有什么更好的实现思路,可以一起讨论学习。 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部