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

本文主要介绍的是一个球形水波的百分比控件，市面上有各种形形色色的百分比控件，我一直觉得水波是最炫的，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, mCentrePoint.y, mRadius / 0.92f, mOutCirclePaint);
   canvas.drawCircle(mCentrePoint.x, mCentrePoint.y, mRadius, 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, mCentrePoint.y + mRadius);
     path2.lineTo(0, mH);

canvas.save();
     //这里与圆形取交集，除去正弦曲线多画的部分
     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();
     //绘制文字
     canvas.drawText(flowNum + "％", mCentrePoint.x, mCentrePoint.y, 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;
//  }
}

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