前段時間幫朋友寫了一個自定義View，由于UI效果比較特殊（見下圖），在網(wǎng)上找不到可用的輪子，只好自己造輪子。
正好最近有時間來梳理總結(jié)一下實現(xiàn)的過程。我會把這個過程分為三個步驟去實現(xiàn)：
第一步驟：
先把最基本的進度條+懸浮窗實現(xiàn)，效果如下：
第二步驟
再添加左邊的文字標簽，效果如下：
第三步驟：
再在懸浮窗里添加文字標簽，效果如下：
以上三個效果，我會分為多篇文章進行詳細介紹。
分析
要實現(xiàn)一個自定義效果，首先我們要思考如何去實現(xiàn)，有了具體的方案我們再去動手寫代碼就會相對比較容易。為了更容易理解和開發(fā)，我把該效果拆分為上下兩部分：上部分【懸浮窗】和下部分【進度條】，并且使用兩個自定義View進行組合實現(xiàn)。
進度條： 就比較容易了，我們可以使用ProgressBar或者使用畫筆自己繪制，這里我選擇自己繪制。
懸浮窗：這個是該View效果的重點。我們可以使用Path繪制軌跡，并填充顏色。
百分比：使用canvas.drawText接口進行繪制。
很明顯，難點在于【懸浮窗】的實現(xiàn)，不僅需要考慮邊框和填充色，還有底部箭頭的動態(tài)平移效果，我唯一想到的只有使用Path進行開發(fā)。作為該自定義控件的核心效果，我們下個章節(jié)進行介紹。今天，我們第一個步驟也就是度條開始做起。
進度條
- 進度條兩端不是直角，而是圓角，可以把畫筆Paint設(shè)置成圓角，直接繪制直線即可。
- 進度條分為背景色和填充色，使用兩個畫筆分別實現(xiàn)。
- 進度條的指示位置上有一個白色小亮點，可以使用小圖標，使用drawBitmap進行實現(xiàn)。
- 動效：使用屬性動畫，調(diào)用invalidate()方法實現(xiàn)動效效果。
代碼
1). 初始化畫筆：
首先，我們先來初始化三個畫筆，兩個用于繪制進度條的前景和背景，另一個用于繪制bitmap。并在構(gòu)造方法中分別對其初始化，設(shè)置顏色、樣式、寬度等屬性。
// 畫筆，用于繪制進度條的背景
private Paint mPaintBackground;
// 畫筆，用于繪制進度條的前景
private Paint mPaintProgress;
// 畫筆，用于繪制進度條的圖標
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);
// 計算坐標
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);
// 繪制圖標
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)完成了自定義進度條的效果，來看一下效果如下：
至此我們也完成了第一步，下一篇將對懸浮窗進行介紹。
