[轉載請注明出處，尊重他人勞動成果http://blog.csdn.net/gengqiquan/article/details/51577185]

本博客主要介紹的是一個球形水波的百分比控件，市面上有各種形形色色的百分比控件，我一直覺得水波是最炫的，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; // } }

完整的示例項目Githu地址 https://github.com/gengqiquan/ViewHome.git

我建了一個QQ群（群號：121606151），用于大家討論交流Android技術問題，有興趣的可以加下，大家一起進步。

總結

以上是生活随笔為你收集整理的球形水波百分比控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。