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

概述本文实例讲述了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",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",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,text3.length());    textPaint.getTextBounds("M",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,text4.length());    textPaint.getTextBounds(text4,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,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程序设计有所帮助。

总结

以上是内存溢出为你收集整理的Android编程使用自定义View实现水波进度效果示例全部内容，希望文章能够帮你解决Android编程使用自定义View实现水波进度效果示例所遇到的程序开发问题。

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