android球形水波百分比控件代码

概述本文主要介绍的是一个球形水波的百分比控件，市面上有各种形形色色的百分比控件，我一直觉得水波是最炫的，UI给了我这个机会，然而网上搜了一大堆，不是太复杂，代码太多（反正我是调不出效果来），就是有瑕疵的，所

本文主要介绍的是一个球形水波的百分比控件，市面上有各种形形色色的百分比控件，我一直觉得水波是最炫的，UI给了我这个机会，然而网上搜了一大堆，不是太复杂，代码太多（反正我是调不出效果来），就是有瑕疵的，所以只好自己写了，这里开源出来，方便大家。有什么问题或者建议大家留言指出。

先看效果，这里动态图不好截取，就贴张静态的

对于水波百分比控件实现方法有如下几种

- 画好水波形状的bitmap，利用属性动画进行平移 - 利用曲线精确绘制目标水波 - 利用大范围曲线与容器做交集

第一种比较烦，网上有这种思路实现的，代码量比较庞大。bitmap移动时要注意的问题很多，一不小心就BUG一堆了。第二种代码量小，但需要几何功底。很丢脸的说我算了好久。才算出公式（年代久远，都忘了），不过这种方法计算量大，绘制时遍历的点少。第三种方法，代码量极少，计算量几乎没有，遍历的点是第二种方法的两倍以上。考虑到遍历的消耗和计算的复杂度，选择第三种。

这里我们选择正弦曲线和圆做交集。

 for (int i = left; i < length; i++) {        int x = i;        int y = (int) (Math.sin(Math.toradians(x + mTranX) / 2) * mRadius / 4);        path2.lineto(x,mH + y);      }

sin函数，x横坐标，y纵坐标，mTranX每次偏移量， 波形起伏mRadius / 4，

核心代码

利用圆的path与我们之前绘制的曲线做交集

Path pc = new Path();      pc.addCircle(mCentrePoint.x,mCentrePoint.y,mRadius,Path.Direction.ccw);      canvas.clipPath(pc,Region.Op.INTERSECT);      canvas.drawPath(path2,mWavePaint);      canvas.restore();

水位上升和水波起伏

while (isDraw) {        if (mWaterLevel > mNowHeight) {          mNowHeight = mNowHeight + mUpSpeed;        }        if (mStart) {          if (mTranX > mRadius) {            mTranX = 0;          }          mTranX = mTranX - mWaveSpeed;        }        drawUI();      }

这里由于动画效果比较细腻，更新UI界面比较平凡，所以我们采用surfaceVIEw来实现（用vIEw实现发现有卡顿，影响体验）

完整代码

就一个wavevIEw类直接布局中引用

注释写的应该算比较清楚了。有什么疑问的可以留言

package com.aibaIDe.test;import androID.content.Context;import androID.graphics.Canvas;import androID.graphics.color;import androID.graphics.Paint;import androID.graphics.Path;import androID.graphics.PixelFormat;import androID.graphics.Point;import androID.graphics.Region;import androID.util.AttributeSet;import androID.vIEw.SurfaceHolder;import androID.vIEw.SurfaceVIEw;/** * gengqiquan * 2016年6月2日16:16:48 * 水波显示百分比控件 */public class WaveVIEw extends SurfaceVIEw implements SurfaceHolder.Callback {  Point mCentrePoint;  int mNowHeight = 0;//当前水位  int mRadius = 0;  boolean mStart = false;//是否开始  float mTextSise = 60;//文字大小  Context mContext;  int mTranX = 0;//水波平移量  private Paint mCirclePaint;  private Paint mOutCirclePaint;  private Paint mWavePaint;  private Paint mTextPaint;  private SurfaceHolder holder;  private RenderThread renderThread;  private boolean isDraw = false;// 控制绘制的开关  private int mCirclecolor = color.parsecolor("#ff6600");//背景内圆颜色  private int mOutCirclecolor = color.parsecolor("#f5e6dc");//背景外圆颜色  private int mWavecolor = color.parsecolor("#ff944d");//水波颜色  private int mWaterLevel;// 水目标高度  private int flowNum = 60;//水目标占百分比这里是整数。  private int mWaveSpeed = 5;//水波起伏速度  private int mUpSpeed = 2;//水面上升速度  /**   * @param context   */  public WaveVIEw(Context context) {    super(context);    // Todo auto-generated constructor stub    mContext = context;    init(mContext);  }  /**   * @param context   * @param attrs   */  public WaveVIEw(Context context,AttributeSet attrs) {    super(context,attrs);    // Todo auto-generated constructor stub    mContext = context;    init(mContext);  }  /**   * @param context   * @param attrs   * @param defStyleAttr   */  public WaveVIEw(Context context,AttributeSet attrs,int defStyleAttr) {    super(context,attrs,defStyleAttr);    // Todo auto-generated constructor stub    mContext = context;    init(mContext);  }  private voID init(Context context) {    mContext = context;    setZOrderOntop(true);    holder = this.getHolder();    holder.addCallback(this);    holder.setFormat(PixelFormat.TRANSLUCENT);    renderThread = new RenderThread();    mCirclePaint = new Paint();    mCirclePaint.setcolor(mCirclecolor);    mCirclePaint.setStyle(Paint.Style.FILL);    mCirclePaint.setAntiAlias(true);    mOutCirclePaint = new Paint();    mOutCirclePaint.setcolor(mOutCirclecolor);    mOutCirclePaint.setStyle(Paint.Style.FILL);    mOutCirclePaint.setAntiAlias(true);    mWavePaint = new Paint();    mWavePaint.setstrokeWIDth(1.0F);    mWavePaint.setcolor(mWavecolor);    mWavePaint.setStyle(Paint.Style.FILL);    mWavePaint.setAntiAlias(true);    mTextPaint = new Paint();    mTextPaint.setstrokeWIDth(1.0F);    mTextPaint.setcolor(color.WHITE);    mTextPaint.setTextSize(mTextSise);    mTextPaint.setTextAlign(Paint.Align.CENTER);    mTextPaint.setStyle(Paint.Style.FILL);    mTextPaint.setAntiAlias(true);  }  @OverrIDe  public voID surfaceChanged(SurfaceHolder holder,int format,int wIDth,int height) {    mRadius = (int) (0.5 * wIDth * 0.92);    mCentrePoint = new Point(wIDth / 2,height / 2);    mWaterLevel = (int) (2 * mRadius * flowNum / 100f);//算出目标水位高度  }  @OverrIDe  public voID surfaceCreated(SurfaceHolder holder) {    isDraw = true;    if (renderThread != null && !renderThread.isAlive())      renderThread.start();  }  @OverrIDe  public voID surfaceDestroyed(SurfaceHolder holder) {    isDraw = false;  }  /**   * 绘制界面的线程   *   * @author administrator   */  private class RenderThread extends Thread {    @OverrIDe    public voID run() {      // 不停绘制界面，这里是异步绘制，不采用外部通知开启绘制的方式，水波根据数据更新才会开始增长      while (isDraw) {        if (mWaterLevel > mNowHeight) {          mNowHeight = mNowHeight + mUpSpeed;        }        if (mStart) {          if (mTranX > mRadius) {            mTranX = 0;          }          mTranX = mTranX - mWaveSpeed;        }        drawUI();      }      super.run();    }  }  /**   * 界面绘制   */  public voID drawUI() {    Canvas canvas = holder.lockCanvas();    try {      drawCanvas(canvas);    } catch (Exception e) {      e.printstacktrace();    } finally {      if (canvas != null)        holder.unlockCanvasAndPost(canvas);    }  }  private voID drawCanvas(Canvas canvas) {    //画背景圆圈    canvas.drawCircle(mCentrePoint.x,mRadius / 0.92f,mOutCirclePaint);    canvas.drawCircle(mCentrePoint.x,mCirclePaint);    if (mStart) {      //计算正弦曲线的路径      int mH = mCentrePoint.y + mRadius - mNowHeight;      int left = - mRadius / 2;      int length = 4 * mRadius;      Path path2 = new Path();      path2.moveto(left,mH);      for (int i = left; i < length; i++) {        int x = i;        int y = (int) (Math.sin(Math.toradians(x + mTranX) / 2) * mRadius / 4);        path2.lineto(x,mH + y);      }      path2.lineto(length,mH);      path2.lineto(length,mCentrePoint.y + mRadius);      path2.lineto(0,mH);      canvas.save();      //这里与圆形取交集，除去正弦曲线多画的部分      Path pc = new Path();      pc.addCircle(mCentrePoint.x,mWavePaint);      canvas.restore();      //绘制文字      canvas.drawText(flowNum + "%",mCentrePoint.x,mTextPaint);    }  }  public voID setFlowNum(int num) {    flowNum = num;    mStart = true;  }  public voID setTextSise(float s) {    mTextSise = s;    mTextPaint.setTextSize(s);  }  //设置水波起伏速度  public voID setWaveSpeed(int speed) {    mWaveSpeed = speed;  }  //设置水面上升速度  public voID setUpSpeed(int speed) {    mUpSpeed = speed;  }  public voID setcolor(int wavecolor,int circlecolor,int outcirclecolor) {    mWavecolor = wavecolor;    mCirclecolor = circlecolor;    mOutCirclecolor = outcirclecolor;    mWavePaint.setcolor(mWavecolor);    mCirclePaint.setcolor(mCirclecolor);    mOutCirclePaint.setcolor(mOutCirclecolor);  }//精确算法，每次正弦曲线从曲线与圆的交集处开始//  private int getX(double h) {//    int x = 0;//    int R = mRadius;//    if (h < R) {//      double t = 2 * R * h - h * h;//      x = (int) (R - Math.abs(Math.sqrt(t)));//    } else {//      double t = -2 * R * h + h * h;//      x = (int) (R - Math.abs(Math.sqrt(t)));//    }//    return x;//  }}

最后奉上本文的源码：源码下载

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

总结

以上是内存溢出为你收集整理的android球形水波百分比控件代码全部内容，希望文章能够帮你解决android球形水波百分比控件代码所遇到的程序开发问题。

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