Android自定义View实现圆环带数字百分比进度条

分享一个自己制作的android自定义view。是一个圆环形状的反映真实进度的进度条，百分比的进度文字跟随已完成进度的圆弧转动。以下是效果图：

这个自定义view可以根据需要设定圆环的宽度和百分比文字的大小。

先说一下思路：这个view一共分为三部分：第一部分也就是灰色的圆环部分，代表未完成的进度；第二部分是蓝色的圆弧部分，代表已经完成的进度；第三部分是红色的百分比的数字百分比文本，显示当前确切的完成进度。

下面是view的编写思路：

①：定义三个画笔，分别画灰色圆环，蓝色圆弧，红色文字；
②：构造器中初始化数据，设置三个画笔的属性；
③：重写view的onmeasure方法，得到本view的宽度，高度，计算出中心点的坐标；
④：由于这个view是一个圆环形状，所以定义本view宽高中较小者的一半为整个圆环部分（包括圆环和文字）最外侧的半径，这样使用者可以任意指定本view的宽高，圆环可以恰好嵌入其中，不会超出空间，也不会浪费空间；
⑤：绘制圆环需要一个rectf对象，创建一个rectf对象，指定它的左上右下边界均距离view中心为整个圆环部分（包括圆环和文字）最外侧的半径减去圆环画笔宽度和文字高度较大者的一半，这样，整个圆环部分（包括圆环和文字）的边界恰好会与view的边界重合；
⑥：绘制紧贴着圆环的文字，需要一个path对象来指定文字的路径。给这个path对象添加一小段圆弧的轨迹，然后在圆弧上面绘制文字。这段圆弧也需要一个rectf对象，但是这个rectf要比上一个rectf小一些，来保证文字恰好在圆环轨迹上；
⑦：然后是最关键的重绘部分，重写ondraw方法。首先画出灰色圆环，这个比较简单，它不需要随进度变化而变化，只是一个圆环；
⑧：其次画出蓝色的圆弧。设定圆弧开始的角度是-90度，也就是圆环顶部。扫过的角度是当前百分比乘以360度一整圈的角度，并且随着progress增加而不断增加，产生动画的效果；
⑨：最难的部分，画文字。在路径上面画文字并不难，但是要精确确定文字的位置，使文字的*恰好处于蓝色进度条的最前端。在这里我使用了paint的一个方法：gettextwidths，这个方法可以根据当前需要绘制的文字，返回所有单个字符的宽度组成的一个float型的数组，然后根据这个数组可以得到要绘制文字所占的宽度，进而可以得到需要的path对象需要的圆弧轨迹的长度，然后根据圆弧长度，得到圆弧角度（width = sweepangle * 2 * π * r / 360 →sweepangle = width * 360 / 2 / π / r），然后就可以用这个path对象去画文字了。
⑩：这里我们给view添加了 一个方法，setprogress，参数为int型的进度，这样外界使用者就可以根据实际进度来指定view的进度来显示当前实际工作完成的百分比。

下面是代码view代码：

public class circlenumberprogress extends view {
 
  /** 进度条画笔的宽度（dp） */
  private int paintprogresswidth = 3;
 
  /** 文字百分比的字体大小（sp） */
  private int painttextsize = 20;
 
  /** 未完成进度条的颜色 */
  private int paintundonecolor = 0xffaaaaaa;
 
  /** 已完成进度条的颜色 */
  private int paintdonecolor = 0xff67aae4;
 
  /** 百分比文字的颜色 */
  private int painttextcolor = 0xffff0077;
 
  /** 设置进度条画笔的宽度(px) */
  private int paintprogresswidthpx;
 
  /** 文字画笔的尺寸(px) */
  private int painttextsizepx;
  /** context上下文环境 */
  private context context;
 
  /** 调用者设置的进程 0 - 100 */
  private int progress;
 
  /** 画未完成进度圆弧的画笔 */
  private paint paintundone = new paint();
 
  /** 画已经完成进度条的画笔 */
  private paint paintdone = new paint();
 
  /** 画文字的画笔 */
  private paint painttext = new paint();
 
  /** 包围进度条圆弧的矩形 */
  private rectf rectf = new rectf();
 
  /** 包围文字所在路径圆弧的矩形，比上一个矩形略小 */
  private rectf rectf2 = new rectf();
 
  /** 进度文字所在的路径 */
  private path path = new path();
 
  /** 文字所在路径圆弧的半径 */
  private int radiustext;
 
  /** 是否进行过了测量 */
  private boolean ismeasured = false;
 
  public circlenumberprogress(context context, attributeset attrs) {
    super(context, attrs);
    this.context = context;
    // 构造器中初始化数据
    initdata();
  }
 
  /** 初始化数据 */
  private void initdata() {
 
    // 设置进度条画笔的宽度
    paintprogresswidthpx = utils.dip2px(context, paintprogresswidth);
 
    // 设置文字画笔的尺寸(px)
    painttextsizepx = utils.sp2px(context, painttextsize);
 
    // 未完成进度圆环的画笔的属性
    paintundone.setcolor(paintundonecolor);
    paintundone.setstrokewidth(paintprogresswidthpx);
    paintundone.setantialias(true);
    paintundone.setstyle(paint.style.stroke);
 
    // 已经完成进度条的画笔的属性
    paintdone.setcolor(paintdonecolor);
    paintdone.setstrokewidth(paintprogresswidthpx);
    paintdone.setantialias(true);
    paintdone.setstyle(paint.style.stroke);
 
    // 文字的画笔的属性
    painttext.setcolor(painttextcolor);
    painttext.settextsize(painttextsizepx);
    painttext.setantialias(true);
    painttext.setstyle(paint.style.stroke);
    painttext.settypeface(typeface.default_bold);
 
  }
 
  @override
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    super.onmeasure(widthmeasurespec, heightmeasurespec);
    if (!ismeasured) {
      getwidthandheight();
      ismeasured = true;
    }
  }
 
  /** 得到视图等的高度宽度尺寸数据 */
  private void getwidthandheight() {
 
    // 得到自定义视图的高度
    int viewheight;
 
    // 得到自定义视图的宽度
    int viewwidth;
 
    // 得到自定义视图的x轴中心点
    int viewcenterx;
 
    // 得到自定义视图的y轴中心点
    int viewcentery;
 
    viewheight = getmeasuredheight();
    viewwidth = getmeasuredwidth();
    viewcenterx = viewwidth / 2;
    viewcentery = viewheight / 2;
 
    // 取本view长宽较小者的一半为整个圆环部分（包括圆环和文字）最外侧的半径
    int minlenth = viewheight > viewwidth ? viewwidth / 2 : viewheight / 2;
 
    // 比较文字高度和圆环宽度，如果文字高度较大，那么文字将突破圆环，否则，圆环会把文字包裹在内部
    rect rect = new rect();
    painttext.gettextbounds("100%", 0, "100%".length(), rect);
    int textheight = rect.height();
 
    // 得到圆环的中间半径（外径和内径平均值）
    int radiusarc = minlenth - (paintprogresswidthpx > textheight ? paintprogresswidthpx / 2 : textheight / 2);
    rectf.left = viewcenterx - radiusarc;
    rectf.top = viewcentery - radiusarc;
    rectf.right = viewcenterx + radiusarc;
    rectf.bottom = viewcentery + radiusarc;
 
    // 文字所依赖路径圆弧的半径
    radiustext = radiusarc - textheight / 2;
    rectf2.left = viewcenterx - radiustext;
    rectf2.top = viewcentery - radiustext;
    rectf2.right = viewcenterx + radiustext;
    rectf2.bottom = viewcentery + radiustext;
 
  }
 
  @override
  protected void ondraw(canvas canvas) {
    super.ondraw(canvas);
 
    // 画未完成进度的圆环
    canvas.drawarc(rectf, 0, 360, false, paintundone);
 
    // 画已经完成进度的圆弧 从-90度开始，即从圆环顶部开始
    canvas.drawarc(rectf, -90, progress / 100.0f * 360, false, paintdone);
 
    // 为文字所在路径添加一段圆弧轨迹，进度为0%-9%时应该最短，进度为10%-99%时应该边长，进度为100%时应该最长
    // 这样才能保证文字和圆弧的进度一致，不会出现超前或者滞后的情况
 
    // 要画的文字
    string text = progress + "%";
 
    // 存储字符所有字符所占宽度的数组
    float[] widths = new float[text.length()];
 
    // 得到所有字符所占的宽度
    painttext.gettextwidths(text, 0, text.length(), widths);
 
    // 所有字符所占宽度之和
    float textwidth = 0;
    for (float f : widths) {
      textwidth += f;
    }
 
    // 根据长度得到路径对应的扫过的角度
    // width = sweepangle * 2 * π * r / 360 ; sweepangle = width * 360 / 2 /
    // π / r
    float sweepangle = (float) (textwidth * 360 / 2 / math.pi / radiustext);
 
    // 添加路径
    path.addarc(rectf2, progress * 3.6f - 90.0f - sweepangle / 2.0f, sweepangle);
 
    // 绘制进度的文字
    canvas.drawtextonpath(text, path, 0, 0, painttext);
 
    // 重置路径
    path.reset();
  }
 
  /**
   * @param progress 外部传进来的当前进度,强制重绘
   */
  public void setprogress(int progress) {
    this.progress = progress;
    invalidate();
  }
}

调用者activity代码：

public class numberprogressbaractivity extends activity {
 
  /** handler消息标识 */
  protected static final int what_increase = 1;
 
  /** 圆形带数字的进度条 */
  private circlenumberprogress cnp_citclenumberprogress;
 
  /** 指定给进度条的进程 */
  private int progress;
 
  private handler handler = new handler() {
    public void handlemessage(android.os.message msg) {
      progress++;
      cnp_citclenumberprogress.setprogress(progress);
      handler.sendemptymessagedelayed(what_increase, getradomnumber(50, 300));
      if (progress >= 100) {
        handler.removemessages(what_increase);
      }
    }
 
  };
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_number_progress_bar);
    cnp_citclenumberprogress = (circlenumberprogress) findviewbyid(r.id.cnp_citclenumberprogress);
    button btn_numberprogressbar = (button) findviewbyid(r.id.btn_numberprogressbar);
    btn_numberprogressbar.setonclicklistener(new view.onclicklistener() {
      @override
      public void onclick(view v) {
        increase();
      }
    });
  }
 
  private void increase() {
    progress = 0;
    handler.removemessages(what_increase);
    handler.sendemptymessage(what_increase);
  }
 
  /**
   * 得到两个整数之间的一个随机数
   *
   * @param start 较小的数
   * @param end  较大的数
   * @return 随机整数
   */
  public int getradomnumber(int start, int end) {
    return (int) (start + math.random() * (end - start));
  }
}

布局：

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
 
  <com.example.viewdemo.view.circlenumberprogress
    android:id="@+id/cnp_citclenumberprogress"
    android:layout_width="wrap_content"
    android:layout_height="300dp"
    android:layout_margin="20dp"
    android:background="#33897500"/>
 
  <button
    android:id="@+id/btn_numberprogressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="开始"/>
 
</linearlayout>

还有几个方法是dp，px，sp相互转换的也一并贴出来：

/**
 * 将px值转换为dip或dp值，保证尺寸大小不变
 */
public static int px2dip(context context, float pxvalue) {
  final float scale = context.getresources().getdisplaymetrics().density;
  return (int) (pxvalue / scale + 0.5f);
}
 
/**
 * 将dip或dp值转换为px值，保证尺寸大小不变
 */
public static int dip2px(context context, float dipvalue) {
  final float scale = context.getresources().getdisplaymetrics().density;
  return (int) (dipvalue * scale + 0.5f);
}
 
/**
 * 将px值转换为sp值，保证文字大小不变
 */
public static int px2sp(context context, float pxvalue) {
  final float fontscale = context.getresources().getdisplaymetrics().scaleddensity;
  return (int) (pxvalue / fontscale + 0.5f);
}
 
/**
 * 将sp值转换为px值，保证文字大小不变
 */
public static int sp2px(context context, float spvalue) {
  final float fontscale = context.getresources().getdisplaymetrics().scaleddensity;
  return (int) (spvalue * fontscale + 0.5f);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。