前段時間幫朋友寫了一個自定義View，由于UI效果比較特殊（見下圖），在網(wǎng)上找不到可用的輪子，只好自己造輪子。

正好最近有時間來梳理總結(jié)一下實現(xiàn)的過程。我會把這個過程分為三個步驟去實現(xiàn)：

第一步驟：

先把最基本的進度條+懸浮窗實現(xiàn)，效果如下：

第二步驟

再添加左邊的文字標(biāo)簽，效果如下：

第三步驟：

再在懸浮窗里添加文字標(biāo)簽，效果如下：

以上三個效果，我會分為多篇文章進行詳細介紹。

分析

要實現(xiàn)一個自定義效果，首先我們要思考如何去實現(xiàn)，有了具體的方案我們再去動手寫代碼就會相對比較容易。為了更容易理解和開發(fā)，我把該效果拆分為上下兩部分：上部分【懸浮窗】和下部分【進度條】，并且使用兩個自定義View進行組合實現(xiàn)。

• 進度條： 就比較容易了，我們可以使用ProgressBar或者使用畫筆自己繪制，這里我選擇自己繪制。

• 懸浮窗：這個是該View效果的重點。我們可以使用Path繪制軌跡，并填充顏色。

• 百分比：使用canvas.drawText接口進行繪制。

很明顯，難點在于【懸浮窗】的實現(xiàn)，不僅需要考慮邊框和填充色，還有底部箭頭的動態(tài)平移效果，我唯一想到的只有使用Path進行開發(fā)。作為該自定義控件的核心效果，我們下個章節(jié)進行介紹。今天，我們第一個步驟也就是度條開始做起。

進度條

• 進度條兩端不是直角，而是圓角，可以把畫筆Paint設(shè)置成圓角，直接繪制直線即可。
• 進度條分為背景色和填充色，使用兩個畫筆分別實現(xiàn)。
• 進度條的指示位置上有一個白色小亮點，可以使用小圖標(biāo)，使用drawBitmap進行實現(xiàn)。
• 動效：使用屬性動畫，調(diào)用invalidate()方法實現(xiàn)動效效果。

代碼

1). 初始化畫筆：

首先，我們先來初始化三個畫筆，兩個用于繪制進度條的前景和背景，另一個用于繪制bitmap。并在構(gòu)造方法中分別對其初始化，設(shè)置顏色、樣式、寬度等屬性。

// 畫筆，用于繪制進度條的背景
private Paint mPaintBackground;
// 畫筆，用于繪制進度條的前景
private Paint mPaintProgress;
// 畫筆，用于繪制進度條的圖標(biāo)
private Paint mPaintPicture;

/**
 * 初始化畫筆
 */
private void initPaints() {
    mPaintBackground = new Paint();
    // 設(shè)置樣式-填充
    mPaintBackground.setStyle(Paint.Style.FILL);
    // 設(shè)置圓角
    mPaintBackground.setStrokeCap(Paint.Cap.ROUND);
    // 設(shè)置顏色
    mPaintBackground.setColor(Color.GRAY);
    // 設(shè)置抗鋸齒
    mPaintBackground.setAntiAlias(true);

    mPaintProgress = new Paint();
    mPaintProgress.setStyle(Paint.Style.FILL);
    mPaintProgress.setStrokeCap(Paint.Cap.ROUND);
    mPaintProgress.setColor(Color.RED);
    mPaintProgress.setAntiAlias(true);

    mPaintPicture = new Paint();
    mPaintPicture.setAntiAlias(true);
}

2). 初始化bitmap:

其次，還需要先初始化一個bitmap。

private Bitmap mBitmap;

mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.icon);

3). 尺寸:

我們把View的高度賦值給畫筆的寬度，同時重新修正bitmap的寬高。

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mPaintWidth = h;
    mPaintProgress.setStrokeWidth(mPaintWidth);
    mPaintBackground.setStrokeWidth(mPaintWidth);
    mBitmapSize = h;
    mBitmap = resizeImage(mBitmap, mBitmapSize, mBitmapSize);
    invalidate();
}
/**
 * 重新設(shè)置bitmap的尺寸
 */
private Bitmap resizeImage(Bitmap bitmap, int w, int h) {
    int width = bitmap.getWidth();
    int height = bitmap.getHeight();
    float scaleWidth = ((float) w) / width;
    float scaleHeight = ((float) h) / height;
    Matrix matrix = new Matrix();
    matrix.postScale(scaleWidth, scaleHeight);
    return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
}

4). 繪制:

繪制邏輯，我們采用繪制直線的方式，先繪制一條直線作為進度條的背景，在此基礎(chǔ)上再繪制一條直線作為前景。

@Override
public void draw(Canvas canvas) {
    super.draw(canvas);
    // 繪制背景
    canvas.drawLine(mPaintWidth / 2.0f, getHeight() / 2.0f, getWidth() - mPaintWidth / 2.0f, getHeight() / 2.0f, mPaintBackground);
    // 計算坐標(biāo)
    float x = (getWidth() - mPaintWidth) * progress / 100;
    float endX = x + mPaintWidth / 2.0f;
    // 繪制前景
    canvas.drawLine(mPaintWidth / 2.0f, getHeight() / 2.0f, endX, getHeight() / 2.0f, mPaintProgress);
    // 繪制圖標(biāo)
    canvas.drawBitmap(mBitmap, endX - mBitmapSize / 2.0f, getPaddingTop(), mPaintPicture);
}

5). 設(shè)置進度:

/**
 * 設(shè)置進度
 *
 * @param progress 當(dāng)前進度
 */
public void setProgress(float progress) {
    this.progress = progress;
    invalidate();
}

/**
 * 設(shè)置進度，帶動畫
 *
 * @param progress 當(dāng)前進度
 */
public void setProgressWithAnim(float progress) {
    ValueAnimator animator = ValueAnimator.ofFloat(0, progress).setDuration(ANIMATION_DURATION);
    animator.addUpdateListener(animation -> {
        this.progress = (float) animation.getAnimatedValue();
        invalidate();
    });
    animator.start();
}

以上部分，就已經(jīng)完成了自定義進度條的效果，來看一下效果如下：

至此我們也完成了第一步，下一篇將對懸浮窗進行介紹。