1. 程式人生 > >Android自定義View之水波紋顯示進度效果

Android自定義View之水波紋顯示進度效果

 @Override
    protected void onDraw(Canvas canvas) {

        if (null != backgroundBitmap) {
            canvas.drawBitmap(createImage(), 0, 0, null);
        }
    }

    private Bitmap createImage() {
        mPathPaint.setColor(Color.parseColor(mWaveColor));
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);

        //剩餘進度
        float currentMidY = height * (maxProgress - currentProgress) / maxProgress;
        if (currentY > currentMidY) {//每次增長currentY-currentMidY)/10
            currentY = currentY - (currentY - currentMidY) / 10;
        }
        //清除掉path裡的線條和曲線,但是不會改變它的fill-type
        mPath.reset();
        //移動路徑的起始點到(0 - distance, currentY)
        mPath.moveTo(0 - distance, currentY);
        //顯示的區域內的水波紋的數量
        int waveNum = width / ((int) mWaveWidth);
        int num = 0;
        for (int i = 0; i < waveNum; i++) {
            //封裝了二階貝塞爾曲線,x1、y1 代表控制點的 x、y,即一個控制點動態圖中的P1,x2、y2 代表目標點的 x、y
            mPath.quadTo(mWaveWidth * (num + 1) - distance, currentY - mWaveHight, mWaveWidth * (num + 2) - distance, currentY);
            mPath.quadTo(mWaveWidth * (num + 3) - distance, currentY + mWaveHight, mWaveWidth * (num + 4) - distance, currentY);
            num += 4;
        }

        distance += mWaveWidth / mWaveSpeed;
        distance = distance % (mWaveWidth * 4);
        //從上一個點已直線方式連線到座標(width, height)
        mPath.lineTo(width, height);
        mPath.lineTo(0, height);
        //close相當於lineTo到最後一次moveTo的終點構成一條閉合路徑
        mPath.close();
        canvas.drawPath(mPath, mPathPaint);

        int min = Math.min(width, height);
        backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap, min, min, false);
        //取上層非交集部分與下層交集部分
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));
        canvas.drawBitmap(backgroundBitmap, 0, 0, paint);
        canvas.drawText(currentText, width / 2, height / 2, mTextPaint);
        return bitmap;
    }