前言
要求的效果是这样的
progress_view.gif
粗看之下，好像挺简单的，先画背景、再画进度条、最后画文字，就可以了。
但细看之下，有坑，当文字的颜色和进度条相融时，还要从绿色变成白色，这可不好做。
还好Androd是有解决方案的，就是利用图形学里一个概念——PorterDuff.Mode。
PorterDuff是啥
本着学英语的态度，笔者去翻译了一下这个单词，然而并没有结果，查了资料才发现，这个单词是两个人名的组合：Thomas Porter 和 Tom Duff，这两位大神是研究图形混合的。说到这里大家应该能明白了，PorterDuff.Mode其实就是两种或多种图形混合在一起时的各种模式，这里有16种Mode，看下图（蓝色方块是Src即源图，黄色圆形是Dst即目标图）：
proter-duff.png
分析
那么，如何借助PorterDuff来实现我们想要的进度条效果呢？
这里需要绘制四个图层：最底层为灰色背景，其上为绿色进度条，最上面两个图层就要用到PorterDuff。
我们可以选用SrcATop这种混合模式，按照官方解析，在SrcATop模式下，Src图像像素不覆盖Dst图像像素的部分直接丢弃 ，Src图像像素剩余部分绘制在Dst图像像素之上。所以，我们可以让绿色的文字为Dst，然后最上层画一层白色的进度条，不相交时不起作用，相交时只显示为Src的颜色，文字也就变成了白色。
代码
代码比较简单，直接贴在下面吧。
public class ProgressView extends View {
/**
* 圆角弧度
*/
private static final int RADIUS = 60;
private Paint mPaint = new Paint();
private int mProgress;
public ProgressView(Context context) {
this(context, null);
}
public ProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setProgress(int progress) {
if (progress >= 0 && progress <= 100) {
mProgress = progress;
invalidate();
}
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
//画底部背景
mPaint.setColor(Color.LTGRAY);
canvas.drawRoundRect( new RectF(0, 0, width, height), RADIUS, RADIUS, mPaint);
//画进度条
mPaint.setColor(getResources().getColor(R.color.colorPrimary));
canvas.drawRoundRect(new RectF(0, 0, width * ((float) mProgress / 100), height), RADIUS, RADIUS, mPaint);
//画文字图层
mPaint.setColor(getResources().getColor(R.color.colorPrimary));
mPaint.setTextSize(sp2px(getContext(), 20));
mPaint.setTypeface(Typeface.DEFAULT_BOLD);
mPaint.setTextAlign(Paint.Align.CENTER);
Bitmap textBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas textCavas = new Canvas(textBitmap);
String content = mProgress + "%";
float textY = height / 2.0f - (mPaint.getFontMetricsInt().descent / 2.0f + mPaint.getFontMetricsInt().ascent / 2.0f);
textCavas.drawText(content, width / 2.0f, textY, mPaint);
//画最上层的白色图层，未相交时不会显示出来
mPaint.setColor(Color.WHITE);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
textCavas.drawRoundRect(new RectF(0, 0, width * ((float) mProgress / 100), height), RADIUS, RADIUS, mPaint);
//画结合后的图层
canvas.drawBitmap(textBitmap, 0, 0, mPaint);
mPaint.setXfermode(null);
textBitmap.recycle();
}
public static int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
}
