Android编程使用自定义View实现水波进度效果示例

本文实例讲述了android编程使用自定义view实现水波进度效果。分享给大家供大家参考，具体如下：

首先上效果图：

简介：

1.自动适应屏幕大小；
2.水波自动横向滚动；
3.各种绘制参数可通过修改常量进行控制。

代码不多，注释也比较详细，全部贴上：

（一）自定义组件：

/**
 * 水波进度效果.
 */
public class waterwaveview extends view {
  //边框宽度
  private int stroke_width;
  //组件的宽，高
  private int width, height;
  /**
   * 进度条最大值和当前进度值
   */
  private float max, progress;
  /**
   * 绘制波浪的画笔
   */
  private paint progresspaint;
  //波纹振幅与半径之比。(建议设置：<0.1)
  private static final float a = 0.05f;
  //绘制文字的画笔
  private paint textpaint;
  //绘制边框的画笔
  private paint circlepaint;
  /**
   * 圆弧圆心位置
   */
  private int centerx, centery;
  //内圆所在的矩形
  private rectf circlerectf;
  public waterwaveview(context context) {
    super(context);
    init();
  }
  public waterwaveview(context context, attributeset attrs) {
    super(context, attrs);
    init();
  }
  public waterwaveview(context context, attributeset attrs, int defstyleattr) {
    super(context, attrs, defstyleattr);
    init();
  }
  //初始化
  private void init() {
    progresspaint = new paint();
    progresspaint.setcolor(color.parsecolor("#77cccc88"));
    progresspaint.setantialias(true);
    textpaint = new paint();
    textpaint.setcolor(color.white);
    textpaint.setantialias(true);
    circlepaint = new paint();
    circlepaint.setstyle(paint.style.stroke);
    circlepaint.setantialias(true);
    circlepaint.setcolor(color.parsecolor("#33333333"));
    autorefresh();
  }
  @override
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    super.onmeasure(widthmeasurespec, heightmeasurespec);
    if (width == 0 || height == 0) {
      width = getwidth();
      height = getheight();
      //计算圆弧半径和圆心点
      int circleradius = math.min(width, height) >> 1;
      stroke_width = circleradius / 10;
      circlepaint.setstrokewidth(stroke_width);
      centerx = width / 2;
      centery = height / 2;
      valid_radius = circleradius - stroke_width;
      radians_per_x = (float) (math.pi / valid_radius);
      circlerectf = new rectf(centerx - valid_radius, centery - valid_radius,
          centerx + valid_radius, centery + valid_radius);
    }
  }
  private rect textbounds = new rect();
  //x方向偏移量
  private int xoffset;
  @override
  protected void ondraw(canvas canvas) {
    super.ondraw(canvas);
    //绘制圆形边框
    canvas.drawcircle(centerx, centery, valid_radius + (stroke_width >> 1), circlepaint);
    //绘制水波曲线
    canvas.drawpath(getwavepath(xoffset), progresspaint);
    //绘制文字
    textpaint.settextsize(valid_radius >> 1);
    string text1 = string.valueof(progress);
    //测量文字长度
    float w1 = textpaint.measuretext(text1);
    //测量文字高度
    textpaint.gettextbounds("8", 0, 1, textbounds);
    float h1 = textbounds.height();
    float extraw = textpaint.measuretext("8") / 3;
    canvas.drawtext(text1, centerx - w1 / 2 - extraw, centery + h1 / 2, textpaint);
    textpaint.settextsize(valid_radius / 6);
    textpaint.gettextbounds("m", 0, 1, textbounds);
    float h2 = textbounds.height();
    canvas.drawtext("m", centerx + w1 / 2 - extraw + 5, centery - (h1 / 2 - h2), textpaint);
    string text3 = "共" + string.valueof(max) + "m";
    float w3 = textpaint.measuretext(text3, 0, text3.length());
    textpaint.gettextbounds("m", 0, 1, textbounds);
    float h3 = textbounds.height();
    canvas.drawtext(text3, centerx - w3 / 2, centery + (valid_radius >> 1) + h3 / 2, textpaint);
    string text4 = "流量剩余";
    float w4 = textpaint.measuretext(text4, 0, text4.length());
    textpaint.gettextbounds(text4, 0, text4.length(), textbounds);
    float h4 = textbounds.height();
    canvas.drawtext(text4, centerx - w4 / 2, centery - (valid_radius >> 1) + h4 / 2, textpaint);
  }
  //绘制水波的路径
  private path wavepath;
  //每一个像素对应的弧度数
  private float radians_per_x;
  //去除边框后的半径（即内圆半径）
  private int valid_radius;
  /**
   * 获取水波曲线（包含圆弧部分）的path.
   *
   * @param xoffset x方向像素偏移量.
   */
  private path getwavepath(int xoffset) {
    if (wavepath == null) {
      wavepath = new path();
    } else {
      wavepath.reset();
    }
    float[] startpoint = new float[2]; //波浪线起点
    float[] endpoint = new float[2]; //波浪线终点
    for (int i = 0; i <= valid_radius * 2; i += 2) {
      float x = centerx - valid_radius + i;
      float y = (float) (centery + valid_radius * (1.0f + a) * 2 * (0.5f - progress / max)
          + valid_radius * a * math.sin((xoffset + i) * radians_per_x));
      //只计算内圆内部的点，边框上的忽略
      if (caldistance(x, y, centerx, centery) > valid_radius) {
        if (x < centerx) {
          continue; //左边框,继续循环
        } else {
          break; //右边框,结束循环
        }
      }
      //第1个点
      if (wavepath.isempty()) {
        startpoint[0] = x;
        startpoint[1] = y;
        wavepath.moveto(x, y);
      } else {
        wavepath.lineto(x, y);
      }
      endpoint[0] = x;
      endpoint[1] = y;
    }
    if (wavepath.isempty()) {
      if (progress / max >= 0.5f) {
        //满格
        wavepath.moveto(centerx, centery - valid_radius);
        wavepath.addcircle(centerx, centery, valid_radius, path.direction.cw);
      } else {
        //空格
        return wavepath;
      }
    } else {
      //添加圆弧部分
      float startdegree = caldegreebyposition(startpoint[0], startpoint[1]); //0~180
      float enddegree = caldegreebyposition(endpoint[0], endpoint[1]); //180~360
      wavepath.arcto(circlerectf, enddegree - 360, startdegree - (enddegree - 360));
    }
    return wavepath;
  }
  private float caldistance(float x1, float y1, float x2, float y2) {
    return (float) math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
  }
  //根据当前位置，计算出进度条已经转过的角度。
  private float caldegreebyposition(float currentx, float currenty) {
    float a1 = (float) (math.atan(1.0f * (centerx - currentx) / (currenty - centery)) / math.pi * 180);
    if (currenty < centery) {
      a1 += 180;
    } else if (currenty > centery && currentx > centerx) {
      a1 += 360;
    }
    return a1 + 90;
  }
  public void setmax(int max) {
    this.max = max;
    invalidate();
  }
  //直接设置进度值（同步）
  public void setprogresssync(float progress) {
    this.progress = progress;
    invalidate();
  }
  /**
   * 自动刷新页面，创造水波效果。组件销毁后该线城将自动停止。
   */
  private void autorefresh() {
    new thread(new runnable() {
      @override
      public void run() {
        while (!detached) {
          xoffset += (valid_radius >> 4);
          systemclock.sleep(100);
          postinvalidate();
        }
      }
    }).start();
  }
  //标记view是否已经销毁
  private boolean detached = false;
  @override
  protected void ondetachedfromwindow() {
    super.ondetachedfromwindow();
    detached = true;
  }
}

（二）使用方法：

在xml布局中引入上述组件，然后在activity或fragment中设置属性：

waterwaveview bar = (waterwaveview) getactivity().findviewbyid(r.id.water_wave_view);
    bar.setmax(500);
    bar.setprogresssync(361.8f);

更多关于android相关内容感兴趣的读者可查看本站专题：《android开发动画技巧汇总》、《android编程之activity操作技巧总结》、《android视图view技巧总结》、《android布局layout技巧总结》、《android开发入门与进阶教程》、《android资源操作技巧汇总》及《android控件用法总结》

希望本文所述对大家android程序设计有所帮助。