Android項目實戰(zhàn)手把手教你畫圓形水波紋loadingview
本文實例講解的是如何畫一個滿滿圓形水波紋loadingview，這類效果應用場景很多，比如內(nèi)存占用百分比之類的，分享給大家供大家參考，具體內(nèi)容如下
效果圖如下：
預備的知識：
- 1.貝塞爾曲線 如果你不了解，可以來這里進行基礎知識儲備：神奇的貝塞爾曲線
- 2.Paint.setXfermode()以及PorterDuffXfermode
千萬不要被這個b的名字嚇到，不熟悉看到可能會認為很難記，其實 只要站在巨人的丁丁上 還是很簡單的。
好了 廢話不多說 ，跟我一步步來做一個炫酷的view吧。
首先給一些屬性，在構造器里初始化（不要再ondraw new東西不要再ondraw new東西不要再ondraw new東西不要再ondraw new東西）
//繪制波紋
private Paint mWavePaint;
private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.XOR);//設置mode 為XOR
//繪制圓
private Paint mCirclePaint;
private Canvas mCanvas;//我們自己的畫布
private Bitmap mBitmap;
private int mWidth;
private int mHeight;
public WaveLoadingView(Context context) {
this(context,null);
}
public WaveLoadingView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public WaveLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mWavePaint = new Paint();
mWavePaint.setColor(Color.parseColor("#33b5e5"));
mCirclePaint = new Paint();
mCirclePaint.setColor(Color.parseColor("#99cc00"));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY) {
mWidth = widthSize;
}
if (heightMode == MeasureSpec.EXACTLY) {
mHeight = heightSize;
}
setMeasuredDimension(mWidth, mHeight);
mBitmap = Bitmap.createBitmap(300,300, Bitmap.Config.ARGB_8888); //生成一個bitmap
mCanvas = new Canvas(mBitmap);//講bitmp放在我們自己的畫布上，實際上mCanvas.draw的時候 改變的是這個bitmap對象
}
然后，我們給他繪制一點東西，用來介紹PorterDuffXfermode
@Override
protected void onDraw(Canvas canvas) {
mCanvas.drawCircle(100,100,50,mCirclePaint);
mCanvas.drawRect(100,100,200,200,mWavePaint);
canvas.drawBitmap(mBitmap,0,0,null);
super.onDraw(canvas);
}
嗯，可以看到 是我們現(xiàn)在自己的畫布上鋪了一個bitmap(這里可以理解canvas為桌子 bitmap為畫紙，我們在bimap上畫畫)， 然后在bitmap上畫了 一個圓，和一個矩形。最后把我們的mBitmap畫到系統(tǒng)的畫布上(顯示到屏幕上)，得到了以下效果。
然后我們用setXfermode()方法給他設置一個mode，這里設置XOR。
可以發(fā)現(xiàn)！ 相交的地方消失了！ 是不是很神奇。
在改一個mode 試試
private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.DST_OVER);
可以看到圓形跑到了矩形上面來。然后巨人給我們總結各個模式如了下圖，這里給一個說明dst為先畫的 src為后畫的：.
大家可以根據(jù)這個規(guī)律試一下。
現(xiàn)在，我們把圓和矩形重疊。模式去掉。
protected void onDraw(Canvas canvas) {
//dst
mCanvas.drawCircle(150,150,50,mCirclePaint);
/ mWavePaint.setXfermode(mMode);
//src
mCanvas.drawRect(100,100,200,200,mWavePaint);
canvas.drawBitmap(mBitmap,0,0,null);
super.onDraw(canvas);
}
我的圓怎么沒了。。 其實圓是被覆蓋掉了。 然后我們想實現(xiàn)一個效果，就是在圓的范圍內(nèi)，顯示矩形的內(nèi)容，該怎么做呢。自己照著圖找找吧哈哈。
我們要實現(xiàn)的是一個圓形的水波紋那種loadingview。。首要就是實現(xiàn)這個水波紋。
這時候貝塞爾曲線就派上用場了。這里采用三階貝塞爾， 不停地改變X 模擬水波效果。
if (x > 50) {
isLeft = true;
} else if (x < 0) {
isLeft = false;
}
<span style="white-space:pre"> </span>if (y > -50) { //大于-50是因為輔助點是50 為了讓他充滿整個屏幕
y--;
} if (isLeft) {
x = x - 1;
} else {
x = x + 1;
}
mPath.reset();
mPath.moveTo(0, y);
mPath.cubicTo(100 + x*2, 50 + y, 100 + x*2, y-50, mWidth, y);//前兩個參數(shù)是輔助點
mPath.lineTo(mWidth, mHeight);//充滿整個畫布
mPath.lineTo(0, mHeight);//充滿整個畫布
mPath.close();
之后用mCanvas來繪制這個bitmap，要注意的是 繪制之前要清空mBitmap，不然path會重疊
mBitmap.eraseColor(Color.parseColor("#00000000"));
//dst
mCanvas.drawPath(mPath, mPaint);
canvas.drawBitmap(mBitmap, 0, 0, null);
postInvalidateDelayed(10);
哈，水波效果出來了。接著想辦法讓他畫到一個圓形中。 首先繪制一個圓
mCanvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mSRCPaint);
現(xiàn)在讓我們回到剛才的問題，如何在dst的范圍內(nèi)繪制src呢。答案是：SRC_IN 你找對了嗎？添加模式
//dst mCanvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mSRCPaint); mPaint.setXfermode(mMode); //src mCanvas.drawPath(mPath, mPaint); canvas.drawBitmap(mBitmap, 0, 0, null);
是不是有點感覺了。如果不這樣做 就需要考慮好多問題。動態(tài)計算沿著圓弧x，y坐標計算arcTo的范圍。
完善一下，添加一個percent來代表進度，讓y來根據(jù)percent動態(tài)改變
y = (int) ((1-mPercent /100f) *mHeight);
添加setPercent方法
public void setPercent(int percent){
mPercent = percent;
}
畫上百分比的文字。
String str = mPercent + "%";
float txtLength = mTextPaint.measureText(str);
canvas.drawText(mPercent + "%", mWidth / 2-txtLength/2, mHeight / 2, mTextPaint);
然后配合seekBar，最后改改字體大小 畫筆透明度。 添加個背景圖 就成了效果圖上的效果。
是不是很有趣，大家可以動手實現(xiàn)一下！
- Android水波紋載入控件CircleWaterWaveView使用詳解
- android自定義WaveView水波紋控件
- Android自定義View控件實現(xiàn)多種水波紋漣漪擴散效果
- Android自定義WaveProgressView實現(xiàn)水波紋加載需求
- Android自定義View實現(xiàn)水波紋效果
- Android自定義View實現(xiàn)水波紋引導動畫
- Android 自定義view實現(xiàn)水波紋動畫效果
- Android自定義View 實現(xiàn)水波紋動畫引導效果
- Android自定義view實現(xiàn)水波紋進度球效果
- Android自定義View實現(xiàn)簡單水波紋效果
相關文章
Android RecyclerView設置下拉刷新的實現(xiàn)方法
這篇文章主要介紹了Android RecyclerView設置下拉刷新的實現(xiàn)方法,希望通過本文通過SwipeRefreshLayout方式實現(xiàn)下拉刷新，需要的朋友可以參考下2017-10-10
Android實現(xiàn)dialog的3D翻轉(zhuǎn)示例
這篇文章主要介紹了Android實現(xiàn)dialog的3D翻轉(zhuǎn)示例，非常具有實用價值，需要的朋友可以參考下2017-08-08
adb wireless進行Android手機調(diào)試詳解
這篇文章給大家講解了在Android手機上使用adb wireless進行調(diào)試的步驟以及問題解決辦法，有需要的跟著學習下吧。2017-12-12
這篇文章主要為大家詳細介紹了Android逐幀動畫實現(xiàn)代碼，可以通過xml或java代碼實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
在 Android 開發(fā)中,網(wǎng)絡請求是一個極為關鍵的部分,Retrofit 作為一個強大的網(wǎng)絡請求庫,能夠簡化開發(fā)流程,提供高效的網(wǎng)絡請求能力,本文將深入介紹 Retrofit 的高級使用與原理,幫助讀者更全面地理解和應用這一庫,需要的朋友可以參考下2023-08-08
Android移動開發(fā)recycleView的頁面點擊跳轉(zhuǎn)設計實現(xiàn)
這篇文章主要介紹了Android移動開發(fā)recycleView的頁面點擊跳轉(zhuǎn)設計實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
今天小編就為大家分享一篇關于Android添加音頻的幾種方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02
21天學習android開發(fā)教程之SQLite分頁讀取
21天學習android開發(fā)教程之SQLite分頁讀取，Android包含了常用于嵌入式系統(tǒng)的SQLite，免去了開發(fā)者自己移植安裝的功夫，感興趣的朋友可以參考一下2016-02-02
Android設備間實現(xiàn)藍牙（Bluetooth）共享上網(wǎng)
這篇文章主要為大家詳細介紹了Android設備間實現(xiàn)藍牙（Bluetooth）共享上網(wǎng)的方法，主要以圖片的方式向大家展示藍牙共享上網(wǎng)2016-03-03
Android訪問php取回json數(shù)據(jù)實例
Android訪問php取回json數(shù)據(jù)，實現(xiàn)代碼如下，遇到訪問網(wǎng)絡的權限不足在AndroidManifest.xml中，需要進行如下配置2013-06-06