Android編程使用自定義View實(shí)現(xiàn)水波進(jìn)度效果示例

/**
 * 水波進(jìn)度效果.
 */
public class WaterWaveView extends View {
  //邊框?qū)挾?  private int STROKE_WIDTH;
  //組件的寬，高
  private int width, height;
  /**
   * 進(jìn)度條最大值和當(dāng)前進(jìn)度值
   */
  private float max, progress;
  /**
   * 繪制波浪的畫筆
   */
  private Paint progressPaint;
  //波紋振幅與半徑之比。(建議設(shè)置：<0.1)
  private static final float A = 0.05f;
  //繪制文字的畫筆
  private Paint textPaint;
  //繪制邊框的畫筆
  private Paint circlePaint;
  /**
   * 圓弧圓心位置
   */
  private int centerX, centerY;
  //內(nèi)圓所在的矩形
  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();
      //計(jì)算圓弧半徑和圓心點(diǎn)
      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);
    //測(cè)量文字長(zhǎng)度
    float w1 = textPaint.measureText(text1);
    //測(cè)量文字高度
    textPaint.getTextBounds("8", 0, 1, textBounds);
    float h2 = textBounds.height();
    float extraW = textPaint.measureText("8") / 3;
    canvas.drawText(text1, centerX - w1 / 2 - extraW, centerY + h2 / 2, textPaint);
    textPaint.setTextSize(VALID_RADIUS / 6);
    textPaint.getTextBounds("M", 0, 1, textBounds);
    float h3 = textBounds.height();
    canvas.drawText("M", centerX + w1 / 2 - extraW + 5, centerY - (h2 / 2 - h3), textPaint);
    String text3 = "共" + String.valueOf(max) + "M";
    float w3 = textPaint.measureText(text3, 0, text3.length());
    textPaint.getTextBounds("M", 0, 1, textBounds);
    float h4 = textBounds.height();
    canvas.drawText(text3, centerX - w3 / 2, centerY + (VALID_RADIUS >> 1) + h4 / 2, textPaint);
    String text4 = "流量剩余";
    float w4 = textPaint.measureText(text4, 0, text4.length());
    textPaint.getTextBounds(text4, 0, text4.length(), textBounds);
    float h5 = textBounds.height();
    canvas.drawText(text4, centerX - w4 / 2, centerY - (VALID_RADIUS >> 1) + h5 / 2, textPaint);
  }
  //繪制水波的路徑
  private Path wavePath;
  //每一個(gè)像素對(duì)應(yīng)的弧度數(shù)
  private float RADIANS_PER_X;
  //去除邊框后的半徑（即內(nèi)圓半徑）
  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]; //波浪線起點(diǎn)
    float[] endPoint = new float[2]; //波浪線終點(diǎn)
    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));
      //只計(jì)算內(nèi)圓內(nèi)部的點(diǎn)，邊框上的忽略
      if (calDistance(x, y, centerX, centerY) > VALID_RADIUS) {
        if (x < centerX) {
          continue; //左邊框,繼續(xù)循環(huán)
        } else {
          break; //右邊框,結(jié)束循環(huán)
        }
      }
      //第1個(gè)點(diǎn)
      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));
  }
  //根據(jù)當(dāng)前位置，計(jì)算出進(jìn)度條已經(jīng)轉(zhuǎn)過(guò)的角度。
  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();
  }
  //直接設(shè)置進(jìn)度值（同步）
  public void setProgressSync(float progress) {
    this.progress = progress;
    invalidate();
  }
  /**
   * 自動(dòng)刷新頁(yè)面，創(chuàng)造水波效果。組件銷毀后該線城將自動(dòng)停止。
   */
  private void autoRefresh() {
    new Thread(new Runnable() {
      @Override
      public void run() {
        while (!detached) {
          xOffset += (VALID_RADIUS >> 4);
          SystemClock.sleep(100);
          postInvalidate();
        }
      }
    }).start();
  }
  //標(biāo)記View是否已經(jīng)銷毀
  private boolean detached = false;
  @Override
  protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    detached = true;
  }
}

WaterWaveView bar = (WaterWaveView) getActivity().findViewById(R.id.water_wave_view);
    bar.setMax(500);
    bar.setProgressSync(361.8f);