Android項目實戰(zhàn)手把手教你畫圓形水波紋loadingview

更新時間：2021年10月15日 09:40:49 作者：菜雞wing

這篇文章主要為大家詳細(xì)介紹了Android項目實戰(zhàn)手把手教你畫圓形水波紋loadingview，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例講解的是如何畫一個滿滿圓形水波紋loadingview，這類效果應(yīng)用場景很多，比如內(nèi)存占用百分比之類的，分享給大家供大家參考，具體內(nèi)容如下

效果圖如下：

預(yù)備的知識：

1.貝塞爾曲線如果你不了解，可以來這里進行基礎(chǔ)知識儲備：神奇的貝塞爾曲線
2.Paint.setXfermode()以及PorterDuffXfermode

千萬不要被這個b的名字嚇到，不熟悉看到可能會認(rèn)為很難記，其實只要站在巨人的丁丁上還是很簡單的。
好了廢話不多說，跟我一步步來做一個炫酷的view吧。

首先給一些屬性，在構(gòu)造器里初始化（不要再ondraw new東西不要再ondraw new東西不要再ondraw new東西不要再ondraw new東西）

  //繪制波紋 
  private Paint mWavePaint;  
  private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.XOR);//設(shè)置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()方法給他設(shè)置一個mode，這里設(shè)置XOR。

可以發(fā)現(xiàn)！相交的地方消失了！是不是很神奇。
在改一個mode 試試

private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.DST_OVER);

可以看到圓形跑到了矩形上面來。然后巨人給我們總結(jié)各個模式如了下圖，這里給一個說明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坐標(biāo)計算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)一下！

您可能感興趣的文章: