前段時間幫朋友寫了一個自定義View,由于UI效果比較特殊(見下圖),在網上找不到可用的輪子,只好自己造輪子。
正好最近有時間來梳理總結一下實現的過程。我會把這個過程分為三個步驟去實現:
第一步驟:
先把最基本的進度條+懸浮窗實現,效果如下:
第二步驟
再添加左邊的文字標簽,效果如下:
第三步驟:
再在懸浮窗里添加文字標簽,效果如下:
以上三個效果,我會分為多篇文章進行詳細介紹。
分析
要實現一個自定義效果,首先我們要思考如何去實現,有了具體的方案我們再去動手寫代碼就會相對比較容易。為了更容易理解和開發,我把該效果拆分為上下兩部分:上部分【懸浮窗】和下部分【進度條】,并且使用兩個自定義View進行組合實現。
進度條: 就比較容易了,我們可以使用ProgressBar或者使用畫筆自己繪制,這里我選擇自己繪制。
懸浮窗:這個是該View效果的重點。我們可以使用Path繪制軌跡,并填充顏色。
百分比:使用canvas.drawText接口進行繪制。
很明顯,難點在于【懸浮窗】的實現,不僅需要考慮邊框和填充色,還有底部箭頭的動態平移效果,我唯一想到的只有使用Path進行開發。作為該自定義控件的核心效果,我們下個章節進行介紹。今天,我們第一個步驟也就是度條開始做起。
進度條
- 進度條兩端不是直角,而是圓角,可以把畫筆Paint設置成圓角,直接繪制直線即可。
- 進度條分為背景色和填充色,使用兩個畫筆分別實現。
- 進度條的指示位置上有一個白色小亮點,可以使用小圖標,使用drawBitmap進行實現。
- 動效:使用屬性動畫,調用invalidate()方法實現動效效果。
代碼
1). 初始化畫筆:
首先,我們先來初始化三個畫筆,兩個用于繪制進度條的前景和背景,另一個用于繪制bitmap。并在構造方法中分別對其初始化,設置顏色、樣式、寬度等屬性。
// 畫筆,用于繪制進度條的背景
private Paint mPaintBackground;
// 畫筆,用于繪制進度條的前景
private Paint mPaintProgress;
// 畫筆,用于繪制進度條的圖標
private Paint mPaintPicture;
/**
* 初始化畫筆
*/
private void initPaints() {
mPaintBackground = new Paint();
// 設置樣式-填充
mPaintBackground.setStyle(Paint.Style.FILL);
// 設置圓角
mPaintBackground.setStrokeCap(Paint.Cap.ROUND);
// 設置顏色
mPaintBackground.setColor(Color.GRAY);
// 設置抗鋸齒
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();
}
/**
* 重新設置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). 繪制:
繪制邏輯,我們采用繪制直線的方式,先繪制一條直線作為進度條的背景,在此基礎上再繪制一條直線作為前景。
@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). 設置進度:
/**
* 設置進度
*
* @param progress 當前進度
*/
public void setProgress(float progress) {
this.progress = progress;
invalidate();
}
/**
* 設置進度,帶動畫
*
* @param progress 當前進度
*/
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();
}
以上部分,就已經完成了自定義進度條的效果,來看一下效果如下:
至此我們也完成了第一步,下一篇將對懸浮窗進行介紹。