本文主要是介绍自定义view实现仿魅族应用下载进度指示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
仅仅用于学习圆角进度条与圆角边框的叠加混合效果以及文字颜色跟随进度条颜色自动调整，并未涉及触摸事件，下载百分比更新等。
package com.example.test;import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Shader.TileMode;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;public class MyView extends View {private Paint paint;private int strokeWidth = 20;private String text = "正在下载中";private float franction = 0;public MyView(Context context) {super(context);}public MyView(Context context, AttributeSet attrs) {super(context, attrs);new Handler().postDelayed(new Runnable() {@Overridepublic void run() {ValueAnimator animator = ValueAnimator.ofFloat(0, 100);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {franction = animation.getAnimatedFraction();invalidate();}});animator.setDuration(5000);animator.start();}}, 1000);setLayerType(LAYER_TYPE_SOFTWARE, paint);//setXfermode方法不起作用，需要先关闭硬件加速，且此方法不能再ondraw中调用，因为内部会调用invalidatepaint = new Paint();paint.setAntiAlias(true);paint.setStyle(Paint.Style.STROKE);paint.setTextSize(70);//文字大小需要提前设置好再进行测量宽度paint.setStrokeWidth(strokeWidth);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);paint.setShader(null);//这一句不要丢，当进度超过文字区域时需要重置shaderint width = getWidth();int height = getHeight();paint.setColor(Color.GREEN);paint.setStyle(Paint.Style.STROKE);/*** 绿色圆角边框* 特别注意：边框的left,top,right,bottom坐标,具体开始位置为线粗的一半* （很好理解：可以想象一下我们用的0.5粗度的水笔，笔尖的位置实际上是线粗一半的位置，而此处边框的坐标为笔尖的坐标）* 当边框线粗度很小时，坐标用(0,0,width,height)可能看不出差别，当线粗加粗后差别很明显！！！我发现很多自定义view的博主们都没注意到这一点*/RectF rect = new RectF(strokeWidth / 2, strokeWidth / 2, width- strokeWidth / 2, height - strokeWidth / 2);/*** 绘制圆角边框* 特别注意：圆角的半径也是需要减去线宽的一半*/canvas.drawRoundRect(rect, height / 2 - strokeWidth / 2, height / 2- strokeWidth / 2, paint);/*** 白色背景区域* 背景区域为填充样式，坐标从线宽处开始，圆角半径需要减去线宽*/RectF background = new RectF(strokeWidth, strokeWidth, width - strokeWidth,height - strokeWidth);paint.setStyle(Paint.Style.FILL);paint.setColor(Color.WHITE);canvas.drawRoundRect(background, height / 2 - strokeWidth, height / 2- strokeWidth, paint);/*** 绿色进度条区域*/paint.setColor(Color.GREEN);paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));float progress = (width - strokeWidth * 2) * franction;//计算出当前进度progress，取值[0，width - strokeWidth * 2]RectF src = new RectF(strokeWidth, strokeWidth, strokeWidth + progress, height - strokeWidth);canvas.drawRect(src, paint);paint.setXfermode(null);//绘制完进度重置状态/*** 计算文字的高度和宽度* 特别注意：如果文字只有中文，此方法完全可行，如果包含英文或者拼音其他特殊文字，则需要使用下面的方法* FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();* float textHeight = fontMetricsInt.bottom - fontMetricsInt.top;*/float textHeight = paint.descent() - paint.ascent();float textWidth = paint.measureText(text);// 注意：在使用paint测量text宽度时，需先设置好textsize，否则测量不准确。//计算出文字居中时的坐标位置float px = (width - textWidth) / 2;float py = (height - textHeight) / 2 - paint.ascent();//当有英文是此处需要-fontMetricsInt.topprogress+=strokeWidth;//progress的位置需要加上线宽后再和px做比较/*** 绘制到文字颜色过度区域时*/if (progress >= px && progress <= px + textWidth) {float split = (progress - px) / textWidth;LinearGradient shader = new LinearGradient(px, 0, px + textWidth,0, new int[] { Color.WHITE, Color.GREEN }, new float[] {split, split + 0.0001f }, TileMode.CLAMP);paint.setShader(shader);} else if (progress > px + textWidth) {paint.setColor(Color.WHITE);// 当前进度超过文字区域时，要把文字颜色改成背景色}canvas.drawText(text, px, py, paint);}
}
运行效果：
遗留问题：在处理圆角进度条与圆角边框的叠加混合效果时，发现如果圆角进度条颜色与圆角边框颜色不一致时，会有些小问题，此问题源于混合叠加时的canvas大小。可绕过setXfermode形式，采用path画圆弧的方式实现，不过需要计算弧度夹角，反余弦函数等，比较麻烦。如果偏要使用setXfermode我觉得可以通过创建空的bitmap，创建Canvas的形式解决。只是猜想，并未实施验证，如有高手，欢迎指导。
这篇关于自定义view实现仿魅族应用下载进度指示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
