欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-01 23:13:34
android 实现自定义圆形进度条:            ...

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, halfheight,circle_radius - circle_line_width / 2,mcircleinnerpaint);

绘制文字

canvas.drawtext(mprogresstext,halfwidth - mtextpaint.measuretext(mprogresstext) / 2,halfheight - (mtextpaint.ascent() + mtextpaint.descent()) / 2,mtextpaint);

最后的效果如下图

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

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

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

设置进度的方法

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 实现自定义圆形进度条的功能

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

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

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