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 stubmContext = context;init（mContext）;}/** * @param context * @param attrs */public WaveView（Context context, AttributeSet attrs） {super（context, attrs）;// TODO Auto-generated constructor stubmContext = 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 stubmContext = 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）;}@Overridepublic 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）;//算出目标水位高度}@Overridepublic void surfaceCreated（SurfaceHolder holder） {isDraw = true;if （renderThread ！= null && ！renderThread.isAlive（））renderThread.start（）;}@Overridepublic void surfaceDestroyed（SurfaceHolder holder） {isDraw = false;}/** * 绘制界面的线程 * * @author Administrator */private class RenderThread extends Thread {@Overridepublic 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;//}}

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

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