vivo商店在下载应用的时候，底部有一个圆角矩形的下载进度条，中间有一个进度文字，而且进度和文字交汇的时候，交汇部分的文字会从蓝色边为白色，会有一种一半白色字，一半蓝色字的效果。
最终效果和对比vivo商店效果
文章图片
vivo应用商店下载效果.png
文章图片
最终效果.gif 分析1 - 计算进度 进度计算就比较简单了，我们通过复写onSizeChanged()方法，获取到控件的宽后，先计算当前进度百分比，再将百分比乘以宽度，就可以得到应该绘制的宽度了。
绘制圆角矩形需要传一个Rect，Rect的构造方法需要传4个位置，分别是left、top、right、bottom，我们主要是计算不断变化的right值。在drawProgress()方法中，right值为最大的宽度 * 进度百分比值。

/** * 控件宽 */ private int mViewWidth; /** * 控件高 */ private int mViewHeight; /** * 圆角弧度 */ private float mRadius; /** * 当前进度 */ private int mProgress; /** * 最大进度值 */ private int mMaxProgress; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //画进度条 drawProgress(canvas); }/** * 画进度 */ private void drawProgress(Canvas canvas) { RectF rect = new RectF(getFrameLeft(), getFrameTop(), getFrameRight() * getProgressRatio(), getFrameBottom()); canvas.drawRect(rect, mProgressPaint); }/** * 获取当前进度值比值 */ private float getProgressRatio() { return (mProgress / (mMaxProgress * 1.0f)); }//------------ getFrameXxx()方法都是处理padding ------------private float getFrameLeft() { return getPaddingStart(); }private float getFrameRight() { return mViewWidth - getPaddingEnd(); }private float getFrameTop() { return getPaddingTop(); }private float getFrameBottom() { return mViewHeight - getPaddingBottom(); }//------------ getFrameXxx()方法都是处理padding ------------

分析2 - 绘制圆角矩形 背景和进度条，都是圆角矩形，我们可以使用canvas.drawRoundRect()的API来绘制。但是使用canvas.drawRoundRect()会有个问题，当进度比较小的时候，例如1%，计算出来的矩形长度比较小，会导致圆角不是满的，缺陷效果见动图（注意看刚从左侧出来时圆角的大小）。

文章图片
canvas.drawRoundRect()的问题.gif

public class DownloadProgressView extends View { ...省略其他代码@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mViewWidth = w; mViewHeight = h; //计算出圆角半径 mRadius = Math.min(mViewWidth, mViewHeight) / 2f; }@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //画背景 drawBg(canvas); //画进度条 drawProgress(canvas); }/** * 画背景 */ private void drawBg(Canvas canvas) { canvas.drawRoundRect(new RectF(getFrameLeft(), getPaddingTop(), getFrameRight(), getFrameBottom()), mRadius, mRadius, mBgPaint); }/** * 画进度 */ private void drawProgress(Canvas canvas) { RectF rect = new RectF(getFrameLeft(), getFrameTop(), getFrameRight() * getProgressRatio(), getFrameBottom()); canvas.drawRoundRect(rect, mRadius, mRadius, mProgressPaint); }//------------ getFrameXxx()方法都是处理padding ------------private float getFrameLeft() { return getPaddingStart(); }private float getFrameRight() { return mViewWidth - getPaddingEnd(); }private float getFrameTop() { return getPaddingTop(); }private float getFrameBottom() { return mViewHeight - getPaddingBottom(); }//------------ getFrameXxx()方法都是处理padding ------------ }

• 解决方案

我的方案是这样的，不使用drawRoundRect()方法来绘制圆角矩形，而是先使用canvas.clipPath()方法，添加一个有圆角矩形的Path，来裁切画布，再drawRect()方法来绘制一个长矩形，就保持了圆角。
但clipPath()也有一个缺点，就是裁切出来的圆角会有锯齿，Paint设置了setAntiAlias(true)也没有用，大家有好的方法，可以评论中说出来，互相学习一下！

public class DownloadProgressView extends View { @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //裁剪圆角 clipRound(canvas); //画背景 drawBg(canvas); //画进度条 drawProgress(canvas); }/** * 裁剪圆角 */ private void clipRound(Canvas canvas) { Path path = new Path(); RectF roundRect = new RectF(getFrameLeft(), getFrameTop(), getFrameRight(), getFrameBottom()); path.addRoundRect(roundRect, mRadius, mRadius, Path.Direction.CW); canvas.clipPath(path); }/** * 画背景 */ private void drawBg(Canvas canvas) { canvas.drawRect(new RectF(getFrameLeft(), getPaddingTop(), getFrameRight(), getFrameBottom()), mBgPaint); }/** * 画进度 */ private void drawProgress(Canvas canvas) { RectF rect = new RectF(getFrameLeft(), getFrameTop(), getFrameRight() * getProgressRatio(), getFrameBottom()); canvas.drawRect(rect, mProgressPaint); } }

分析3 - 绘制文字和交汇 要让文字和进度交汇时，让蓝色变为白色，需要使用到PorterDuffXfermode。PorterDuffXfermode可以将2个图像进行合成，或者简单说为相交模式，而合成方式有16种，见下图。（Src蓝色方块为上层图层，Dst黄色圆形为下层图层。）

文章图片
PorterDuffXfermode模式图解.jpg 查阅文档，我们发现SrcATop模式比较符合我们的需求，在SrcATop模式下，Src图层不覆盖Dst图层的像素会被抛弃，只保留Src图层覆盖Dst图层的图层像素。
我们的思路是这样的：画4个图层，最底部的灰色背景图层，再上一层蓝色进度图层，接着是文字图层，最上层是一层白色的进度图层，重点在画文字和白色进度图层是添加了PorterDuffXfermode（SrcATop模式）。
【Android|Android 仿vivo商店下载进度条】白色进度和蓝色进度的大小一直是同步的，但是因为PorterDuffXfermode的原因，白色图层未覆盖到文字时，一直都是被抛弃图层像素，相当于是透明的，只有当和文字相交时，才会绘制出白色图层，就显示出了一半白色文字，一半蓝色文字的效果，而其他部分都没有和文字相交都被抛弃，都为透明。
绘制文字、白色进度图层代码，见drawText()方法。

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //裁剪圆角 clipRound(canvas); //画背景 drawBg(canvas); //画进度条 drawProgress(canvas); //画文字图层 drawText(canvas); }/** * 画文字 */ private void drawText(Canvas canvas) { mTextPaint.setColor(mPercentageTextColor); //创建文字图层 Bitmap textBitmap = Bitmap.createBitmap(mViewWidth, mViewHeight, Bitmap.Config.ARGB_8888); Canvas textCanvas = new Canvas(textBitmap); String textContent = mProgress + "%"; //计算文字Y轴坐标 float textY = mViewHeight / 2.0f - (mTextPaint.getFontMetricsInt().descent / 2.0f + mTextPaint.getFontMetricsInt().ascent / 2.0f); textCanvas.drawText(textContent, mViewWidth / 2.0f, textY, mTextPaint); //画最上层的白色图层，未相交时不会显示出来 mTextPaint.setColor(mPercentageTextColor2); mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP)); textCanvas.drawRect(new RectF(getFrameLeft(), getFrameTop(), getFrameRight() * getProgressRatio(), getFrameBottom()), mTextPaint); //画结合后的图层 canvas.drawBitmap(textBitmap, getFrameLeft(), getFrameTop(), mTextPaint); mTextPaint.setXfermode(null); textBitmap.recycle(); }

手势拓展 经过上面的进度、文字、交汇处理，进度条算是完整了，接下来拓展一下没有的东西，例如手势拖动，就像SeekBar一样，当我们触摸进度条时，进度会随着移动而改变进度。
我们先重写dispatchTouchEvent()方法，当down事件来到时，让父控件不拦截，我们进行拦截。接着重写onTouchEvent()方法，计算Move、Up时，移动的距离，计算出百分比和应有的进度值，然后不断调用setProgress()来更新进度。

public class DownloadProgressView extends View { @Override public boolean dispatchTouchEvent(MotionEvent event) { int action = event.getAction(); //拦截事件，然后让父类不进行拦截 if (mControlMode == MODE_TOUCH && action == MotionEvent.ACTION_DOWN) { getParent().requestDisallowInterceptTouchEvent(true); return true; } return super.dispatchTouchEvent(event); }@Override public boolean onTouchEvent(MotionEvent event) { //拽托模式下才起效果 if (mControlMode == MODE_TOUCH) { int action = event.getAction(); //包裹Down事件时的x坐标 if (action == MotionEvent.ACTION_DOWN) { mTouchDownX = event.getX(); return true; } else if (action == MotionEvent.ACTION_MOVE || action == MotionEvent.ACTION_UP) { //Move或Up的时候，计算拽托进度 float endX = event.getX(); //计算公式：百分比值 = 移动距离 / 总长度 float distanceX = Math.abs(endX - mTouchDownX); float ratio = (distanceX * 1.0f) / (getFrameRight() - getFrameLeft()); //计算百分比应该有的进度：进度 = 总进度 * 进度百分比值 float progress = mMaxProgress * ratio; setProgress((int) progress); return true; } return super.onTouchEvent(event); } else { return super.onTouchEvent(event); } } }

完整代码

• 自定义属性

• 自定义View

public class DownloadProgressView extends View { /** * 控制模式-普通 */ private static final int MODE_NORMAL = 1; /** * 控制模式-触摸 */ private static final int MODE_TOUCH = 2; /** * View默认最小宽度 */ private int mDefaultMinWidth; /** * View默认最小高度 */ private int mDefaultMinHeight; /** * 控件宽 */ private int mViewWidth; /** * 控件高 */ private int mViewHeight; /** * 圆角弧度 */ private float mRadius; /** * 背景画笔 */ private Paint mBgPaint; /** * 进度画笔 */ private Paint mProgressPaint; /** * 文字画笔 */ private Paint mTextPaint; /** * 当前进度 */ private int mProgress; /** * 背景颜色 */ private int mBgColor; /** * 进度背景颜色 */ private int mProgressBgColor; /** * 进度百分比文字的颜色 */ private int mPercentageTextColor; /** * 第二层进度百分比文字的颜色 */ private int mPercentageTextColor2; /** * 进度百分比文字的字体大小 */ private float mPercentageTextSize; /** * 最大进度值 */ private int mMaxProgress; /** * 进度更新监听 */ private OnProgressUpdateListener mOnProgressUpdateListener; /** * 控制模式 */ private int mControlMode; /** * 按下时Down事件的x坐标 */ private float mTouchDownX; public DownloadProgressView(Context context) { this(context, null); }public DownloadProgressView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); }public DownloadProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs, defStyleAttr); }private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { initAttr(context, attrs, defStyleAttr); //取消硬件加速 setLayerType(LAYER_TYPE_SOFTWARE, null); //背景画笔 mBgPaint = new Paint(); mBgPaint.setAntiAlias(true); mBgPaint.setColor(mBgColor); //进度画笔 mProgressPaint = new Paint(); mProgressPaint.setColor(mProgressBgColor); mProgressPaint.setAntiAlias(true); //文字画笔 mTextPaint = new Paint(); mTextPaint.setAntiAlias(true); mTextPaint.setTextSize(mPercentageTextSize); mTextPaint.setTextAlign(Paint.Align.CENTER); //计算默认宽、高 mDefaultMinWidth = dip2px(context, 180f); mDefaultMinHeight = dip2px(context, 40f); }private void initAttr(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DownloadProgressView, defStyleAttr, 0); mBgColor = array.getColor(R.styleable.DownloadProgressView_dpv_bg, Color.argb(100, 169, 169, 169)); mProgressBgColor = array.getColor(R.styleable.DownloadProgressView_dpv_progress_bg, Color.GRAY); //进度百分比文字的颜色，默认和进度背景颜色一致 mPercentageTextColor = array.getColor(R.styleable.DownloadProgressView_dpv_percentage_text_color, mProgressBgColor); //第二层，进度百分比文字的颜色 mPercentageTextColor2 = array.getColor(R.styleable.DownloadProgressView_dpv_percentage_text_color2, Color.WHITE); //进度百分比文字的字体颜色 mPercentageTextSize = array.getDimension(R.styleable.DownloadProgressView_dpv_percentage_text_size, sp2px(context, 15f)); //当前进度值 mProgress = array.getInt(R.styleable.DownloadProgressView_dpv_progress, 0); //最大进度值 mMaxProgress = array.getInteger(R.styleable.DownloadProgressView_dpv_max_progress, 100); //控制模式 mControlMode = array.getInt(R.styleable.DownloadProgressView_dpv_control_mode, MODE_NORMAL); array.recycle(); }@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mViewWidth = w; mViewHeight = h; //计算出圆角半径 mRadius = Math.min(mViewWidth, mViewHeight) / 2f; }@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //裁剪圆角 clipRound(canvas); //画背景 drawBg(canvas); //画进度条 drawProgress(canvas); //画文字图层 drawText(canvas); }//------------ getFrameXxx()方法都是处理padding ------------private float getFrameLeft() { return getPaddingStart(); }private float getFrameRight() { return mViewWidth - getPaddingEnd(); }private float getFrameTop() { return getPaddingTop(); }private float getFrameBottom() { return mViewHeight - getPaddingBottom(); }//------------ getFrameXxx()方法都是处理padding ------------/** * 裁剪圆角 */ private void clipRound(Canvas canvas) { Path path = new Path(); RectF roundRect = new RectF(getFrameLeft(), getFrameTop(), getFrameRight(), getFrameBottom()); path.addRoundRect(roundRect, mRadius, mRadius, Path.Direction.CW); canvas.clipPath(path); }/** * 画背景 */ private void drawBg(Canvas canvas) { canvas.drawRect(new RectF(getFrameLeft(), getPaddingTop(), getFrameRight(), getFrameBottom()), mBgPaint); }/** * 画进度 */ private void drawProgress(Canvas canvas) { RectF rect = new RectF(getFrameLeft(), getFrameTop(), getFrameRight() * getProgressRatio(), getFrameBottom()); canvas.drawRect(rect, mProgressPaint); }/** * 画文字 */ private void drawText(Canvas canvas) { mTextPaint.setColor(mPercentageTextColor); //创建文字图层 Bitmap textBitmap = Bitmap.createBitmap(mViewWidth, mViewHeight, Bitmap.Config.ARGB_8888); Canvas textCanvas = new Canvas(textBitmap); String textContent = mProgress + "%"; //计算文字Y轴坐标 float textY = mViewHeight / 2.0f - (mTextPaint.getFontMetricsInt().descent / 2.0f + mTextPaint.getFontMetricsInt().ascent / 2.0f); textCanvas.drawText(textContent, mViewWidth / 2.0f, textY, mTextPaint); //画最上层的白色图层，未相交时不会显示出来 mTextPaint.setColor(mPercentageTextColor2); mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP)); textCanvas.drawRect(new RectF(getFrameLeft(), getFrameTop(), getFrameRight() * getProgressRatio(), getFrameBottom()), mTextPaint); //画结合后的图层 canvas.drawBitmap(textBitmap, getFrameLeft(), getFrameTop(), mTextPaint); mTextPaint.setXfermode(null); textBitmap.recycle(); }@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); setMeasuredDimension(handleMeasure(widthMeasureSpec, true), handleMeasure(heightMeasureSpec, false)); }@Override public boolean dispatchTouchEvent(MotionEvent event) { int action = event.getAction(); //拦截事件，然后让父类不进行拦截 if (mControlMode == MODE_TOUCH && action == MotionEvent.ACTION_DOWN) { getParent().requestDisallowInterceptTouchEvent(true); return true; } return super.dispatchTouchEvent(event); }@Override public boolean onTouchEvent(MotionEvent event) { //拽托模式下才起效果 if (mControlMode == MODE_TOUCH) { int action = event.getAction(); //包裹Down事件时的x坐标 if (action == MotionEvent.ACTION_DOWN) { mTouchDownX = event.getX(); return true; } else if (action == MotionEvent.ACTION_MOVE || action == MotionEvent.ACTION_UP) { //Move或Up的时候，计算拽托进度 float endX = event.getX(); //计算公式：百分比值 = 移动距离 / 总长度 float distanceX = Math.abs(endX - mTouchDownX); float ratio = (distanceX * 1.0f) / (getFrameRight() - getFrameLeft()); //计算百分比应该有的进度：进度 = 总进度 * 进度百分比值 float progress = mMaxProgress * ratio; setProgress((int) progress); return true; } return super.onTouchEvent(event); } else { return super.onTouchEvent(event); } }/** * 处理MeasureSpec */ private int handleMeasure(int measureSpec, boolean isWidth) { int result; if (isWidth) { result = mDefaultMinWidth; } else { result = mDefaultMinHeight; } int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { result = specSize; } else { //处理wrap_content的情况 if (specMode == MeasureSpec.AT_MOST) { result = Math.min(result, specSize); } } return result; }/** * 设置进度最大值 */ public DownloadProgressView setMaxProgress(int maxProgress) { mMaxProgress = maxProgress; invalidate(); return this; }/** * 设置进度 */ public void setProgress(int progress) { if (progress >= 0 && progress <= 100) { mProgress = progress; invalidate(); if (mOnProgressUpdateListener != null) { mOnProgressUpdateListener.onProgressUpdate(progress); } } }/** * 获取当前进度 */ public int getProgress() { return mProgress; }/** * 获取最大进度 */ public int getMaxProgress() { return mMaxProgress; }public interface OnProgressUpdateListener { /** * 进度更新时回调 * * @param progress 当前进度 */ void onProgressUpdate(int progress); }public void setOnProgressUpdateListener(OnProgressUpdateListener onProgressUpdateListener) { mOnProgressUpdateListener = onProgressUpdateListener; }/** * 获取当前进度值比值 */ private float getProgressRatio() { return (mProgress / (mMaxProgress * 1.0f)); }public static int sp2px(Context context, float spValue) { final float fontScale = context.getResources().getDisplayMetrics().scaledDensity; return (int) (spValue * fontScale + 0.5f); }public static int dip2px(Context context, float dipValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dipValue * scale + 0.5f); } }

具体使用

• 在布局中添加控件

• Java代码

private DownloadProgressView vDownloadProgressView; @Override protected void onCreate(Bundle savedInstanceState) { vDownloadProgressView = view.findViewById(R.id.download_progress); //设置进度监听 vDownloadProgressView.setOnProgressUpdateListener(new DownloadProgressView.OnProgressUpdateListener() { @Override public void onProgressUpdate(int progress) { vProgressIndicator.setText("当前进度：" + progress); } }); //手动设置当前进度 vDownloadProgressView.setProgress(0); //设置最大值 vDownloadProgressView.setMaxProgress(100); } }

参考文章 一个简单又不简单的进度条

Android - PorterDuffXfermode实现进度条

推荐阅读

• 

  雷尼替丁|重磅大品种，暂停销售使用
• 

  mysql限制binlog mysql限制sql执行时间
• 

  请问怀孕6周了去拍婚纱照要注意什么？化一整天的新娘妆对宝宝有影响吗？
• 

  梦到三个小女孩的意思 梦到三个小女孩什么意思
• 

  手机号拉黑名单怎么拉回来
• 

  香橙app怎么发布话题 具体方法介绍
• 

  荣耀崛起破解版无限抽，开会员抢TX游戏激活几率大吗
• 

  疤痕美容一般多少钱 青岛整容疤痕多少钱
• 

  吃草莓的好处
• 

  空腹吃柚子好不好
• 

  今日合肥土鸡苗价格今日价
• 

  趣故事怎么填写邀请码？邀请码大全汇总
• 

  遇到松下空调不制冷自动关机怎么办？3个处理方法帮助你
• 

  大家看过的哪部战争类型纪录片印象最深刻？
• 

  反加偏旁组词 反加偏旁组词有哪些
• 

  户口冻结是什么意思
• 

  工程管理系统软件，工程项目管理软件选什么好
• 

  洗衣机不转是什么原因造成的,来涨点知识
• 

  梅州客家人来源以哪里
• 

  从哪些方面选择儿童玩具好 从哪些方面选择儿童玩具好呢

• android第三方框架（五）ButterKnife
• Android中的AES加密-下
• 带有Hilt的Android上的依赖注入
• android|android studio中ndk的使用
• Android事件传递源码分析
• RxJava|RxJava 在Android项目中的使用（一）
• Android7.0|Android7.0 第三方应用无法访问私有库
• 深入理解|深入理解 Android 9.0 Crash 机制（二）
• android防止连续点击的简单实现（kotlin）
• Android|Android install 多个设备时指定设备