溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
先看效果圖：
你可以定義成你項目的logo圖片，可以設置水波顏色、波長、波寬、字體大小、顏色、進度條的最大值，當前進度值，還可以設置波紋震動的快慢。當設置一個進度不變的時候，打開時還有一個動畫填滿的效果（比如第二個流量顯示，這里圖片沒有截出這個效果）。
源碼地址
1. 如何使用
1.1 在布局文件中
添加自定義控件：
<cn.fanrunqi.waveprogressview.WaveProgressView android:id="@+id/waveProgressbar" android:background="@drawable/circle" <!--android:background="@drawable/bg_a"--> android:layout_width="130dp" android:layout_height="130dp" />
說明，這里的android:background定義的是控件的形狀，比如上面的圓形和美女，你可用shape.xml定義形狀圖片。
比如，這是一個圓
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#DDDDDD"/> <size android:width="150dp" android:height="150dp"/> </shape>
也可以直接給android:background設置一張圖片，比如：
這里注意透明像素，還有為了圖片縮放的時候不變形，建議背景（不管是圖片還是圖形）為正方形。
1.2 在代碼中
你可以選擇進行如下設置：
//設置當前進度值和當前顯示的文字 waveProgressbar.setCurrent(int currentProgress,String currentText); // 77, "788M/1024M" //設置進度條的最大值 waveProgressbar.setMaxProgress(int maxProgress); //設置顯示文字的大小和顏色 waveProgressbar.setText(String mTextColor,int mTextSize);//"#FFFF00", 41 //設置水波的顏色 waveProgressbar.setWaveColor(String mWaveColor); //"#5b9ef4" //設置波浪的高度和波浪的寬度（均為一個波峰的大小） waveProgressbar.setWave(float mWaveHight,float mWaveWidth); //設置波浪的上下震動的速度（這里注意值越大，震動的越小） waveProgressbar.setmWaveSpeed(int mWaveSpeed);//The larger the value, the slower the vibration
2. 代碼實現
這里實現主要用到的知識有 自定義view、PorterDuffXfermode和二階貝塞爾曲線，不太清楚的可以在我博客找找，都有的。
首先自定義WaveProgressView繼承View，在構造函數中獲取布局文件中設置的背景，同時設置一個畫波浪的畫筆和畫文字的畫筆。
private void Init() {
/**
* 獲得背景
*/
if(null==getBackground()){
throw new IllegalArgumentException(String.format("background is null."));
}else{
backgroundBitmap = getBitmapFromDrawable(getBackground());
}
/**
* 波浪畫筆
*/
mPath = new Path();
mPathPaint = new Paint();
mPathPaint.setAntiAlias(true);
mPathPaint.setStyle(Paint.Style.FILL);
/**
* 進度畫筆
*/
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextAlign(Paint.Align.CENTER);
//開始不斷自我繪制，讓波浪動起來
handler.sendEmptyMessageDelayed(INVALIDATE,100);
}
復寫onDraw方法，先把波浪畫在畫布上，然后畫背景（給背景畫筆設置PorterDuff.Mode.DST_ATOP模式：取上層非交集部分與下層交集部分 ）。當然也可以是PorterDuff.Mode.SRC_ATOP，主要取決于你畫的先后順序。最后把文字畫上去，形成一個最終Bitmap，最后把這個Bitmap畫到onDraw的參數canvas上。
Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap finalBmp = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888);
/**
* 產生一個同樣大小的畫布
*/
Canvas canvas = new Canvas(finalBmp);
/**
* 繪制波浪
*/
float CurMidY = height*(maxProgress-currentProgress)/maxProgress;
if(CurY>CurMidY){
CurY = CurY - (CurY-CurMidY)/10;
}
mPath.reset();
mPath.moveTo(0-distance,CurY);
int waveNum = width/((int)mWaveHalfWidth*4)+1;
int multiplier = 0;
for(int i =0;i<waveNum;i++){
mPath.quadTo(mWaveHalfWidth*(multiplier+1)-distance,CurY-mWaveHight,mWaveHalfWidth*(multiplier+2)-distance,CurY);
mPath.quadTo(mWaveHalfWidth*(multiplier+3)-distance,CurY+mWaveHight,mWaveHalfWidth*(multiplier+4)-distance,CurY);
multiplier+=4;
}
distance +=mWaveHalfWidth/mWaveSpeed;
distance = distance%(mWaveHalfWidth*4);
mPath.lineTo(width,height);
mPath.lineTo(0,height);
mPath.close();
canvas.drawPath(mPath, mPathPaint);
/**
* 對圖片給進行縮放
*/
int min = Math.min(width,height);
backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap,min,min,false);
/**
* 使用DST_ATOP，取上層非交集部分與下層交集部分 。
*/
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));
/**
* 繪制圖片
*/
canvas.drawBitmap(backgroundBitmap,0,0,paint);
/**
* 繪制進度文字
*/
canvas.drawText(currentText, width/2, height/2, mTextPaint);
return finalBmp;
這里的CurY是上次波浪中線的y軸坐標，CurMidY 是當前的Y軸坐標，每次波浪上升的時候為了不產生卡頓效果，把這1/100的上升分為10次來繪制。
distance是ｘ軸的偏移量，為了使水波動起來，每次繪制時都要向左進行一段偏移。
distance +=mWaveHalfWidth/mWaveSpeed; distance = distance%(mWaveHalfWidth*4);
每次偏移距離為 半波寬度／波浪震動速度，因為一個波是４個半波寬度形成一個循環，然后又回到最開始ｘ位置開始循環位移。
根據view的寬度計算出一共要繪制多少個波形出來，同時多加一個波為了向左平移。
int waveNum = width/((int)mWaveHalfWidth*4)+1;
int multiplier = 0;
for(int i =0;i<waveNum;i++){
mPath.quadTo(mWaveHalfWidth*(multiplier+1)-distance,CurY-mWaveHight,mWaveHalfWidth*(multiplier+2)-distance,CurY);
mPath.quadTo(mWaveHalfWidth*(multiplier+3)-distance,CurY+mWaveHight,mWaveHalfWidth*(multiplier+4)-distance,CurY);
multiplier+=4;
}
每次繪制以波形的左邊點、波形的右邊點、view的左下角、view的右下角、形成一個圖片把它繪制到內存中新建的和view同大小的canvas上。
mPath.reset(); mPath.moveTo(0-distance,CurY); mPath.lineTo(width,height); mPath.lineTo(0,height); mPath.close(); canvas.drawPath(mPath, mPathPaint);
先對背景圖形進行縮放再繪制到canvas上，這里的縮放是按最小邊進行縮放。
int min = Math.min(width,height); backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap,min,min,false);
最后把文字繪制上去，注意我們在初始化中設置了畫筆，為了能通過代碼設置文字的顏色，要把設置文字畫筆顏色和大小放在onDraw方法中。
mPathPaint.setColor(Color.parseColor(mWaveColor)); mTextPaint.setColor(Color.parseColor(mTextColor)); mTextPaint.setTextSize(mTextSize); canvas.drawText(currentText, width/2, height/2, mTextPaint);
為了使波浪動起來，使用handler循環調用invalidate刷新界面。同時應該在構造函數打開handler循環。
private static final int INVALIDATE = 0X777;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case INVALIDATE:
invalidate();
sendEmptyMessageDelayed(INVALIDATE,RefreshGap);
break;
}
}
};
最后就是一些相關屬性設置的函數。
/**
* @param currentProgress 當前進度
* @param currentText 當前顯示的進度文字
*/
public void setCurrent(int currentProgress,String currentText) {
this.currentProgress = currentProgress;
this.currentText = currentText;
}
/**
* @param maxProgress 設置進度條的最大值，默認100
*/
public void setMaxProgress(int maxProgress){
this.maxProgress = maxProgress;
}
/**
* @param mTextColor 文字的顏色
* @param mTextSize 文字的大小
*/
public void setText(String mTextColor,int mTextSize){
this.mTextColor = mTextColor;
this.mTextSize = mTextSize;
}
/**
* @param mWaveHight 波峰的高度
* @param mWaveWidth 一個波峰的寬度
*/
public void setWave(float mWaveHight,float mWaveWidth){
this.mWaveHight = mWaveHight;
this.mWaveHalfWidth = mWaveWidth/2;
}
/**
* @param mWaveColor 水的顏色
*/
public void setWaveColor(String mWaveColor){
this.mWaveColor = mWaveColor;
}
/**
* 值越大震蕩的越慢
* @param mWaveSpeed
*/
public void setmWaveSpeed(int mWaveSpeed){
this.mWaveSpeed = mWaveSpeed;
}
實現還是比較簡單的，源碼和demo都在上面的地址中，如果有什么問題可以給我留言，謝謝！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
