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

Android 实现自定义圆形进度条的功能,第1张

概述Android实现自定义圆形进度条:               Android自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的

AndroID 实现自定义圆形进度条

                AndroID 自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的来展示漂亮的界面,这里就对圆形进度条说下如何实现。

绘制自定义的圆形进度条,分为三个步骤,内圆、外圆、文字。

其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所以核心就是绘制外圆。

首先定义分别定义这三个画笔,两个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,CIRCLE_RADIUS - CIRCLE_liNE_WIDTH / 2,mCircleInnerPaint);

绘制文字

canvas.drawText(mProgresstext,halfWIDth - mTextPaint.measureText(mProgresstext) / 2,halfheight - (mTextPaint.ascent() + mTextPaint.descent()) / 2,mTextPaint);

最后的效果如下图


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

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

设置进度的方法

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,mCirclePaint);}

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

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



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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

总结

以上是内存溢出为你收集整理的Android 实现自定义圆形进度条的功能全部内容,希望文章能够帮你解决Android 实现自定义圆形进度条的功能所遇到的程序开发问题。

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

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

原文地址: http://outofmemory.cn/web/1147684.html

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

发表评论

登录后才能评论

评论列表(0条)

保存