前段时间帮朋友写了一个自定义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();
}
以上部分，就已经完成了自定义进度条的效果，来看一下效果如下：
至此我们也完成了第一步，下一篇将对悬浮窗进行介绍。
网友评论