最終的效果:

 思路就是在onDraw()中畫一些內容,主要方法有這些:

/**
 * 剪裁圓形區域
 */
clipCircle(canvas);
/**
 * 畫圓邊線
 */
drawCircle(canvas);
/**
 * 畫波浪線
 */
drawWave(canvas);
/**
 * 畫進度文字
 */
drawText(canvas);

1.clipCircle(canvas)這個方法剪裁出一個圓形畫布:

private void clipCircle(Canvas canvas) {
    Path circlePath = new Path();
    circlePath.addCircle(screenWidth / 2, screenHeignt / 2, screenHeignt / 2, Path.Direction.CW);
    canvas.clipPath(circlePath);
}

2.drawCircle(canvas)畫出圓的邊線:

private void drawCircle(Canvas canvas) {
        canvas.drawCircle(screenHeignt / 2, screenHeignt / 2, screenHeignt / 2, circlePaint);
    }

3.drawWave(canvas)畫波浪線:

 private void drawWave(Canvas canvas) {
        int height = (int) (progress / 100 * screenHeignt);
        startPoint.y = -height;
        canvas.translate(0, screenHeignt);
        path = new Path();
        wavePaint.setStyle(Paint.Style.FILL);
        wavePaint.setColor(Color.GREEN);
        int wave = screenWidth / 4;
        path.moveTo(startPoint.x, startPoint.y);
        for (int i = 0; i < 4; i++) {
            int startX = startPoint.x + i * wave * 2;
            int endX = startX + 2 * wave;
            if (i % 2 == 0) {
                path.quadTo((startX + endX) / 2, startPoint.y + amplitude, endX, startPoint.y);
            } else {
                path.quadTo((startX + endX) / 2, startPoint.y - amplitude, endX, startPoint.y);
            }
        }
        path.lineTo(screenWidth, screenHeignt / 2);
        path.lineTo(-screenWidth, screenHeignt / 2);
        path.lineTo(-screenWidth, 0);
        path.close();
        canvas.drawPath(path, wavePaint);
        startPoint.x += 10;
        if (startPoint.x > 0) {
            startPoint.x = -screenWidth;
        }
        path.reset();
    }

這段程式碼說來有些複雜;

首先我們看到height,這個是波浪曲線所在的y軸的曲線,progress是傳進來的進度為了計算我轉化成百分比先除以100再乘以螢幕高度(這裡的螢幕高度大家可以理解成直徑)。

其次我把螢幕y軸移動到了控制元件的底部也就是如圖這樣的:

接下來我就開始建立path設定畫筆開始畫波浪線了, 我們設定的startpoint為x軸負一個螢幕的寬度,從這個點開始畫兩個完整的正弦曲線,wave的大小為screenWidth/4(在圖中標註了),在for中改變startpoint並且畫出曲線(每個人可能有不一樣的實現方法,這段程式碼看起來可能費勁),最終把這個波浪與右下做下點連起來形成閉合圖形,用於著色,那麼畫完了怎麼讓波浪凍起來呢?我們每次重新整理ondraw()都讓起始點的x+10,然後判斷如果x大於0,也就是起始點來到了(0,screenWidth)這個點的時候,我們把startpoint的x座標回到最初的位置即可,這樣每次重新整理就形成了一個動態波浪的效果了。波浪的高度通過剛開始的startPoint.y = -height來實現,加符號因為y軸複方向為進度的增長方向。

4.drawText()繪製文字:

private void drawText(Canvas canvas) {
        Rect targetRect = new Rect(0, -screenHeignt, screenWidth, 0);
        Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
        int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
        textPaint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText(String.valueOf((int) textProgress + "%"), targetRect.centerX(), baseline, textPaint);
    }

 繪製文字為了讓文字居中我做了一些必要的計算

 

PS:細心的小夥伴在setProgress()這個方法中發現了一點問題為什麼會這麼寫呢:

public void setProgress(float progress) {
        this.textProgress = progress;
        if (progress == 100) {
            this.progress = progress + amplitude;
        } else {
            this.progress = progress;
        }
    }

原因是因為當我們的進度達到100%的時候,由於sin曲線和從左到右的波動還是會出現空白流動的區域,就像如圖這樣:

這樣豈不是很蛋疼,進度滿了不能出現這種情況,所以我手動判斷如果進度在100%就把y座標加上一個保險值,保證不出現以上這個情況。 

 

書寫本文旨在練習與理解自定義view、貝賽爾曲線等等知識,如有錯誤歡迎指正,原始碼連結GitHub傳送門,歡迎clone&start