前言
最近要用到一个带下载进度的按钮，各种搜索了一波，很抱歉（/TДT)/ ，实在没有发现自己想要的效果，没办法只能自己尝试实现了一个了。
效果展示
-
支持圆角，支持是否显示边框
-
中间文字会根据下载进度有个变色的效果
-
下载完成后，“安装中“有一个 loading 的动画效果
难点分析
1 . 怎样实现中间文字会根据下载进度有个变色的效果？
可以通过 LinearGradient 实现字体渐变的效果，参考了LinearGradient与闪动文字效果，具体在代码中解释。
2 . 按钮的背景根据进度不断铺满？
以下图为例，根据当前进度画出一个和整个按钮相同大小的蓝色矩形（ dst ），再画一个同样大小的白色矩形，只显示白色矩形中两个重叠的部分不就好了吗？对，我们联想到了两个图层重叠时的显示模式，就是这里的 SRC_ATOP 模式。
3 . “安装中“有一个 loading 的动画效果？
网上已经有很多成熟的 loading 动画效果，理解一下它们的源码，自己实现一下就可以了，我这里参考了AVLoadingIndicatorView 中的两个不错的动画效果，当然你也可以修改成你自己喜欢的效果。
实现
来到了贴代码时间，O(∩_∩)O，其实就是按照自定义控件的基本流程
1 . 定义自定义属性
| Property | Format | Default |
|---|---|---|
| progress_btn_radius | dimension | 0dp |
| progress_btn_background_color | color | 3385FF |
| progress_btn_background_second_color | color | E8E8E8 |
| progress_btn_text_color | color | progress_btn_background_color |
| progress_btn_text_cover_color | color | Color.WHITE |
| progress_btn_border_width | dimension | 2dp |
| progress_btn_ball_style | enum | STYLE_BALL_JUMP |
STYLE_BALL_PULSE
STYLE_BALL_JUMP
这张图可能更加直观吧:
2 . 绘制按钮背景（根据不同状态绘制不同的效果）
private void drawBackground(Canvas canvas) {
mBackgroundBounds = new RectF();
//根据Border宽度得到Button的显示区域
mBackgroundBounds.left = showBorder ? mBorderWidth : 0;
mBackgroundBounds.top = showBorder ? mBorderWidth : 0;
mBackgroundBounds.right = getMeasuredWidth() - (showBorder ? mBorderWidth : 0);
mBackgroundBounds.bottom = getMeasuredHeight() - (showBorder ? mBorderWidth : 0);
if (showBorder) {
mBackgroundPaint.setStyle(Paint.Style.STROKE);
mBackgroundPaint.setColor(mBackgroundColor);
mBackgroundPaint.setStrokeWidth(mBorderWidth);
canvas.drawRoundRect(mBackgroundBounds, mButtonRadius, mButtonRadius, mBackgroundPaint);
}
mBackgroundPaint.setStyle(Paint.Style.FILL);
//color
switch (mState) {
case STATE_NORMAL:
mBackgroundPaint.setColor(mBackgroundColor);
canvas.drawRoundRect(mBackgroundBounds, mButtonRadius, mButtonRadius, mBackgroundPaint);
break;
case STATE_PAUSE:
case STATE_DOWNLOADING:
//计算当前的进度
mProgressPercent = mProgress / (mMaxProgress + 0f);
mBackgroundPaint.setColor(mBackgroundSecondColor);
canvas.save();
//画出dst图层
canvas.drawRoundRect(mBackgroundBounds, mButtonRadius, mButtonRadius, mBackgroundPaint);
//设置图层显示模式为 SRC_ATOP
PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);
mBackgroundPaint.setColor(mBackgroundColor);
mBackgroundPaint.setXfermode(porterDuffXfermode);
//计算 src 矩形的右边界
float right = mBackgroundBounds.right * mProgressPercent;
//在dst画出src矩形
canvas.drawRect(mBackgroundBounds.left, mBackgroundBounds.top, right, mBackgroundBounds.bottom, mBackgroundPaint);
canvas.restore();
mBackgroundPaint.setXfermode(null);
break;
case STATE_FINISH:
mBackgroundPaint.setColor(mBackgroundColor);
canvas.drawRoundRect(mBackgroundBounds, mButtonRadius, mButtonRadius, mBackgroundPaint);
break;
}
}3 . 绘制文字
private void drawTextAbove(Canvas canvas) {
//计算Baseline绘制的Y坐标
final float y = canvas.getHeight() / 2 - (mTextPaint.descent() / 2 + mTextPaint.ascent() / 2);
if (mCurrentText == null) {
mCurrentText = "";
}
final float textWidth = mTextPaint.measureText(mCurrentText.toString());
mTextBottomBorder = y;
mTextRightBorder = (getMeasuredWidth() + textWidth) / 2;
//color
switch (mState) {
case STATE_NORMAL:
mTextPaint.setShader(null);
mTextPaint.setColor(mTextCoverColor);
canvas.drawText(mCurrentText.toString(), (getMeasuredWidth() - textWidth) / 2, y, mTextPaint);
break;
case STATE_PAUSE:
case STATE_DOWNLOADING:
//进度条压过距离
float coverLength = getMeasuredWidth() * mProgressPercent;
//开始渐变指示器
float indicator1 = getMeasuredWidth() / 2 - textWidth / 2;
//结束渐变指示器
float indicator2 = getMeasuredWidth() / 2 + textWidth / 2;
//文字变色部分的距离
float coverTextLength = textWidth / 2 - getMeasuredWidth() / 2 + coverLength;
float textProgress = coverTextLength / textWidth;
if (coverLength <= indicator1) {
mTextPaint.setShader(null);
mTextPaint.setColor(mTextColor);
} else if (indicator1 < coverLength && coverLength <= indicator2) {
//设置变色效果
mProgressTextGradient = new LinearGradient((getMeasuredWidth() - textWidth) / 2, 0, (getMeasuredWidth() + textWidth) / 2, 0,
new int[]{mTextCoverColor, mTextColor},
new float[]{textProgress, textProgress + 0.001f},
Shader.TileMode.CLAMP);
mTextPaint.setColor(mTextColor);
mTextPaint.setShader(mProgressTextGradient);
} else {
mTextPaint.setShader(null);
mTextPaint.setColor(mTextCoverColor);
}
canvas.drawText(mCurrentText.toString(), (getMeasuredWidth() - textWidth) / 2, y, mTextPaint);
break;
case STATE_FINISH:
mTextPaint.setColor(mTextCoverColor);
canvas.drawText(mCurrentText.toString(), (getMeasuredWidth() - textWidth) / 2, y, mTextPaint);
drawLoadingBall(canvas);
break;
}
}4 . 两种动画效果
STYLE_BALL_PULSE
public ArrayList<ValueAnimator> createBallPulseAnimators() {
ArrayList<ValueAnimator> animators = new ArrayList<>();
int[] delays = new int[]{120, 240, 360};
for (int i = 0; i < 3; i++) {
final int index = i;
ValueAnimator scaleAnim = ValueAnimator.ofFloat(1, 0.3f, 1);
scaleAnim.setDuration(750);
scaleAnim.setRepeatCount(-1);
scaleAnim.setStartDelay(delays[i]);
scaleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
scaleFloats[index] = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animators.add(scaleAnim);
}
return animators;
}STYLE_BALL_JUMP
public ArrayList<ValueAnimator> createBallJumpAnimators() {
ArrayList<ValueAnimator> animators = new ArrayList<>();
int[] delays = new int[]{70, 140, 210};
for (int i = 0; i < 3; i++) {
final int index = i;
ValueAnimator scaleAnim = ValueAnimator.ofFloat(mTextBottomBorder, mTextBottomBorder - mBallRadius * 2, mTextBottomBorder);
scaleAnim.setDuration(600);
scaleAnim.setRepeatCount(-1);
scaleAnim.setStartDelay(delays[i]);
scaleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
translateYFloats[index] = (float) animation.getAnimatedValue();
postInvalidate();
}
});
animators.add(scaleAnim);
}
return animators;
}
总结
有什么不明白的可以下载完整源码学习一下，ps：自己也是站在巨人的肩膀上，才能够完整实现这个自定义控件，很感谢那些乐于分享和开源的大神，也希望可以帮助有需要的同学！
如果您觉得对你有所帮助，轻轻点一下star，来鼓励一下我，谢谢！o(∩_∩)o
