android球形水波百分比控件代碼
更新時間：2016年11月10日 11:13:58 作者：gengqiquan
本篇文章主要是介紹android球形水波百分比控件，現(xiàn)在很多地方都能用的，有需要的可以來了解一下。
本文主要介紹的是一個球形水波的百分比控件，市面上有各種形形色色的百分比控件，我一直覺得水波是最炫的，UI給了我這個機會，然而網(wǎng)上搜了一大堆，不是太復(fù)雜，代碼太多（反正我是調(diào)不出效果來），就是有瑕疵的，所以只好自己寫了，這里開源出來，方便大家。有什么問題或者建議大家留言指出。
先看效果，這里動態(tài)圖不好截取，就貼張靜態(tài)的
對于水波百分比控件實現(xiàn)方法有如下幾種
- - 畫好水波形狀的bitmap，利用屬性動畫進行平移
- - 利用曲線精確繪制目標水波
- - 利用大范圍曲線與容器做交集
第一種比較煩，網(wǎng)上有這種思路實現(xiàn)的，代碼量比較龐大。bitmap移動時要注意的問題很多，一不小心就bug一堆了。第二種代碼量小，但需要幾何功底。很丟臉的說我算了好久。才算出公式（年代久遠，都忘了），不過這種方法計算量大，繪制時遍歷的點少。第三種方法，代碼量極少，計算量幾乎沒有，遍歷的點是第二種方法的兩倍以上?？紤]到遍歷的消耗和計算的復(fù)雜度，選擇第三種。
這里我們選擇正弦曲線和圓做交集。
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函數(shù)，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來實現(xiàn)（用view實現(xiàn)發(fā)現(xiàn)有卡頓，影響體驗）
完整代碼
就一個waveview類直接布局中引用
注釋寫的應(yīng)該算比較清楚了。有什么疑問的可以留言
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;// 控制繪制的開關(guān)
private int mCircleColor = Color.parseColor("#ff6600");//背景內(nèi)圓顏色
private int mOutCircleColor = Color.parseColor("#f5e6dc");//背景外圓顏色
private int mWaveColor = Color.parseColor("#ff944d");//水波顏色
private int mWaterLevel;// 水目標高度
private int flowNum = 60;//水目標占百分比這里是整數(shù)。
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() {
// 不停繪制界面，這里是異步繪制，不采用外部通知開啟繪制的方式，水波根據(jù)數(shù)據(jù)更新才會開始增長
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);
}
//設(shè)置水波起伏速度
public void setWaveSpeed(int speed) {
mWaveSpeed = speed;
}
//設(shè)置水面上升速度
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;
// }
}
最后奉上本文的源碼：源碼下載
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android?Framework原理Binder驅(qū)動源碼解析
這篇文章主要為大家介紹了Android?Framework原理Binder驅(qū)動源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Kotlin封裝RecyclerView Adapter實例教程
這篇文章主要給大家介紹了關(guān)于Kotlin封裝RecyclerView Adapter的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-08-08
這篇文章主要介紹了 Android 全局異常捕獲實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
我們在學習View的時候，不可避免會遇到事件的分發(fā)，而往往遇到的很多滑動沖突的問題都是由于處理事件分發(fā)時不恰當所造成的。因此，深入了解View事件分發(fā)機制的原理，對于我們來說是很有必要的。2017-12-12
這篇文章主要為大家詳細介紹了Android自定義控件實現(xiàn)支付寶記賬餅圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
Android 應(yīng)用Crash 后自動重啟的方法小結(jié)
這篇文章主要介紹了Android 應(yīng)用Crash 后自動重啟的方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
Android TextView使用SpannableString設(shè)置復(fù)合文本的方法詳解
這篇文章主要介紹了Android TextView使用SpannableString設(shè)置復(fù)合文本的方法,結(jié)合實例形式詳細分析了Android中SpannableString類的功能及相關(guān)用法,需要的朋友可以參考下2016-08-08
本篇文章主要介紹了Android 國際貨幣格式化的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Android實現(xiàn)藍牙客戶端與服務(wù)器端通信示例
這篇文章主要介紹了Android實現(xiàn)藍牙客戶端與服務(wù)器端通信示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
這篇文章主要為大家詳細介紹了Android RecyclerView基本使用的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02